DEV Community

Stitiprangya Das
Stitiprangya Das

Posted on

Campus Hub

#devchallenge #weekendchallenge #hf26challenge

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

🎓 CampusHub – The All-in-One College Life OS

Built with love for college students who are tired of juggling 7 different apps, messy WhatsApp groups, and blurry PDF schedules just to survive the semester.

💡 What I Built

Who is it for?

I built CampusHub for my friend and college roommate, Alex. Like thousands of engineering and university students, Alex was perpetually overwhelmed every semester:

  1. The Attendance Anxiety: Our university strictly enforces a 75% minimum attendance rule to sit for midterms and final exams. Alex was constantly guessing: "Can I skip tomorrow morning's 8:00 AM lecture? If I miss it, will I get debarred? How many classes do I have to attend in a row to get back in the safe zone?"
  2. Scattered Deadlines: Homework was on Moodle, lab reports were on Google Classroom, and project milestones were pinned in noisy Discord channels. Deadlines crept up out of nowhere.
  3. The CGPA Guesswork: Alex wanted to graduate with honors (target >8.5 CGPA) but had no clear idea what SGPA was needed this semester across 6 different courses with varying credits.
  4. Campus Chaos: Daily canteen menus were trapped in blurry phone photos taken from the dining hall whiteboard, emergency contact numbers for the hostel warden and health center were lost in email threads, and daily pocket money was slipping away uncounted.

What Problem Does CampusHub Solve?

CampusHub is a clean, private, offline-first personal workspace where students can keep their entire day-to-day college life in one unified, glassmorphic dashboard:

  • 🎯 Attendance & Safe Bunk Meter: Calculates exact attendance percentages per subject and runs a real-time mathematical advisory:
    • If above target: "🌴 Safe zone: You can safely skip 3 more classes without dropping below 75%."
    • If below target: "⚠️ Warning: Must attend the next 4 classes consecutively to reach 75%."
  • 📅 Weekly Class Timetable: Monday to Saturday interactive schedule with course codes, room/lab numbers, professors, and 1-click attendance logging.
  • ✅ Assignments & Tasks Tracker: Auto-calculating countdown badges ("Due in 4 hours", "Due tomorrow", "🚨 Overdue"), priority badges, and course tags.
  • 🧮 GPA & Cumulative CGPA Estimator: Course credits & letter grades table with instant SGPA calculation and a Target Graduation CGPA Planner.
  • 📝 Study Vault & Campus Links: Quick notes, formula cheat sheets, Wi-Fi proxy configs, and one-click direct links to institute portals (LMS, Library, ERP, Placement).
  • 💰 Student Pocket Budget: Tracks monthly allowance, categorization (Canteen, Printouts, Stationery, Travel), and visual consumption meter.
  • 🍔 Daily Canteen Menu & Emergency Directory: Daily meal schedule (Breakfast, Lunch, Snacks, Dinner) with Veg/Non-Veg indicators and prices, plus 1-click dial/copy emergency helplines (Security, Ambulance, Anti-Ragging, Warden).
  • 🔒 Privacy First & Zero Bloat: 100% client-side, zero trackers, persistent in localStorage, and includes 1-click JSON backup export/import.

