YoVDO

Build a Terminal Dashboard with React

Offered By: egghead.io

Tags

Data Visualization Courses React Courses ESLint Courses

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 Trees
egghead.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