Trax
Student Management System
Trax is a web application built for teachersteachers to efficiently manage groups of students.
Purpose and goal
Student list pageI built Trax both as an exercise to develop my full-stack capabilities, and to solve a real-world problem that I encountered.
I'm a regular volunteer at a non-profit organisation, and every week we conduct lessons for underprivleged children. However, as volunteers often come and go, it's hard for the children to progress academically with no fixed record of their performance over time.
Student's pageTrax's goal is to have a central store of children (students) and their feedback, to make it easier for volunteers (teachers), to conduct effective lessons.conduct effective lessons. Importantly, another goal is to make the application responsive and easy-to-use.
Stack consideration
I chose to use React for the frontend as its native useState and useContext hook APIs provided robust state managementrobust state management out of the box. I initially opted against using Redux for state management as I thought it would be overkill, but as the application grew larger, I had second thoughts, but ultimately decided against it anyway.
I chose Firebase for the backend authentication and database as the Firebase API is extremely simple yet powerfulsimple yet powerful , serving my needs well with fewer lines of code. Other considerations were to use ExpressJS with MongoDB to serve data at endpoints, but I wanted to focus more on the frontend aspects of this project.
Lastly, I chose Netlify to host the application for its ease of use and continuous integrationcontinuous integration capabilities.
Problems faced
I encountered difficulties with the state management of the project due to the number of contexts to keep track of, properly updating each one whenever an event is triggered and using the correct hooks.using the correct hooks.
I also faced many situations where I had to refactorrefactor my code completely to better suit my project, creating generic components and passing them props instead of creating a 100 unique components with slight variations.
Additionally, with dozens of components in the codebase, each with their own styling, stylesheets became clutteredstylesheets became cluttered and confused.
Lessons learnt
My initial sitemap planPersonally, my biggest takeaway from this project is to plan properlyplan properly - the architecture, the project requirements, and to work in iterations. While diving head first into a project is a lot quicker in the short-run, it will ultimately lead to unforeseen issues that drags out the development process.
Additionally, in the future, I would opt for:
- Using ReduxRedux for state management.
- Using styled-componentsstyled-components for less styling conflicts