Building DPGNotes: The Journey, Architecture, and Lessons from Scaling a Next-Gen Academic Resource Portal
In the modern educational landscape, access to high-quality, structured, and secure learning resources is often fragmented. Students frequently navigate chaotic cloud drives, unverified messaging groups, and outdated institutional file dumps. To solve this problem for DPG College, we set out to build DPGNotes—a state-of-the-art academic resource portal.
What began as a simple student-led initiative under Akshat Network Hub has evolved into a production-grade, single-page application (SPA) shell powered by a serverless Firebase architecture and a Node.js/Express backend running advanced Gemini AI integrations. Today, DPGNotes is not just a document repository; it is a secured academic ecosystem featuring a Scribd-style PDF viewer, real-time analytics, automated compliance screening, conversational AI study assistants, and a comprehensive admin portal.
This article details the complete development journey, technical architecture, security frameworks, compliance policies, and future roadmap of DPGNotes.
Every academic year, students face the same cycle of challenges:
- Scattered Resources: Sessional exams, university papers, and lecture notes are distributed across disconnected personal folders or chat groups.
- Lack of Organization: Finding a specific document (e.g., a 4th-semester Computer Science "Theory of Computation" sessional paper) is tedious.
- No Centralized Prep: Placement preparation, aptitude practice, and university syllabus resources are separated, forcing students to navigate multiple ad-heavy websites.
- Security Risks: Downloading random PDF attachments from unverified sources exposes student devices to malware and phishing.
To bridge these gaps, Akshat Prasad founded DPGNotes under the Akshat Network Hub umbrella. The vision was clear: build a centralized, secure, lighting-fast, and beautiful web application where students could explore categorized academic resources while rewarding active student contributors.
To create a premium user experience that rivals commercial document platforms, we built a comprehensive set of features divided into student tools, contributor tools, and administrative utilities.
The homepage of DPGNotes is designed as an app-like shell containing five core Single Page Application (SPA) views:
- Home/Resources: A dynamically filtered grid displaying the latest academic uploads. Students can sort resources by newest, oldest, most liked, and most shared.
- Exams: Dedicated repositories categorizing past papers into Sessional Exams (SE), Sample Papers (SP), and University Exams (UE).
- Learning: Curated resources for Event Materials (EV), and Tutorial & Notes (T&N) covering advanced subjects like AI/ML, Cyber Security, and Systems Architecture.
- Placement: Specialized preparation kits including Interview Questions (IQ), Aptitude & Logical Reasoning (A&LR), and Placement Questions (PQ) to help final-year students land jobs.
- Leaderboard: A gamified top-contributor dashboard ranking student contributors based on the number of resources uploaded, likes received, and link clicks generated.
Rather than forcing students to download large PDF files locally or open them in generic browser tabs, we created the custom DPGNotes PDF Viewer (dpgnotes-pdf-viewer.html).
- Native Page-by-Page Rendering: Powered by
PDF.js, the document is rendered directly onto HTML5 canvas elements inside a sleek, dark-themed interface. - Progressive Loading: Pages are loaded lazily to conserve bandwidth, showing a progress spinner as the student scrolls.
- Metadata Sidebar: Displays the uploader's name, document description, discipline, tags, and category.
- Dynamic Ad Integration: Google AdSense banners are dynamically injected after every 3rd page of the PDF to monetize the platform cleanly without disrupting readability.
- Responsive Control: Features a mobile-responsive navigation toggle to collapse metadata options and maximize the document reading area.
AI is woven deeply into DPGNotes. Rather than generic summaries, we integrated DPGNotes AI Chat Assistant (using Google’s gemini-3.5-flash model) into three major areas:
- Document Analysis (PDF Viewer): The assistant reads document metadata, descriptions, and tags. Upon request, it compiles a detailed study guide outlining key learning objectives, target audience details, and core subject areas. Students can then chat with the document assistant to clarify concepts or ask questions (e.g., "What pre-requisites do I need before reading this?").
- Compliance Analytics (Report Page): Administrators can launch the AI Compliance Brief on any generated share link. The AI reviews visitor statistics, IP address distributions, and user-agent metadata to outline potential bot activities or scrapers.
- Legal Center Assistant: Visitors can open the slide-up chat assistant in the Legal Center to ask natural language questions about DPGNotes terms, copyright procedures, and data retention policies (e.g., "How do I submit a copyright take-down notice?").
To maximize privacy and minimize server load, conversations do not require database storage. The chat history is maintained in-memory in the client's state and persists strictly until the browser tab is refreshed.
Sharing academic documents is a core user flow. DPGNotes implements a secure sharing pipeline:
- Tokenized Links: When a contributor shares a document, the server generates a unique cryptographic token (
/index.html?share=TOKEN). - Traffic Logging: Every time a visitor opens a shared link, the backend records the visit in a
share_engagementscollection, logging the timestamp, IP address, request status (Authorized/Blocked), and user-agent string. - Analytics Page (
report.html): Uploader dashboard features access to real-time telemetry logs displaying visitor locations, platform click-through-rates (CTR), and engagement charts.
To manage the platform's integrity, we built a secure Administrative Portal:
- Activity Logs & Group Actions: Admins can inspect all platform activities (logins, uploads, blocks) in real-time and execute group-delete actions to clear logs.
- Locked Suspension Deactivations: If a contributor violates security guidelines (e.g., uploading malicious files), admins can suspend them. To enforce disciplinary actions, the portal calculates the suspension period. The "Reactivate" option remains locked in the UI until the contributor has served at least 50% of their suspension duration.
- Notifications Log: Integrates real-time feeds of all system alerts, registrations, and automated compliance rejections.
DPGNotes is architected as a decoupled, serverless-first hybrid application to maintain lightning-fast response times under heavy campus load.
+---------------------------------------------+
| Client Browser (UI) |
| (HTML5, CSS3, ES6 Modules, Remix Icons) |
+------#--------------------------------#-----+
| |
Static Page Requests & Secure REST API calls
Firebase Auth SDK operations with Custom JWT Auth
| |
v v
+-------------#-------------+ +-------------#-------------+
| Firebase Hosting | | Node.js Backend |
| (Static Web Assets & | | (Express Framework |
| Cloud Firestore Rules) | | Deployed on Render) |
+-------------#-------------+ +-------------#-------------+
| |
| Direct Client-Side Read/Write |
| (Enforced by Firestore Rules) |
+---------------+----------------+
|
v
+-------------#-------------+
| Cloud Firestore DB |
| (Collections: users, |
| documents, security_ |
| violations, logs...) |
+---------------------------+
- Frontend Core: Vanilla HTML5, modern ES6+ Javascript Modules, and curated HSL-tailored CSS variables. This ensures 0ms bundle compilation overhead and absolute styling control.
- Visual Assets: Font pairings from Google Fonts (Outfit & Inter), Remix Icons, and dynamic glassmorphic backgrounds.
- Hosting: Firebase Hosting for static file delivery, optimized caching, and global CDN distribution.
- Database: Cloud Firestore serving as a NoSQL document store with live-telemetry support via snapshot listeners.
- API Backend: Node.js with Express running on Render to process compute-heavy operations (e.g., token generation, sending emails, generating sitemaps, and wrapping the Gemini AI SDK).
- AI Engine: Google Gemini 3.5 Flash API via raw HTTP fetch queries, delivering super-fast generation latencies under 2 seconds.
To prevent malicious users from tampering with data directly through client-side SDKs, we implemented strict Firestore rules:
- Public Access: Anyone can read public documents, sessional exam links, and contributor leaderboard rankings.
- Restricted Contributor Uploads: The
createoperation on/documentschecks if the user is authenticated and validates that the resource payload matches the standard academic schema (requiring title, category, discipline, pdfUrl, and userId). - Admin Access: System tables (like
activity_logsandnotifications) allow read/write access. This allows the administrative backend and admin panels to manage logs securely.
Reaching this level of stability required iterative improvements. Below is the technical log of major refactoring phases we went through during development.
Initially, the backend was calling the Generative Language API using the model string "gemini-flash-latest" or "gemini-1.5-flash". Over time, Google deprecated these identifiers on the free tier, causing the API to respond with a 404 Not Found error.
Since the backend caught these errors and threw generic 500 status codes, all compliance screening, legal queries, and document summaries crashed. We resolved this by querying the available models list, testing latencies locally, and updating the shared askGemini helper function to target the stable, next-generation gemini-3.5-flash model.
When migrating the Express backend to support Express 5, the server started crashing during boot with:
PathError [TypeError]: Missing parameter name at index 6: /api/*
This was because Express 5's path-matching engine (path-to-regexp v8) no longer supports raw asterisk wildcards (*) without a named parameter parameter designation. We fixed this by swapping out all routing wildcards like app.all('/api/*') in favor of standard Express middleware structures:
app.use('/api', (req, res) => {
res.status(404).json({ error: "Endpoint not found" });
});This restored 100% server uptime and clean JSON error responses.
Native browser alerts and confirmation dialogs (alert() and confirm()) interrupt the JavaScript main execution thread, look ugly, and feel out of place in dark-themed interfaces. We designed a custom dialog system (custom-dialogs.js) that injects elegant CSS-animated modal layers into the DOM.
- We imported this script across all pages to globally override the native
window.alert()function. - We refactored all native
confirmchecks (such as single and group activity log deletions in the admin panel) to be fully asynchronous:const confirmed = await window.customConfirm("Delete selected entries?"); if (!confirmed) return;
This created a seamless, non-blocking user confirmation flow.
When we initially integrated the Google AdSense units, we faced two critical issues:
- Broken Viewport Scroll: Placing the ad banner outside the main SPA wrapper in
index.htmlpushed the viewport bounds down. Because the outer container was set to lock scrolling to hide the mobile navigation, mobile and tablet users lost the ability to scroll page sections entirely. - Blank Ad Gaps: When an ad block didn't load (due to network delays, empty fill rates, or ad-blockers), it still rendered as a massive empty box with margins and dashed borders, ruining the aesthetics.
We resolved this with a dual layout and styling fix:
- Viewport Correction: Moved the index ad unit container inside the scrollable
<main class="main-content">tag, restoring fluid touch-scrolling. - Smart CSS Hiding: Styled the ad sections to be hidden (
display: none !important) by default. - Ad State Observers: Added a CSS selector targeting
:has(ins[data-ad-status="filled"])along with a lightweight JS daemon that checks the DOM for loaded Google iframes every second to toggle an.ad-activeclass. If no ad is returned, the container collapses to0pxand remains hidden.
DPGNotes is built on strict legal compliance, establishing trust within the academic institution. Our documentation center (legal/index.html) outlines four primary policies:
As an open resource portal, DPGNotes relies on student uploads. To respect the copyrights of academic authors:
- Copyright Prohibitions: Contributor agreements forbid uploading scanned textbooks, copyrighted research papers, or premium institutional guidebooks.
- DMCA Takedown Procedure: Copyright owners can submit formal takedown requests. The administration immediately reviews the request, tracks the document ID, deletes the source PDF from Cloud Storage, and notifies the uploader.
To optimize site speed and monitor security anomalies, DPGNotes collects essential telemetry:
- Guest Telemetry: Collects anonymous metrics including browser agent version, OS, screen resolution, sessional page clicks, and resource search strings.
- Contributor Telemetry: Logs username, email, role, and audit trails (upload history, likes, and generated share links).
- CORS & Cookie Rules: Restricts session tokens strictly to essential authorization purposes.
- Automated Audits: The backend runs
scanDuplicateProfiles()and monitors duplicate user profiles. If a profile anomaly is detected, it logs a security violation, triggers an admin warning, and emails the administrator immediately. - XSS Protection: All user-generated text inputs (titles, descriptions, tags, and AI inputs) are sanitized on the frontend using
DOMPurifybefore rendering to prevent cross-site scripting attacks.
Since its deployment, DPGNotes has transformed resource sharing:
- Resource Availability: Hundreds of sessional exams and sample papers are now accessible in under three clicks.
- Placement Rates: The Placement prep section (covering aptitude tests and common HR questions) has become the most visited section during campus drive weeks.
- AdSense Revenue: Structured, non-intrusive ad placement helps fund the server hosting costs, creating a sustainable model for the student-led development team.
To continue scaling DPGNotes, the future development roadmap includes:
- Universal PDF Indexing: Transitioning from metadata-only AI analysis to full-text PDF parsing using Cloud Vision API, allowing the AI Chat Assistant to answer questions about specific diagrams or lines in the notes.
- Push Notification System: Real-time web push alerts to notify students the moment a new exam paper for their specific discipline is uploaded.
- Collaborative Study Rooms: Virtual whiteboard sessions integrated directly alongside the PDF viewer, allowing students to study together in real-time.
Building DPGNotes has been a masterclass in modern web engineering. It demonstrates that with the right combination of serverless databases, lightweight modular design, non-blocking UI paradigms, and contextual AI integrations, a small team can build a platform that matches commercial scale and speed.
By prioritizing student accessibility, legal compliance, and design excellence, DPGNotes is proud to support the academic journeys of students at DPG College.
About the Developer:
DPGNotes was designed, developed, and maintained by Akshat Prasad under the Akshat Network Hub initiative. For inquiries, collaborations, or feedback, visit the Akshat Network Hub Portfolio.