🖥️ Demo

  • Local Preview: open [https://stiti2006.github.io/campus-hub/#dashboard]
  • Zero-Build Static Access: Simply open index.html in any modern web browser!
  • Interactive Features: Press Ctrl + K (or Cmd + K) anywhere to launch the global Command Search Palette.

Key Screenshots & Aesthetics 

+---------------------------------------------------------------------------------------+
|  🎓 CampusHub                       [ Live Campus Time: Mon, Oct 4 • 06:40 PM ]  🌙   |
+---------------------------------------------------------------------------------------+
|  [Dashboard]      Good Evening, Alex! 👋                                              |
|  [Timetable]      4 Classes Scheduled Today • 4 Pending Tasks • 83% Overall Attendance|
|  [Attendance]                                                                         |
|  [Assignments]    +-----------------------------+  +-------------------------------+  |
|  [GPA & CGPA]     | Today's Schedule            |  | Attendance Watchlist          |  |
|  [Study Vault]    | • 09:00 - Data Structures   |  | • OS (CS202): 73% [1 needed]  |  |
|  [Pocket Budget]  | • 10:15 - Operating Systems |  | • Math (MA201): 69% [4 needed]|  |
|  [Canteen Menu]   +-----------------------------+  +-------------------------------+  |
+---------------------------------------------------------------------------------------+
Enter fullscreen mode Exit fullscreen mode

Code

GitHub logo Stiti2006 / campus-hub

🎓 CampusHub – Student Utility App

The modern all-in-one personal workspace for university students. Keep your weekly timetable, attendance thresholds, assignment deadlines, GPA calculations, campus notes, pocket budget, and canteen menus in one synchronized place.

CampusHub Banner

✨ Features Overview

1. 📊 Interactive Dashboard

  • Dynamic Greeting & Time: Displays student greeting, active term week, and real-time campus clock.
  • Key Metrics: Real-time summary cards for Today's Classes, Pending Tasks, Overall Attendance %, and Projected CGPA.
  • Today's Class Schedule: Chronological timeline showing ongoing/upcoming classes, locations, and professors.
  • Attendance Watchlist: Visual alert bars highlighting subjects near or under your required threshold.
  • Quick Desk Memo: Auto-saved sticky notes widget for sudden reminders or classroom codes.

2. 📅 Weekly Timetable

  • Day-by-Day Schedule (Monday – Saturday): Categorized view of lectures, lab workshops, tutorials, and club sessions.
  • Add / Remove Class Slots: Full modal form to add course code, name, time, room, instructor, and session type.
  • 1-Click Attendance Sync:…
View on GitHub

🔗 GitHub Repository: https://github.com/Stiti2006/campus-hub

The entire codebase is open-source under the MIT license and built with semantic, modular web standards:

  • Repository Structure:
    • index.html — Accessible HTML5 structure, responsive layout containers, and native <dialog> modals with backdrop blur.
    • css/style.css — Custom CSS3 design tokens, dark & light themes, glassmorphism (backdrop-filter), CSS Grid, and fluid animations. Zero heavy CSS frameworks.
    • js/data.js — Realistic, relatable student dataset (courses, schedules, menus, contacts) initialized automatically.
    • js/app.js — Reactive UI state machine, attendance math engine, SGPA/CGPA algorithms, dynamic time calculations, and localStorage synchronization.
    • README.md — Detailed setup, feature documentation, and shortcuts.

🛠️ How I Built It

  1. Architecture & Philosophy:
    I deliberately chose a zero-build, zero-dependency vanilla architecture (Vanilla HTML5, modern CSS3, and ES6 JavaScript). For a student utility, speed, battery efficiency, and offline resilience are paramount. There are no node_modules to install, no bundlers that break, and no complex servers to maintain.

  2. The Attendance Bunk Algorithm:
    The heart of the app is the bunk advisory engine:
    $$\text{Safe Bunks} = \left\lfloor \frac{\text{Attended} - (\text{Target} \times \text{Total})}{\text{Target}} \right\rfloor$$
    $$\text{Classes Needed} = \left\lceil \frac{(\text{Target} \times \text{Total}) - \text{Attended}}{1 - \text{Target}} \right\rceil$$
    This updates immediately whenever the student toggles the target slider or clicks +1 Present / +1 Absent.

  3. AI Pair Programming & Workflow:
    I built this project utilizing the Antigravity IDE agentic workflow. The agent helped scaffold the data structures, optimize the modern CSS glassmorphic tokens, implement keyboard navigation (Ctrl+K), and generate cohesive 3D isometric student visual assets.

🌍 Why Does Open Innovation Matter?

Open innovation is transformative for education and student tools:

  1. Accessibility for Every Student: University students often use budget hardware, older laptops, or low-bandwidth campus Wi-Fi. Closed commercial apps frequently demand expensive recurring subscriptions, gatekeep features behind paywalls, or sell student habits to ad brokers.
  2. Local Sovereignty & Privacy: By using open-source web technologies and local browser storage, students maintain 100% custody of their academic records, personal notes, and financial budget. No central server can go down before an 8:00 AM exam.
  3. Extensibility & Community Collaboration: Open innovation means any student club, department, or university can clone this repo, customize the courses and canteen menus for their own college, and share it with their peers freely.

🤖 My Agent Session

This application was created through an interactive pair-programming session in Antigravity IDE:

  • Design Decisions: Chose vanilla CSS design tokens over Tailwind to keep the codebase dependency-free and easy to customize for any student.
  • Mathematical Modeling: Implemented and validated real-time attendance margin calculations and CGPA projections.
  • Session Artifacts: All prompt trajectories, asset generations, and code revisions were tracked locally in the Antigravity conversation log.

🏆 Prize Categories

  • Hacktoberfest Weekend Challenge: Build for a Friend (Built for my roommate Alex to conquer college semester chaos)
  • Best Student Utility / Developer Productivity Tool

Made with 💜 during Hacktoberfest 2026.

Top comments (0)