Introducing Spartalytics, the all-in-one analytics and user dashboard for my school's FRC robotics team. Built using the create-react-app foundation and data fetching with Firebase, speed and efficiency have reached new all-time highs. During my creation of the site, the workflow on the client-side was simple: The user would be prompted with a login screen directing them to Discord and they would be redirected to their unique dashboard page.
For the design, I chose a data-focused yet simple approach. Each portion of data is placed into its own square or rectangle where it is visibly pleasing to the eye and allows for a breezy, distraction-free experience. To assist with the design I used frameworks such as Material-UI as well as Bootstrap to assist with the grid system and mobile optimization- however, in my later projects I have since switched to TailwindCSS.
If you are interested in viewing the code please refer to my GitHub. Please note that this was one of my first React projects and I have since improved in syntax and overall performance and structure of my code!