AttendGuard

Can you skip tomorrow? AttendGuard tells college students exactly how many classes they can skip, or must attend in a row, to stay above the 75% attendance rule.

Comment

Inspiration

At Thapar Institute (and most Indian engineering colleges), you need 75% attendance in every subject or you can be barred from the end-semester exam. The college portal shows a number like 72.4%, but it never answers the question students actually ask every evening:

"Can I skip tomorrow's class?"

So we do the math in our heads, between classes, and we usually do it wrong, right when it matters most, just before exams. I wanted one honest number per subject instead of a percentage I have to decode.

What It Does

  • Visual Identity: AttendGuard looks like the thing every Indian student already knows—an attendance register with ruled paper, ballpoint-blue ink, and a rubber stamp on every subject.
  • One Stamped Verdict Per Subject:
  • SAFE: "You can skip 8 more classes."
  • ON THE LINE: "Don't skip. You're right at the line."

  • SHORT: "Attend the next 14 in a row to get back above the line."

  • Handwritten Counts & Skip Cells: The numbers look hand-marked in the register, and a row of boxes visually shows how many classes you can still miss (or must attend).

  • Instant Updates: Press Present or Absent after each class and the verdict re-stamps instantly. An Undo button fixes mistaken taps.

  • Semester Status: A clear directive tells you what to do next (e.g., "You're short in Engineering Maths III. Don't skip it: attend the next 14 classes.").

  • Customizable Rules: It defaults to a 75% requirement, but you can change it to 80% or 85% with one tap to match any college's rules.

  • Privacy & Offline First: No login, no server, and completely free. Everything is saved locally on your device and works offline.

  • Built for First-Time Users: It opens on a clearly labeled sample register with a 3-step guided tour (press Absent, Undo, then clear and add your own) so users understand how it works in seconds without typing anything.

How I Built It

  • Plan Before Code: Started from an empty folder using the Devpost Learn Skill Pack and an AI coding agent. Followed a strict plan-first workflow (1-start → 6-ship). The scope.md, prd.md, and spec.md were all approved before writing a single line of code.
  • Build in Slices: Developed in three thin, end-to-end slices. Each was tested and committed before moving to the next, starting with the core verdict logic.
  • Iterate on Real Feedback: Following the judges' Will It Ship session, I audited the app against the rubric, completed two additional review rounds, and logged all changes in checklist.md.
  • Integer Math: Used strictly integer-based math to eliminate floating-point errors. With H (classes held), A (classes attended), and a minimum requirement of R%:
  • Classes you can skip: floor((100 * A - R * H) / R)

  • Classes you must attend: ceil((R * H - 100 * A) / (100 - R))

  • Tech Stack: React 18, Vite, vanilla CSS, Vitest, and localStorage. Custom bundled fonts (Archivo, IBM Plex, Kalam) were used for the authentic register aesthetic. Hosted on GitHub Pages with automated testing and deployment.

Challenges I Ran Into

  • Mathematical Precision: "Close enough" is not acceptable for exam eligibility. I tested the formulas against the PRD's examples and ran a brute-force simulation for every case up to 60 classes across seven different requirement levels.
  • Avoiding the "AI Slop" Look: The first iteration had a generic dark neon theme. Realizing it lacked identity, I completely redesigned the UI around the physical attendance register metaphor.
  • First Impressions: Initially, users landed on an empty form. I added a pre-filled sample register and a guided tour so the product explains itself through interaction.
  • Data Integrity & Trust: The app blocks duplicate subjects, impossible attendance counts, and code-like inputs, showing field-specific errors. Results are responsibly framed as estimates based on user input.
  • Deployment Issues: GitHub Pages initially served an outdated build due to a settings mismatch. I debugged the action runner to ensure every push to main reliably auto-deploys.

Accomplishments That I'm Proud Of

  • Distilling a stressful calculation into one provably correct number, backed by 24 unit tests and 24 responsive browser checks across phone, tablet, and desktop sizes.
  • Creating a distinct visual identity with a real "fingerprint"—using stamps, ruled paper, and handwritten numbers powered by an Indian-designed font (Kalam).
  • Maintaining strict alignment between the planning documents and the final code; every feature traces directly back to a PRD heading, and every revision is documented.

What I Learned

  • Plan Before Prompting: Writing the scope first constrained the AI, preventing it from over-engineering unnecessary databases or login systems.
  • Test Against Expected Answers: Putting concrete examples directly in the PRD naturally translated into robust tests, verifying the math instead of hoping it was correct.
  • Design as a Product Feature: Features felt completely different and more intuitive once the visual language matched the real-world problem.
  • Feedback is a Feature: Treating the judges' notes as an objective review round and systematically acting on them significantly elevated the project in just two days.

What's Next for AttendGuard

  • Daily Planner: A "What if I skip today?" planner that forecasts across all subjects simultaneously.
  • Timetable Projections: Forecasting to show where attendance will stand by the end of the semester.
  • PWA Mobile App: An installable phone app with daily push notifications to mark attendance.
  • Social Sharing: Generating a shareable status card for class group chats.

Built With

Share this project:

Updates

Submission history