Student GradeFlow
Student GradeFlow is a personalized student dashboard that brings together essential tools to support students throughout their academic journey. This all-in-one platform is designed to help students stay organized, motivated, and focused on their academic goals, providing an integrated approach to their daily routine.
The project includes features such as a Pomodoro timer, a to-do list, and a countdown timer, all aimed at enhancing students’ productivity and time management. These tools are designed to help students efficiently manage their schedules, while the visual elements encourage and motivate them to stay on track and achieve their academic objectives. Student GradeFlow aims to help students progress smoothly, with their grades flowing effortlessly toward success.
GitHub: https://github.com/ting-dev-coder/student-gradflow
Website: https://student-gradflow-hoet70dol-tings-projects-02cc60de.vercel.app
Process
Startup
As a student, my biggest wish is to graduate as soon as possible—the faster, the better! With that in mind, I designed this student dashboard tool, which integrates various practical features to assist students in managing their studies more efficiently.
Moodboard
After deciding on the project’s theme, I started by creating a moodboard to determine the desired visual style. Initially, I chose yellow as the primary color because of its energetic and vibrant feel. However, during the design process, I realized that using large areas of yellow could negatively impact contrast and readability.
As a result, I switched to dark green as the main color while keeping yellow as a secondary color. This allowed me to maintain a lively atmosphere while ensuring better visibility and readability.
Tech Stack
From a technical perspective, I wanted to leverage this capstone project as an opportunity to familiarize myself with tools that are frequently used in the industry. To start, I selected a tech stack that is popular but unfamiliar to me. Next, I focused on implementing functionalities that I often work on in my projects. In other words, I chose widely used but unfamiliar technologies and applied them to build common features. After finalizing the key functionalities, I began brainstorming the website’s topic. Eventually, I decided to target students and create a platform that combines tools they can use quickly and easily.
I chose Next.js as the front-end framework, paired with Mantine UI for the interface design. For the backend, I used Hono to handle API logic and Appwrite for authentication and data storage.
Website
The website of the core functionalities of the project revolves around CRUD operations, which provided me with hands-on experience in tackling real-world development challenges and optimizing data handling. While Next.js helped address SEO concerns and initial load times that are common in SPA applications, it also introduced hydration errors (mismatches between server and client-side rendering). Debugging these issues took considerable effort, requiring adjustments to SSR and CSR logic, but I was ultimately able to resolve them and ensure a stable application.
After completing the project, I deployed it using Vercel and conducted cross-browser testing to guarantee a seamless experience across different screens. This development experience significantly improved my understanding of Next.js and Hono integration, as well as how to efficiently manage SSR and API design challenges. More importantly, it deepened my knowledge of front-end and back-end collaboration, which will undoubtedly benefit my future work as a developer.
