john-seredich / tremor-dashboard

🚧WIP Admin Dashboard built using React, Typescript, and Tremor.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tremor Dashboard

💻 Admin Dashboard built using ReactJS, Tremor, React Router, and TypeScript. Here you can find an Admin dashboard that contains bar, area, and line charts. You can manage team members, check invoices, and find customer information. Live Demo

Why I built the project this way

My goal was to build an Admin Dashboard that could be developed to use a database in the future.

  • I used the official Tremor documentation and components.

  • For this project, I opted to use Tremor a React Libary. This allowed me to build Dashboards very quickly. However, the components do not have a lot of customization and limited styling. With this also being a library that is often updated, it causes bugs and issues during development if you want to use the current version.

  • For this project, I opted to use react-router as it allowed me to have multiple pages. I found it to be a very user-friendly and efficient library that helped me create fast, seamless pages for my project.

  • For this project, I did not use a state manager for this project. However, the Context API would be a great options to handle theme switching.

  • TypeScript in my opinion is a must-have in all projects in 2023. It helps keep your code cleaner, bug-free and has better writing practices.

  • SCSS/CSS Modules is an awesome library for styling. However, a styling Library for this project would of increased production speed.

If I had more time I would change this

  • Use Context API for theme switching
  • Hook up a database for all the chart data.
  • Create better styles or use a styling library for consistency and production speed.
  • Use a testing library to set up, create, and execute tests

Technologies

ReactJS
TypeScript
Tremor
React Router

About

🚧WIP Admin Dashboard built using React, Typescript, and Tremor.


Languages

Language:TypeScript 75.1%Language:SCSS 21.1%Language:HTML 3.0%Language:CSS 0.8%