{"slug": "i-built-a-what-do-i-need-on-my-final-calculator-with-ai-auto-fill-next-js-16", "title": "I built a \"what do I need on my final\" calculator with AI auto-fill (Next.js 16 + Gemini)", "summary": "A developer built GradeHQ, a final grade calculator using Next.js 16 and Gemini AI auto-fill. The tool lets students input weighted course categories and scores, then solves for the required final exam score to achieve a target letter grade. It also supports uploading syllabus PDFs or grade screenshots for automatic extraction of categories, weights, and scores via Gemini 2.5 Flash, with all data stored locally in the browser.", "body_md": "Every finals season I'd end up doing the same algebra on a notes app: \"I have a 91% in homework (20%), 84% on the midterm (30%)... what do I need on the final (50%) to get an A-?\" So I built GradeHQ to do it for me — and then kept adding to it until it became a real side project.\n\nLive: gradehq.vercel.app\n\nCode: github.com/yashmitb/gradecalc (MIT)\n\nWhat it does\n\nAdd your courses with weighted categories (homework, midterms, final, etc.)\n\nEnter scores as you get them back\n\nPick a target letter grade and it solves for exactly what you need on whatever's left\n\nOptional AI auto-fill: drop in a syllabus PDF and/or a screenshot (or PDF) of your Canvas grades, and it extracts your categories, weights, and scores for you\n\nEverything is local-first — courses are stored in localStorage, nothing's saved server-side except the file you choose to auto-fill, which is sent once to Gemini and discarded.\n\nStack\n\nNext.js 16 (App Router, Turbopack)\n\nTypeScript\n\nTailwind v4\n\nFramer Motion for the animations/transitions\n\nGemini 2.5 Flash for the auto-fill parsing\n\nNo backend database — just one API route (/api/parse) that proxies to Gemini\n\nThe auto-fill flow\n\nThis was the fun part. The /api/parse route takes the uploaded files (PDF/PNG/JPG, up to 4), sends them to Gemini with a prompt asking it to extract { name, categories: [{ name, weight, score }], flags: [] }.\n\nA few things I had to handle:\n\nUncertain extractions shouldn't be silently guessed. If Gemini can't confidently read a score or weight, it returns a flags array explaining what it left blank and why. The UI shows these to the user before importing, so they can fill them in themselves instead of getting a wrong number with no explanation.\n\nShared vs. personal API keys. The app ships with an optional shared/free Gemini key (server-side env var) so most users don't need to do any setup. If that key hits its daily quota, the API returns a server-busy code and the UI lets the user paste their own free key inline to retry — saved only in their browser.\n\nMaking a 10-20 second wait feel okay. Gemini calls on multi-page PDFs can take a while. Instead of a static \"Loading...\", the extract button cycles through short status messages (\"Reading files…\", \"Scanning syllabus…\", \"Matching scores…\", etc.) every ~1.3s, tailored to whether you uploaded a PDF, an image, or both. \"Almost done…\" only shows up after the cycle has looped through twice — so it doesn't lie to you on a request that just started.\n\nWhat's next\n\nMore grading scale presets (currently a standard A+ through F scale)\n\nBetter handling of edge cases in syllabus formats\n\nProbably a dark/light theme toggle since right now it's dark-only\n\nRepo's open source and PRs are welcome — especially around the parsing prompt, since LMS export formats vary a ton between schools. Feedback appreciated!", "url": "https://wpnews.pro/news/i-built-a-what-do-i-need-on-my-final-calculator-with-ai-auto-fill-next-js-16", "canonical_source": "https://dev.to/yashmitb/i-built-a-what-do-i-need-on-my-final-calculator-with-ai-auto-fill-nextjs-16-gemini-899", "published_at": "2026-06-13 04:35:14+00:00", "updated_at": "2026-06-13 04:47:10.023162+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "generative-ai"], "entities": ["GradeHQ", "Next.js", "Gemini", "Gemini 2.5 Flash", "Vercel", "GitHub", "TypeScript", "Tailwind"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-what-do-i-need-on-my-final-calculator-with-ai-auto-fill-next-js-16", "markdown": "https://wpnews.pro/news/i-built-a-what-do-i-need-on-my-final-calculator-with-ai-auto-fill-next-js-16.md", "text": "https://wpnews.pro/news/i-built-a-what-do-i-need-on-my-final-calculator-with-ai-auto-fill-next-js-16.txt", "jsonld": "https://wpnews.pro/news/i-built-a-what-do-i-need-on-my-final-calculator-with-ai-auto-fill-next-js-16.jsonld"}}