Inspiration

We wanted to build GradeGuard to help students reduce grade anxiety and make smarter academic decisions. Instead of just showing a grade total after a class's weights, GradeGuard helps students understand what is still possible and what assignments matter the most.

What it does

GradeGuard is an academic grade planner that helps students figure out what scores they need to earn a A, B, or C in a class.

Students can either upload a pdf or manually enter grades & syllabus, and GradeGuard will extract grading categories and weights from a syllabus and will: -read current assignment grades -estimate remaining assignments -calculate the student’s current grade -show what average is needed on remaining work for a C, B, or A -rank assignments by how much they impact the final grade -generate a simple recovery plan based on target grade

How we built it

We built GradeGuard using Next.js, React, TypeScript, FastAPI, and Gemma API and Tailwind CSS. React and Tailwind were used to create the dashboard interface, while Next.js API routes handled the backend logic. We first tested the backend in Streamlit, then migrated that logic into the Next.js app so everything could work together in one full-stack project. For the backend, it was converted into an API using FastAPI, which prompted to Gemma to analyze and extract relevant data from the inputted syllabi and gradebooks.

Challenges we ran into

One of our biggest challenges was migrating from our original Streamlit prototype into a Next.js project. The Streamlit version helped us to prototype the backend logic, but we had to rethink the architecture so the backend logic could work with our React frontend.

We also had to be careful with API keys and environment variables. Since the app uses Gemma, we needed to make sure the API key stayed private and was handled only on the backend. There were also issues of running out of tokens, as we were on the free tier of Gemma API, and sometimes the API threw an exception saying it was too busy to run our prompt.

Testing various models of Gemma 3 and 4, we noticed that it was 2-3x slower than using models of Gemini 2.5 Flash and Gemini 3.0, which was another challenge

Accomplishments that we're proud of

We are proud that GradeGuard turned from a rough prototype into a near complete full-stack project. We were able to connect AI parsing, file uploads, grade calculations, and a clean dashboard into one functional project. Being our first project together and first ever hackathon, we are proud of our progress.

What we learned

We learned how important it is to scope a hackathon project realistically. Our original idea had a lot of possible features, including Canvas integration, pretests, calendar sync, and more. We realized that focusing on only a couple clear, most important ideas was more valuable than trying to build everything at once.

What's next for GradeGuard

The next step for GradeGuard would be deeper integration with student platforms like Canvas, so grades and assignments could update automatically instead of requiring uploads. We would also want to improve support for different syllabus formats and add stronger validation when AI extracts grading information.

How to access GradeGuard

  1. Access the Github: https://github.com/vixceity/GradeGuard
  2. Clone the repository to your device and open the location
  3. Create a .env.local file that mimics the .env.example but insert a Gemini Key
  4. Right click folder and Open in Terminal
  5. Enter "npm install"
  6. After it finishes downloading, enter "npm run dev"
  7. Finally, access the website at: http://localhost:3000/

Built With

Share this project:

Updates