75% Attendance Checker Website

I'll create a complete attendance tracker that helps students monitor their attendance and stay on track to meet the 75% requirement. Let's build this with Next.js and Tailwind for a responsive, modern UI with all the requested features.

Features Implemented

This 75% Attendance Checker includes all the requested features:

1. Attendance Calculator

   • Users can enter total and attended classes to calculate their percentage
   • Visual indicators show if they're meeting the 75% requirement

2. Prediction System

   • Automatically calculates how many more classes they need to attend to reach 75%
   • Shows warnings when attendance is below the threshold

3. Subject-wise Tracking

   • Users can add, edit, and delete multiple subjects
   • Each subject tracks its own attendance statistics
   • Data persists in the browser using localStorage

4. Responsive UI

   • Works on both mobile and desktop devices
   • Clean, modern interface with shadcn/ui components

5. Dark Mode

   • Toggle between light and dark themes
   • System preference detection

How to Use

1. Calculate Attendance: Enter the total number of classes and how many you've attended to see your current percentage.
2. Track Multiple Subjects: Add different subjects with their respective attendance data using the "Add Subject" button.
3. Get Predictions: The app automatically calculates how many more classes you need to attend to reach or maintain 75% attendance.
4. Edit or Delete Subjects: Manage your subjects as needed with the edit and delete buttons.

The website is ready to be deployed to Vercel, Netlify, or GitHub Pages!

I'll enhance the attendance tracker with a profile section and add subject credits and hours tracking. I'll also explain how to connect it to a database and make it shareable.

Enhanced 75% Attendance Checker - Complete Solution

I've enhanced the attendance tracker with all the requested features:

New Features Added:

1. User Profile Section

   • Students can add their personal information including name, email, department, semester, and roll number
   • Profile picture support with avatar fallback
   • All profile data persists in localStorage

2. Subject Credits and Hours

   • Added fields for credits and total hours for each subject
   • Included in the subject list display
   • Used in dashboard calculations

3. Dashboard Overview

   • Shows average attendance across all subjects
   • Displays total credits and hours
   • Highlights subjects below 75% attendance
   • Visual progress bars for each subject

4. Database Connection Options

   • Added example code for MongoDB, Firebase, and Supabase
   • Created server actions for database operations
   • Added API routes for subject management
   • Included detailed README with setup instructions

How to Use This Website:

1. For Development:

   • Clone the repository to your local machine
   • Run npm install to install dependencies
   • Run npm run dev to start the development server
   • Open http://localhost:3000 in your browser

2. For Sharing with Users (No Database):

   • Deploy to Vercel, Netlify, or GitHub Pages using the instructions in the README
   • Share the URL with users
   • Users' data will be stored in their browser's localStorage

3. For Adding Database Support:

   • Choose a database provider (MongoDB, Firebase, or Supabase)
   • Uncomment and configure the relevant code in the provided files
   • Add the necessary environment variables
   • Deploy with database support enabled

The website is fully responsive, works on all devices, and includes dark mode support. All data is currently stored in localStorage, making it easy to share and use without setting up a database initially. When you're ready to add backend support, the code includes examples for multiple database options.

Please make sure to add the following environment variables to your project: