React Dashboard - TheEvergreenStateCollege/upper-division-cs-23-24 GitHub Wiki

Creating a React.js Dashboard

Foreward

To embark on this project, a comfortable grasp of complexity is essential due to the extensive components, shorthand JavaScript, and the need for dedicated time blocks to complete the task efficiently.

To fully benefit from this wiki guide, familiarity with React is advised to navigate through syntax and concepts like hooks and state seamlessly. If you're not there yet, consider taking a comprehensive introductory course on React, such as the one offered by Frontend Masters.

Having two monitors is highly recommended—one to watch instructional videos and another to code alongside. Attempting to replicate the project without understanding the code will hinder customization efforts. Expect some debugging, including searching for missing curly braces or typos.

This guide assumes an investment of around 10+ hours to follow along with Ed Roh's comprehensive video tutorial, available at: React Dashboard Tutorial Video. Despite being a 4-hour video, the typing pace and debugging may extend the duration.

For a Student Originated Software project, a React Dashboard was developed based on the tutorial's final product. The project can be accessed on the development server: Pswish-Corp React Dashboard.

dark(default) image light(selected) image

Project Highlights:

  1. Completed the tutorial on building a React dashboard, following this guide: React Dashboard Tutorial. Approximately 10 hours were invested, including debugging.
  2. Successfully runs on local and EC2 environments.
  3. Future plans include attempting to build and serve it on Flask.
  4. Subsequent steps involve importing data into PostgreSQL and designing an API, possibly transitioning to Flask for the server-side.
  5. Progress can be tracked through the pull request.

Setup Requirements:

  • Ensure npm and Node.js are installed.
  • Consider using pnpm for package management, as it may resolve dependency issues more effectively than npm.
  • Download Yarn to streamline dependency management.
  • Keep port 3000 open, as it's the default port for this build.

React Packages and Plugins:

  1. Tailwind Shades VSCode Extension: Provides shades for colors, facilitating color customization.
  2. Prettier: Offers syntax formatting and linting on save to maintain code consistency.
  3. Nivo: Source for various graphs used in the project.

Advice:

  • Develop on localhost before deploying to a server.
  • Commit changes frequently and consider setting regular timers as reminders, take a long break every 2 hours.
  • Start each session with a clean build (npm run start) for a known starting point.
  • Always leave your project in a running state when you are done. If you broke it, and don’t know where or how, use git diff or use the command palette in vscode. Click the top bar, type a > and type: compare active file with… and compare a before and an after file. Comment out your changes and one by one comment them back in to see what caused the breakage.
  • Use console.log for debugging and verifying variable values and state changes.
  • Utilize the React Chrome extension for enhanced development capabilities.

Steps

  • Step 1. Create a directory to build your project, make sure it is in a git tracked directory or run git init.
  • Step 2. cd into that new directory
  • Step 3. to be continued (find it in the video)