🏛️ Architecture & Systems Deep Dive

The IT Department website is far beyond a standard static Jekyll blog. It is a highly optimized, fully proprietary implementation of a Thick-Client Serverless Architecture designed to execute robust backend capabilities while operating on an absolute $0 cloud infrastructure budget.

We bypass standard server costs (such as renting VPS environments, AWS EC2, or Heroku instances) by exclusively leveraging:

  1. Native GitHub Pages (Free limitless static hosting).
  2. The End-User’s Web Browser (Offloading compute processing and memory directly to the student’s laptop/phone).
  3. Google Workspace Ecosystem (Using public Drive Folders and YouTube Playlists as a free “Headless Database”).

1. Google Drive as a Headless Lightweight CMS

Traditional educational portals handle document storage by uploading massive gigabytes of PDFs onto localized backend servers. Given GitHub Repositories enforce a strict generic 1GB size limit alongside stringent bandwidth locks, native hosting was impossible for an IT Department storing 6 semesters worth of textbooks and code files.

Instead, we transformed Google Drive into our database.

The Request Lifecycle:

  1. Faculty effortlessly upload a PDF directly to their respective IT Department Google Drive folder from their phones or laptops without technical assistance.
  2. Upon website load, the custom study-materials.js intercepts the interaction.
  3. The JavaScript executes a native fetch() against Google’s secure APIs locally, extracting the specific Folder ID mapped statically in our _data/site_config.yml pipeline.
  4. The system parses the raw JSON payload in real-time, strips .pdf or .docx extensions visually using Regex algorithms, maps generic file icons (Word vs PDF), and dynamically manipulates the DOM to render a structured, beautiful “YouTube-like” playlist interface entirely via the frontend client.

2. API Request Caching & Quota Defense (sessionStorage)

The primary danger of querying Google Cloud APIs natively from a client-side frontend is API Quota Exhaustion. If an entire classroom of 50 students rapidly swaps back and forth between the “Advanced Python” folder and the “System Architecture” folder, the site would trigger thousands of API hooks within seconds, immediately crashing the site via Google’s Rate Limiter security.

The Mitigation Protocol:

To safeguard the system, we injected localized sessionStorage memory intercepts inside study-materials.js.

// A conceptual mapping of the defensive logic deployed natively:
const cacheKey = `cache_${currentSemester}_${currentSubject}_${moduleName}`;
const cachedData = sessionStorage.getItem(cacheKey);

if (cachedData) {
    // Intercept successful: Immediate 0ms rendering from local device memory. 
    // ZERO network requests made to Google.
    this.allItems = JSON.parse(cachedData);
    this.displayItems();
} else {
    // Fetch newly required data from Google, map it, and securely store it into cacheKey for the next potential click.
    const freshData = await YouTubeHandler.fetchPlaylistVideos(playlistId);
    sessionStorage.setItem(cacheKey, JSON.stringify(freshData));
}

Impact Result: Repeated clicks by active users now execute flawlessly in exactly 0.0 seconds carrying absolutely $0.00 infrastructure cost locally.

3. “Zero-JS” Structural Handoff Process

Because legacy repository maintenance will frequently transition outward to first or second-year diploma students who might lack Javascript ecosystem experience, we enacted a strict Zero-JS handover protocol. We physically isolated volatile backend Javascript logic from general Structural logic.

We successfully decoupled all operational configurations, arrays, and IDs natively moving them exclusively inside Jekyll’s pure-text Data environment (_data/). When Jekyll inherently executes its build sequence, it uses Liquid Tags to inject these purely mapped YAML/JSON entities securely onto the global Window state:

