A modern, real-time graduation countdown and event planner — built for the graduating class of 2026.
GC Countdown is a personal graduation countdown and milestone tracking app built for students approaching their graduation day. It provides a live, second-by-second countdown to June 20, 2026, tracks all key academic milestones, lets you manage your own custom events, and sends browser notifications when important dates are approaching.
The interface is built with a dark, premium glassmorphism aesthetic — featuring smooth animations, urgency-based color cues, real-time progress tracking, and a fully guided onboarding tour.
- Real-time days / hours / minutes / seconds countdown to graduation day
- Color urgency system — green → yellow → red as the date approaches
- Motivational message that rotates daily
Predefined system events covering the full academic endgame:
| Event | Date(s) |
|---|---|
| Exit Exam Model | Apr 17, 2026 |
| 5th Year CSE & SE Grad Defence | May 25 & 26, 2026 |
| Final Exams | May 11 – May 22, 2026 |
| Exit Exam | Jun 10 – Jun 17, 2026 |
| Graduation Day 🎓 | Jun 20, 2026 |
- Add your own personal events with title, start date, end date, start time, and end time
- Edit any custom event at any time via the kebab menu (⋮) on the card
- Delete events one by one or enter selection mode to bulk-delete multiple custom events at once
- Responsive UI: Custom events seamlessly adapt to small screens, showing up to three cards initially with "Show more / Show less" expansion buttons
- All custom events are persisted to
localStorage— they survive page refreshes
- Visual progress bar from the first milestone to graduation day
- Shows how far along the journey you are in real time
- Dynamically shows countdowns for events starting or ending today
- Displays hours/minutes/seconds remaining for precise scheduling
- Request native browser notification permission in one click
- Automatic alerts triggered at:
- 1 week before an event starts
- 1 day before an event starts
- The day an event starts
- While an event is ongoing (on app open)
- Each notification fires only once per condition per event (deduped via
localStorage)
- A step-by-step interactive tour for first-time visitors
- Highlights: Countdown, Events, Notifications, Custom Events sections
- Tour state is remembered across sessions
gccountdown/
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout, fonts, metadata
│ │ ├── page.tsx # Main application page & state
│ │ ├── globals.css # Global base styles
│ │ ├── exit-exam-model/ # Detail page: Exit Exam Model
│ │ └── milestone-info/ # Detail pages: system milestones
│ │
│ ├── components/
│ │ ├── EventCard.tsx # Event card with kebab menu (edit/delete)
│ │ ├── EditEventModal.tsx # Full edit modal for custom events
│ │ ├── ConfirmDeleteModal.tsx # Confirmation dialog for deletion
│ │ ├── CustomEventForm.tsx # Form to add new custom events
│ │ ├── CountdownCard.tsx # Live days/hours/minutes/seconds display
│ │ ├── ProgressCard.tsx # Journey progress bar
│ │ ├── TodayPanel.tsx # Today's event countdowns
│ │ ├── ToastMessage.tsx # Animated toast notifications
│ │ └── OnboardingTour.tsx # Interactive first-visit tour
│ │
│ ├── hooks/
│ │ └── useCountdown.ts # Tick-every-second countdown hook
│ │
│ └── lib/
│ ├── events.ts # All event logic, helpers & utilities
│ ├── storage.ts # localStorage load/save with validation
│ └── types.ts # Shared TypeScript types
│
├── public/ # Static assets
├── next.config.ts # Next.js configuration
├── tailwind.config / postcss # Styling configuration
└── tsconfig.json # TypeScript configuration
All state lives in page.tsx and is passed down via props — no external state library is needed given the scope. The key pieces of state are:
| State | Purpose |
|---|---|
customEvents |
User-created events, synced to localStorage on every change |
eventPendingDelete |
The event queued for deletion (opens confirm modal) |
eventPendingEdit |
The event queued for editing (opens edit modal) |
toastMessage |
Current toast text, auto-cleared after 2.2 seconds |
notificationPermission |
Browser notification permission status |
Custom events are stored as JSON in localStorage under the key graduation-custom-events. On load, data is validated field-by-field to prevent corrupt data from crashing the app (storage.ts).
Each notification is keyed by event-notification-{id}-{condition}. Once fired, the key is written to localStorage so the same notification never re-fires even if the user refreshes.
The getUrgencyTone() helper in events.ts maps days remaining to a color tone:
≥ 30 days → green (calm)
10–29 days → yellow (alert)
< 10 days → red (urgent)
All dates are parsed with parseLocalDate() which uses the Date constructor with explicit year/month/day to avoid UTC offset issues that arise from new Date("YYYY-MM-DD").
| Technology | Version | Role |
|---|---|---|
| Next.js | 16.2 | Framework (App Router) |
| React | 19 | UI library |
| TypeScript | 5 | Type safety |
| Tailwind CSS | 4 | Utility-first styling |
| Framer Motion | 12 | Animations & transitions |
| Space Grotesk | — | Primary typeface |
| JetBrains Mono | — | Monospace / code elements |
- Node.js 18.17 or newer
- npm (or yarn / pnpm / bun)
# 1. Clone the repository
git clone https://github.com/Abd453/gccountdown.git
cd gccountdown
# 2. Install dependencies
npm install
# 3. Start the development server
npm run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start local dev server with hot reload |
npm run build |
Build the production bundle |
npm run start |
Run the production build locally |
npm run lint |
Run ESLint across the project |
The easiest way to deploy GC Countdown is on Vercel — the platform built by the creators of Next.js.
# Install the Vercel CLI globally
npm install -g vercel
# Deploy from the project root
vercelOr connect your GitHub repository directly at vercel.com/new and Vercel will auto-detect the Next.js project and deploy on every push to main.
Contributions are welcome! To get started:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m "feat: add your feature" - Push to your fork:
git push origin feature/your-feature-name - Open a Pull Request against
main
Please keep components focused, reuse existing styles, and follow the TypeScript patterns already in place.
This project is open source and available under the MIT License.
Built with ❤️ by Abdallah Abdurazak
⭐ Star this repo if it helped you stay motivated through graduation!