Skip to content

Attendance Manager WebApp ​

Version: v1.0.0 • LinkedIn Post: View Post

A full-featured Attendance Manager built using Next.js and Firebase. It provides students and educators with an intuitive interface to manage attendance for classes, track attendance metrics against goals, and persist records securely in real time.


✨ Key Features ​

  1. Class Cards Management: Add, customize, and edit distinct class subject cards with descriptions and targets.
  2. One-Tap Attendance Marking: Convenient "Attend" and "Absent" buttons for quick record updating.
  3. Target Attendance Calculator: Set custom goal percentages (e.g. 75%) and instantly see how many more classes are required.
  4. Current Attendance Rate: Real-time percentage calculation with visual progress feedback.
  5. Reset & Delete Options: Granular controls to clear historical records or remove discontinued courses.
  6. Authentication: Secure sign-in supporting both Google OAuth and Email/Password credentials.
  7. Adaptive Themes: Seamless switching between Light and Dark modes.

🛠️ Technologies Used ​

  • Next.js: High-performance React framework for server-rendered UI and dynamic routing.
  • Firebase: Cloud authentication and real-time Firestore database persistence.
  • Tailwind CSS: Modern utility-first styling with responsive dark/light themes.

📸 Application Preview ​

Attendance Manager Screenshot

🎥 Video Demonstration ​


💬 Community Post ​


Tags: Next.js Firebase TailwindCSS EdTech Web Development