🎓 Attendance Tracker

Beautiful student attendance tracking system with Apple Glass design

Features • Screenshots • Quick Start • Tech Stack • API • Deployment

---

✨ Features

📊 Dashboard

• Real-time attendance overview
• Today's session summary
• Quick action buttons
• Attendance alerts for low-performing students

👥 Student Management

• Full CRUD operations
• CSV import support
• Search and filter by class
• Individual attendance history

📚 Class Management

• Create and organize classes
• Assign teachers
• View class statistics
• Generate attendance reports

✅ Attendance Tracking

• Interactive attendance grid
• One-click status changes (Present/Absent/Late/Excused)
• Bulk operations
• Quick attendance mode

📈 Reports & Analytics

• Detailed attendance reports
• Export to CSV/Excel
• Low attendance alerts
• Trend analysis

🔐 Authentication

• JWT-based authentication
• Role-based access (Admin/Teacher)
• Secure password handling

---

📸 Screenshots

Web Dashboard

Attendance Grid

Students List

Reports

Mobile App

---

🚀 Quick Start

Option 1: One Command (Docker)

git clone https://github.com/bendudebot/attendance.git
cd attendance
chmod +x scripts/*.sh
./scripts/docker-start.sh

That's it! 🎉 This will:

• ✅ Start PostgreSQL database
• ✅ Run all migrations
• ✅ Seed test data (2 users, 3 classes, 15 students, ~150 attendance records)
• ✅ Start the API server at http://localhost:3001

Option 2: Local Development

# Terminal 1: Database + Backend
cd backend
docker-compose up -d db          # Start PostgreSQL
npm install
npx prisma migrate dev           # Run migrations
npx prisma db seed               # Seed test data
npm run dev                      # API at http://localhost:3001

# Terminal 2: Web Frontend
cd web
npm install
npm run dev                      # Web at http://localhost:3000

🔐 Test Accounts

Role	Email	Password
Admin	admin@attendance.app	admin123
Teacher	teacher@attendance.app	teacher123

📖 Full setup guide: docs/QUICKSTART.md

Test Accounts

Role	Email	Password
Admin	admin@attendance.app	admin123
Teacher	teacher@attendance.app	teacher123

---

🛠 Tech Stack

Backend

• Runtime: Node.js 18+
• Framework: Express.js
• Database: PostgreSQL 15
• ORM: Prisma 5
• Authentication: JWT
• Validation: express-validator

Frontend (Web)

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS
• Icons: Lucide React
• Charts: Recharts

Mobile

• Framework: React Native (Expo)
• Navigation: Expo Router

Infrastructure

• Containerization: Docker
• Database: PostgreSQL (Alpine)

---

📖 API Documentation

See docs/API.md for full API documentation.

Quick Reference

Method	Endpoint	Description
POST	/api/auth/login	User login
POST	/api/auth/register	User registration
GET	/api/classes	List all classes
GET	/api/students	List all students
POST	/api/attendance/mark	Mark attendance
GET	/api/attendance/today	Today's summary

---

🗄 Database Schema

erDiagram
    User ||--o{ Class : teaches
    Class ||--o{ Student : contains
    Class ||--o{ Session : has
    Student ||--o{ Attendance : has
    Session ||--o{ Attendance : records
    
    User {
        string id PK
        string email UK
        string password
        string name
        enum role
    }
    
    Class {
        string id PK
        string name
        string code UK
        string teacherId FK
    }
    
    Student {
        string id PK
        string firstName
        string lastName
        string studentId UK
        string classId FK
    }
    
    Session {
        string id PK
        string classId FK
        datetime date
        string startTime
        string endTime
    }
    
    Attendance {
        string id PK
        string studentId FK
        string sessionId FK
        enum status
        string notes
    }

Loading

---

⚙️ Environment Variables

Backend (.env)

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/attendance"

# Authentication
JWT_SECRET="your-super-secret-jwt-key"

# Server
PORT=3001

Frontend (.env.local)

NEXT_PUBLIC_API_URL=http://localhost:3001/api

---

🚢 Deployment

Docker Production

# Build and run
docker-compose -f docker-compose.prod.yml up -d

# Run migrations
docker-compose exec api npx prisma migrate deploy

Manual Deployment

1. Set up a PostgreSQL database
2. Configure environment variables
3. Build and start the backend:

   cd backend
   npm run build
   npm start

4. Build and deploy the frontend:

   cd web
   npm run build
   npm start

---

📁 Project Structure

attendance/
├── backend/
│   ├── src/
│   │   ├── index.ts          # Express server
│   │   ├── routes/           # API routes
│   │   ├── middleware/       # Auth middleware
│   │   └── services/         # Business logic
│   ├── prisma/
│   │   ├── schema.prisma     # Database schema
│   │   └── seed.ts           # Seed data
│   ├── docker-compose.yml
│   └── Dockerfile
├── web/
│   ├── app/                  # Next.js pages
│   ├── components/           # React components
│   └── lib/                  # Utilities
├── mobile/                   # React Native app
├── docs/                     # Documentation
└── screenshots/              # App screenshots

---

🤝 Contributing

See docs/CONTRIBUTING.md for contribution guidelines.

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ by Benoit Liard