A dashboard for all of your administration needs.
- Light and dark mode for accessibility
- Collapsible side bar for increasing view width
- Search bar (non-functional)
- Metrics, analytics, charts, and other data all viewable in one place (mock data was used)
- 3 tables with sort-by functionality use Data Grid to display mock data
- Profile Form built with Formik and validated with Yup (submitting the button will console log the form data)
- Calendar has a fully interactive and functional calendar with drag+schedule functionality built with FullCalendar (refreshing the page will lose any data entered)
- FAQ Page features Accordion elements provided by MUI components
- 4 different chart types were customly modified using Nivo documentation
- React.js, React Router, React Pro Sidebar
- Vite, Node.js
- MUI, MUI X Data Grid
- FullCalendar
- Formik, Yup
- Nivo
- HTML5/CSS3, Javascript ES6
- ESbuild, ESlint, Stylelint
- VSCode
- Navigate to the folder you would like to store the project
- Clone the repo
git clone https://github.com/alexisintech/adminme.git
- Switch into the directory that was just created
cd adminme - Install NPM packages
npm install
- To run the application, use
npm run startto run the app in a development environment
The page will reload if you make edits.
- Utilize Material UI for consistent, reusable components
- Light/Dark mode for accessibility
- Mobile-first responsiveness
See the open issues for a full list of proposed features (and known issues).
This project was one of the best learning experiences I have had so far; especially when it comes to building with React. Here are some of the things I learned:
- Tailwind Shades will take a color that you have (say you have a hex code) and it will create an array of shades for that color. In this project, Tailwind Shades was used to create the MUI theme of the application.
- Increased MUI skills
- Explored how to create a custom theme globally to use throughout the app.
- Learned how to pass a mode to the theme so that light and dark mode can be triggered (used the useContext hook for setting up the light/dark mode logic so that it can be accessed anywhere in the app)
- useMediaQuery for writing styling logic in components
- Data Grid provides easily customizable tables with a VAST amount of functionality
- FullCalendar... wow. The documentation is amazing, and now that I know this tool exists, I'm so excited to use it in future projects.
- Nivo charts - the documentation is insane!! You can customize the charts right in the documentation and copy and paste the code into your project. Extremely customizable, easily built charts.
- Formik + Yup have definitely swayed me away from React Hook Form. The documentation seems more palatable for me, and these tools were easier to use in general.