attendance-tracker

An open-source full-stack web application built with TypeScript and Tailwind CSS, that helps students track semester-wise attendance, calculate real-time eligibility, and visualize subject-level safe and danger zones.

🚀 Features

• Next.js 15 - Latest version with improved performance and features
• React 19 - Latest React version with enhanced capabilities
• Tailwind CSS - Utility-first CSS framework for rapid UI development

🛠️ Installation

1. Install dependencies:

npm install
# or
yarn install

2. Start the development server:

npm run dev
# or
yarn dev

3. Open http://localhost:4028 with your browser to see the result.

📁 Project Structure

nextjs/
├── public/             # Static assets
├── src/
│   ├── app/            # App router components
│   │   ├── layout.tsx  # Root layout component
│   │   └── page.tsx    # Main page component
│   ├── components/     # Reusable UI components
│   ├── styles/         # Global styles and Tailwind configuration
├── next.config.mjs     # Next.js configuration
├── package.json        # Project dependencies and scripts
├── postcss.config.js   # PostCSS configuration
└── tailwind.config.js  # Tailwind CSS configuration

🧩 Page Editing

You can start editing the page by modifying src/app/page.tsx. The page auto-updates as you edit the file.

🎨 Styling

This project uses Tailwind CSS for styling with the following features:

• Utility-first approach for rapid development
• Custom theme configuration
• Responsive design utilities
• PostCSS and Autoprefixer integration

📦 Available Scripts

• npm run dev - Start development server on port 4028
• npm run build - Build the application for production
• npm run start - Start the development server
• npm run serve - Start the production server
• npm run lint - Run ESLint to check code quality
• npm run lint:fix - Fix ESLint issues automatically
• npm run format - Format code with Prettier

📱 Deployment

Build the application for production:

npm run build

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API
• Learn Next.js - an interactive Next.js tutorial

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

🙏 Acknowledgments

• Powered by Next.js and React
• Styled with Tailwind CSS

Built with ❤️