Build a Terminal Dashboard with React
Offered By: egghead.io
Course Description
Overview
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.
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
Related Courses
Abstract Syntax Treesegghead.io Develop Accessible Web Apps with React
egghead.io Modern JavaScript Tooling with React
egghead.io Refactor a React Application to TypeScript
egghead.io Visual Studio Code Extensions to Improve Your Productivity
freeCodeCamp