DEV Community

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

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 lightning-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:

  1. Official PDF Release: The Mehran University Examination Department publishes a new results PDF.
  2. 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.
  3. 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.
  4. 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).
  5. 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.

Read on DEV Community ↗ ← Back to News

Comments

No comments yet. Start the discussion.