I made this project to learn how to make a dashbaord app, as it is something I am looking to incorporate into existing and future projects. I used a tutorial from YouTube by EdRoh. I highly recommend checking out this tutorial as Ed is a wonderful teacher.
There are QUITE a few bundles to install. Links for documentation below.
npx create-react-app project-name
cd project-name- create-react-app: https://create-react-app.dev/
- material ui:https://mui.com/material-ui/getting-started/installation/
- nivo charts: https://nivo.rocks/components
- full calendar: https://fullcalendar.io/docs
- formik: https://formik.org/docs/overview#installation
- yup validation: https://github.com/jquense/yup
- react pro sidebar: https://github.com/azouaoui-med/react-pro-sidebar ** use install react-pro-sidebar@0.7.1
Ed provides a couple docs of mock code for charts and geographic maps. Available here: https://github.com/ed-roh/react-admin-dashboard/tree/master/src/data
I learned how to use a bunch of new tech in this project, which was super fun. Here's a list!
- React & JSX
- JavaScript
- Material UI
- Nivo Charts
- Formik
- Yup Validation
- FullCalendar
- Data Grid
- Light & Dark Mode
- 4 different Charts
- 3 different Data Table Pages
- FAQ Page
- Form Page
- Calendar Integration