Birthdex | SST 🎂 : For SCALER Students

📖 Project Description

Birthdex is a modern, interactive dashboard designed to track and celebrate student birthdays at Scaler School of Technology (SST). It serves as a digital "Rolodex" for the student community, ensuring no birthday goes unnoticed. The application features a responsive "Mobile-First" design, real-time search, dynamic filtering, and data visualization.

---

❓ Problem Statement

In large student communities (1000+ students), it is difficult to keep track of birthdays. Static lists are boring and hard to search. Students often miss celebrating their peers because there is no centralized, engaging platform to view upcoming birthdays. Birthdex solves this by providing a searchable, sortable, and visual interface for student birth dates.

---

✨ Features Implemented

• Dynamic Student Grid: Automatically renders student cards from a JSON dataset.
• Smart Search & Filtering:
  • Real-time search (with debounce optimization) by Name or Roll Number.
  • Filters for "Today", "This Week", "This Month", and "All".
• Interactive UI Elements:
  • Flip Cards: Click any card to reveal "On This Day" historical trivia (fetched via API).
  • Theme Switcher: 4 distinct themes (Default, Hacker, Ocean, Mars) with localStorage persistence.
  • God Mode Cursor: Interactive background blobs and a "torchlight" hover effect that follows the mouse.
• Data Visualization: A "Stats & Insights" modal displaying a doughnut chart of birthdays by month (using Chart.js).
• Personalization:
  • Auto-calculated Zodiac Signs and Turning Age.
  • Dynamic avatars based on student initials.
• Mobile-First Responsiveness: Optimized layout for smartphones (stacked navigation, touch-friendly buttons).

---

🔧 DOM Concepts Used

This project relies heavily on Vanilla JavaScript and DOM Manipulation concepts, including:

1. Element Creation: Using document.createElement() to generate student cards and avatars dynamically.
2. Event Delegation & Handling:
   • addEventListener for search input, filter buttons, and theme toggles.
   • mousemove events for the parallax background and torchlight cursor effect.
3. DOM Updates:
   • innerHTML and textContent for updating stats and countdowns.
   • classList.toggle for flipping cards and opening modals.
4. State Management: Managing currentDataset vs allStudents to handle filtering without re-fetching data.
5. CSS Variables via JS: Updating --mouse-x and --mouse-y dynamically for hover effects.
6. Browser APIs:
   • localStorage to save the user's selected theme.
   • fetch() API to load local JSON data and external trivia.

---

🚀 Steps to Run the Project

Since this project uses fetch() to load external JSON data, it cannot be run by simply double-clicking index.html (due to CORS policy).

1. Open the Folder: Open the project folder in VS Code.
2. Install Live Server: Install the "Live Server" extension by Ritwick Dey.
3. Start Server: Right-click on index.html and select "Open with Live Server".
4. View: The project will open in your default browser at http://127.0.0.1:5500.

---

🛠️ Dependencies & Attribution

• Core Logic: 100% Vanilla JavaScript (No frontend frameworks used).
• Visualizations: Chart.js is used strictly for the canvas-based chart in the Stats modal. It does not control the DOM or application logic.
• Effects: canvas-confetti is used for the celebration animation.
• 3D Effects: vanilla-tilt.js is used for the card tilt effect.

---

⚠️ Known Limitations

• Static Data: The student data is currently loaded from a static data.json file. In a production version, this would be connected to a live database.
• Trivia API: The "On This Day" feature relies on the external numbersapi.com. If the API is down, fallback text is displayed.