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

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



Tópico: How I Built an Ultra-Fast, Programmatic Results & GPA Portal for My University (MUET)
Categoria: Tutoriais | Programação & Tecnologia
Idioma Principal: Português (Conteúdo de Tecnologia)

Descrição do Conteúdo / Informações:
-------------------------------------------------------------------------
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.

•
Check out the live portal: https://muetresults.vercel.app

•
GitHub Repository: https://github.com/mokashkumar1/muet-results-portal (Feel free to star or contribute!)

•
LinkedIn: Connect with me at linkedin.com/in/mokashkumar/