How I Built an Ultra-Fast, Programmatic Results & GPA Portal for My University (MUET)

#education #opensource #showdev #webdev

At Mehran University of Engineering and Technology (MUET), Jamshoro, results are traditionally announced via large, static PDF tables. But the main issue is:

Every semester, the same story.

Need to check your result? Open your laptop.
Connect to the university network... or set up a VPN.
Want to know your actual class or batch rank? Good luck guessing.

That frustration became my latest project.

To solve this, I set out to build the MUET Results Portal (https://muetresults.vercel.app)—an independent, open-source lookup engine and administrative compiler that provides students with instant semester results, CGPA calculations, batch standings, and interactive academic calendars.

Here is an engineering deep-dive into how I built it using a serverless GitOps pipeline, vanilla JavaScript SPA, and Gemini AI.

🛠️ The Architecture & Data Pipeline

To keep the platform hosting costs at absolute zero while maintaining lighting-fast page loads, I designed a pre-rendered static pipeline. Rather than querying a database at runtime, all student data is compiled statically.

Here is the GitOps workflow:

Official PDF Release: The Mehran University Examination Department publishes a new results PDF.
LLM OCR Parsing: Via a secure administrative panel (/mokshadmin), I upload the scanned PDF/image. A serverless backend function streams the document to the Google Gemini 1.5 Flash API, which returns structured JSON student records.
Git Database Update: The approved JSON records are committed back to the repository's git-tracked database (muet_student_gpa_dataset.csv) using the GitHub REST API.
CI/CD Pre-rendering Build: The new commit triggers a Vercel build hook. Node compilation scripts read the CSV database and:
- Group records and compile them into static runtime JSON structures.
- Pre-render complete static HTML folder structures for all batch rankings and departments.
- Regenerate SEO sitemaps (sitemap.xml).
Instant Deployment: Vercel serves the pre-rendered static files instantly to clients worldwide.

💻 Tech Stack Decisions: Why Vanilla JS?

For the student lookup portal, I avoided heavy frameworks like React, Next.js, or Angular. Instead, I chose Vanilla HTML5, CSS3, and ES6+ JavaScript modules.

The Benefits:

Largest Contentful Paint (LCP): < 0.6s. The page loads and displays instantly on slow mobile networks.
Cumulative Layout Shift (CLS): 0. Layout container sizes are predefined, resulting in zero jumps as rankings render.
Zero Hydration Mismatch: In standard SPAs, crawlers read empty root divs before JavaScript mounts. By pre-rendering the static HTML shells of all program lists and rankings (e.g., /ranking/23CS) at compile time, search engine bots read the completed tables instantly—even with JavaScript disabled.

📈 Search Optimization (SEO) & AI Search Citation

To ensure the portal became the #1 resource for MUET searches, I optimized it for generative AI answer engines (Generative Engine Optimization - GEO) and traditional search:

Structured Schema Graphs: I integrated dynamic JSON-LD schemas in the head of each view:
- HowTo Schema on the GPA Calculator to capture step-by-step calculation lookups.
- Dataset Schema on batch rankings so search engine bots index student lists as structural datasets.
- FAQPage Schema on the Academic Calendar to display rich expandable FAQs directly in search results.
Index Protection: Blocked programmatic student lookups (/result/*) in robots.txt and sent X-Robots-Tag: noindex headers, preventing index bloat while focusing crawl budget on high-value tools.

💡 What I Learned

Building this portal taught me the value of solving real-world local problems. By focusing on performance constraints, clean semantic code, and automated AI data extraction, I was able to build a tool that helps thousands of students on campus.