In this collection of lessons we will create a developer dashboard in the terminal using react-blessed and react-blessed-contrib. We will discuss various ways to layout the dashboard, show how to change fonts, style with colors, and position text within each widget. Then we will shift focus on creating some widgets to display developer content such as an interactive time log, a pomodoro timer, displaying recent commits, currently running docker containers, and more. Once you know the basics you can create a widget of your own to add to the dashboard.
Overview
Syllabus
- Bootstrap a `react-blessed` Terminal Application
- Add ESLint Rules to a `react-blessed` Application
- Change text font with `figlet` inside a `react-blessed` Application
- Extract a `react-blessed` Component and Add the `useInterval` Hook
- Fetch the current weather with `weather-js` and display in `react-blessed`
- Extract a custom useRequest hook to simplify fetching data in a react-blessed Application
- Change text color with `chalk` and `gradient-string` inside `react-blessed`
- Position and Align Text inside a `react-blessed` Element
- Create a Full-Screen Dashboard in `react-blessed` using a Percentage Based Layout
- Use the react-blessed-contrib Grid Component to Make a Dashboard Layout
Taught by
Elijah Manor