<!-- Inside the raw HTML head securely generated at compilation: -->
<script>
  window.CONFIG = {"API_KEY":"AIzaSyBd34cP4KHFKN0WyNNiqhlQ2HSM8j2tD_E","FOLDER_IDS":{"syllabusS2":"1qzlAm8Zi9RC11iwD2V2T0uU_8DMSlemE","newsletters":"14OT-O9JooQKzKxxL2bhLUUZkdB3MOSf8","faculty_development":"1yB9N4DKyGc3AL1EhGiPTgtpyPOlq8cvV","academic_calendar":"16a58BgCLN8h0SnGxjnYFGDdkfWqcuS49","certificates":"1vXU0cCwrYplFhmrGLu3MYuf1fVJeylWQ","gallery":"1vXU0cCwrYplFhmrGLu3MYuf1fVJeylWQ","pyq":{"sem_1":{"python":"1SPAJ_Azd-kVEc7l7rrerpmeQOeZJO2Xw","it":"1QvTM_Z80mrP7dTu9g9-dgGOdgtSzid-c","maths":"1xIFEVMpiB2wZvJL3KVRQKEdcecfUskLs","cse":"1O7ToNX0DIfhrB3K1ytSbPBxm8GhMNpqR","ech":"1JM5fS8mss8ViwNaO7sLpn4QF5btEX9WB"},"sem_2":{"Advance_python":"1SFSqASzR03MrKZ3neQFjxjBIhJVb6nUx","enginnering_maths_s2":"1TkyPmBgF9atrblZhIDwMcgKOB36FQTKN","Applied_maths_s2":"1P0h7Ol7a1et5I2E3hWuMb5nW1mKrpIFA","Modern_physics":"1KCKauTNQ8hyW-kj1sj-DPn1Zr9t_DpbC","enviromental_sustainability":"1_a51gVjCkEhuLYsXRjHHRqi1VTyEkvYH"},"sem_3":{"os":"1sWvegnzI20APrfIt07frmMX3ZXse4MLN","dbms":"1rKihco_dxwB9gB9xKAW96U8WaS9s8SX9","dsp":"1Epp-_61b6_bCZfW98MBAB0wNwHTBIC48","edm":"1viHPIpIpI_PswBzAyMMS8QUAsOF1p4Vh","oopj":"1zkn4Lq-lob58TDgSb0KwSkTBN3VffS_h"},"sem_4":{"csdf":"11KmApu8rlhekw9R9mapLsw7zAJPkjwtw","dmw":"1PBnsf6-UMIiYsEwALYWJ7_0xBbRfO2Ez","mcn":"1CAyBBW362FfhO0fBD_LwOi_GK4FJEK1b","fml":"1UONtiQfMBiJbO4QkZ2-ejmcDfohe8Vp-","es":"1k3GCTqT9CCSSkhvEUDsPzvunu2BjtEOd"}},"Notes":{"AIPD":"1qFeDy88uMM6thoNU9fy6xy4ohzO3bolMJeIFijF_mbU","Applied_maths":"1RI3gfrwmR-Muj8qujj2Wv_0mawZKDXxg","english":{"ES":"1ZxIE4Tjnsbl_VgnLY1b_4oy0dyjdzGWR","MPH":"1Cv82eCraCbeyBT_NVyMxDkOG2GB--E4G"},"gujarati":{"ES":"1PQ-HRdCURvnMYp274nppNjBvPGoMQSYf","MPH":"1w8mJkjdhw7lHJ_qxzMeuPGpRvWFL5QdL"}}},"yr_2024_2025":{"sem3":{"syllabus":"1Izl-nki7BKIvRyFJ_efTL18CiVKEzvyV"}},"yr_2025_2026":{"sem4":{"syllabus":"1nUND77k1CXaZNv6yjDTX8PSW3-3I3iCB"},"sem5":{"syllabus":"1L57gHa0FyEQBNjZ8aoU0KnL6MX9R1Rav","AIPD":"1tPzQopeOLOV7VF0_Y7ZLtGN4w95Tbrsu"}},"PLAYLIST_IDS":{"python":"PL5hA7O8RI2bPOSoX7l8zZIIuDQrc9b9wO","advPython":"PL5hA7O8RI2bMd6FrVKDz-VhKXNVezg_Ly","it":"PLZ3xYAWT5a-nskfWOvHd_Fvh4RZsedu7G","networking":"PL5hA7O8RI2bMBGjSduDQRYUCrNViAEee1","enginnering_maths":"PLs6nv4Vuoj-szyhRqc8PcTFTdFzDIJrfj","gtu_maths_2":"PLLfoR5ZJ0A_4ushGMb__Kvsk3ffqlrIr3","FSD":"PLWPirh4EWFpG2b1L3CL-OAPYcM25jLjXH","digital_markteting":"PL5hA7O8RI2bMH9S_-KbY7K-73hlrAyTHF","object_oriented_programming_java":"PLWKjhJtqVAbnklGh3XzZ4E8Jw9P9K2A1D","fundamentals_of_machine_learning":"PLWKjhJtqVAbm3m1QXg7EoSxKXWwRg8Zpq","web_development_php":"PLWKjhJtqVAbmGQoa6lN6a1xNq7kjP9B2h","foundation_ai_ml":"PLWKjhJtqVAbm3m1QXg7EoSxKXWwRg8Zpq","mobile_computing_networks":"PLWKjhJtqVAbnupwRFOq9zGOWjdvPRtCmO","advanced_java_programming":"PLWKjhJtqVAbnklGh3XzZ4E8Jw9P9K2A1D","mobile_application_development":"PLWKjhJtqVAbk3cFkeP2lQ6K6J9Z1nVU2q","cyber_security_digital_forensics":"PLWKjhJtqVAbm3m1QXg7EoSxKXWwRg8Zpq","software_development":"PLWKjhJtqVAbm7h1x3g8Yt7k7pXT3a7V7h","ui_ux":"PL5hA7O8RI2bPfFNLPitu1fZPI9J0y7Yqa"}};
</script>

Maintainers now simply edit highly readable English YAML text, permanently preventing fatal syntactical compilation bugs inherently common in JS matrices.

4. Componentizing The DOM Blast Radius

Attempting to manage 400+ lines of HTML markup rawly inside index.html causes severe Git conflicts and formatting bleeds if an unclosed </div> tag slips through. We systematically abstracted the core system out naturally isolating code into _includes/:

The website’s landing environments can now be expanded, duplicated, copied, or modified securely block by isolated block without ever risking the destruction of other parent divs.

5. Domain SEO Indexing Matrix

To organically and aggressively capture Google traffic specifically targeting the literal queries “ITGPG” or “Government Polytechnic Gandhinagar IT Department”, a hardcoded indexing matrix runs natively via Jekyll.

Instead of writing static <title> strings natively over 16+ pages, the master _layouts/default.html template aggressively strips generic formatting and strictly appends | ITGPG across the entire directory loop. Furthermore:

  1. Front-Matter Override: Each subpage locally defines massive long-tail search clusters via highly structured description tags inside their YAML block (e.g., mapping exactly to Scopus-indexed research publications).
  2. Algorithmic Association: By combining targeted <meta> tags and identically structuring the <title> output across the domain, the Google Crawler bots mathematically associate the acronym “ITGPG” deeply into the entire structure rather than just looking at the index.html.
  3. Structured Context Mapping: We utilize the native jekyll-seo-tag gem directly hooked to _config.yml configuration fields to silently compile raw JSON-LD EducationalOrganization schemas. This data sits invisibly inside the <head> to bypass crawler confusion natively.