samwave.io

Student Management System

NextJS • Firebase • Project at Alphabag

Overview

Three developers and I built a student management system using Next.js. The main purpose of the app is to manage the timetables of students enrolled in Siuroma Kids classes. This app was essential to the center's success as they previously relied on a person manually tracking the schedules of everyone, which was inefficient. The system we built automated this process, allowing the learning center to operate at a larger capacity.

On top of timetable features, the app also handled important features such as enrollment, handling requests to reschedule classes, and generating custom receipts.

My Contributions

Handling Merge Conflicts

Brainstorming course code naming with freeform
Me presenting a proposed way to name course codes. I created diagrams using Freeform to convey ideas visually.

With a project of this scale, merge conflicts were a frequent challenge. This was especially the case as all of us needed to connect to the backend at different times and in different ways. Because of this, having a solid backend was an utmost priority.

We held multiple meetings to discuss about how the backend should be constructed. We chose Firebase, as it was relatively easier to build on compared to other options. We also unified the naming of Firebase documents, course codes, and keys.

Receipt Generator

Receipt generator
Screenshot of the receipt generator interface. The generated receipt is custom-designed with branding, and all information is generated at the click of a button.

I built the custom receipt generator for this project. Prior to this receipt generator being created, Figma was used to create the receipts manually. The app I built allowed a user to type a student's code, and it automatically fetches the student's timetable and any additional information and completes the receipt, ready to export as a PDF. This generator was built in a react component, making it so that merging it with the main codebase was relatively simple.

From a technical perspective, implementing this generator was quite challenging as it had to connect to the backend to fetch student data given a student code. While working on this project, I developed a deeper understanding of fetching data from a backend. This project specifically used Firebase as the backend, so I had hands-on experience with CRUD operations on Firebase documents.