Video

Build a Terminal Dashboard with React

đŸ•šī¸ Levels: 😎 Intermediate
âŗ Duration: 1 hours
🤑 Price: Subscription
🧑‍đŸ’ģ Learning Platform: Egghead.io
🧑‍🎓 Certificate: No

🔑 Key Learning Outcomes

  • Understanding how to create a developer dashboard in the terminal using react-blessed and react-blessed-contrib.
  • Learning various ways to layout the dashboard, change fonts, style with colors, and position text within widgets.
  • Creating widgets to display developer content like an interactive time log, a pomodoro timer, recent commits, and running docker containers.
  • Implementing custom widgets to add to the dashboard.

👨‍đŸĢ About the Course

This course focuses on building a developer dashboard in the terminal using React libraries. You will learn to create various widgets to display developer-related information and customize the dashboard layout. By the end of the course, you will be able to design and implement your own widgets for the dashboard.

đŸŽ¯ Target Audience

  • Ideal for developers familiar with React who want to explore building CLI applications and creating terminal dashboards.
  • Suitable for those interested in enhancing their skills in React development and working with command-line interfaces.

✅ Requirements

  • Basic knowledge of React and familiarity with CLI applications is recommended to fully benefit from this course.

📖 Course Content

  • 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` <box> 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.

Drop a comment

Build a Terminal Dashboard with React by Elijah Manor

Log in to leave a feedback

Login