About the project
This project gave me a ton of practice with React and Material UI. I became much more fluent with the different aspects of implementing a larger project such as this one. I cemented concepts such as de-structuring, props, theme customization, and application layout. This dashboard is so far the most feature rich application I have built. Most of the features and functionality come from the implementation of external libraries. Some of the most notable features are:
- Fully dynamic and customizable human resource management tools utilizing Material UI's X-Data-Grid. The data for this app is static but it is only a short API call or SQL query from being dynamic.
- A fully functional calendar page that can view different time grids (Month, Week, Day, etc.) and add and remove new events. A added my own modal created completely from scratch that matches the theme of the site that pops up for the calendar event changes.
- A Formik Form paired with Yup's form validation to create new users. While this form is not currently connected to a back end (features I plan on tackling in future projects), it will print out the saved form data to the console when subnitted.
- This project used Pro Sidebar to create a nice user interface to control the whole app. These sidebars are highly customizeable
- Implementation of a light and dark mode. A theme.js file was created and a color palette for both themes was generated which was utilized throughout most of the the components.
What was the goal of the project?
I completed this project to get more familiar with writing React apps that both look good and DO something. Up to this point, my projects were mainly covering the basics and demonstrated only one or two capabilities. I wanted to make something that would push my boundaries while at the same time, providing a solid framework from which to create more complex, more feature rich applications in the future.
Project execution
I created this project with help from an online tutorial. Every single line of code was hand written by me over the course of several days. In doing so, I was able to practice writing React code and project planning the way professionals do. I added some additional features to the project, notably the modals on the Calendar Page when adding and deleteing events.
Project results
The result is exactly what I was looking for: a solid portfolio project that can provide a jumping off point for more complex future projects.
Project completed on:
January 16, 2023