A modern, feature-rich attendance tracking application for students. Track your daily attendance, manage your timetable, analyze your attendance trends, and stay on top of your academic performance.
- One-tap attendance marking - Mark present, absent, or cancelled classes with a single tap
- Real-time sync - Automatic synchronization with official institute records
- Smart timetable - Auto-generated timetable based on your subject schedule
- Future date support - Mark cancelled classes for future dates
- Comprehensive analytics - View attendance statistics across semesters
- Visual charts - Interactive charts showing attendance distribution and trends
- Semester-wise breakdown - Analyze performance by semester
- Attendance ranges - See how many students fall in different attendance percentage ranges
- Search students - Find any student by name or roll number
- Cross-semester view - View attendance history across all semesters
- Quick access - Fast and efficient search with real-time results
- Sleep reminders - Get smart sleep notifications based on your first lecture
- Priority alerts - Critical lectures get priority notifications
- Customizable settings - Configure sleep duration and notification preferences
- Visual timetable - Beautiful grid view of your weekly schedule
- Subject assignment - Easily assign subjects to time slots
- Color coding - Each subject has a unique color for easy identification
- Flexible editing - Add, remove, or modify your timetable anytime
- Minimum criteria alerts - Set minimum attendance thresholds per subject
- Risk notifications - Get alerts when you're at risk of falling below requirements
- Visual indicators - Color-coded warnings for subjects needing attention
- Submit feedback - Report bugs, provide feedback, or suggest improvements
- Multiple types - Categorize feedback as bug, feedback, or suggestion
- Easy submission - Simple form-based feedback submission
- React 18 - Modern React with hooks
- TypeScript - Type-safe development
- Vite - Fast build tool and dev server
- Capacitor - Cross-platform mobile app framework
- Tailwind CSS - Utility-first CSS framework
- Shadcn UI - Beautiful, accessible component library
- React Router - Client-side routing
- Recharts - Chart library for analytics
- TanStack Query - Data fetching and caching
- Sonner - Toast notifications
- Capacitor Android - Native Android integration
- Gradle - Android build system
- Node.js 18+ and npm
- Android Studio (for Android development)
-
Clone the repository
git clone <repository-url> cd attendance-io-frontend
-
Install dependencies
npm install
-
Configure environment variables (Optional) The app uses
https://api.attendanceio.paramsavjani.inas the default API URL. For local development, create a.envfile in the root directory:VITE_API_BASE_URL=http://localhost:8081
-
Run development server
npm run dev
-
Build for production
npm run build
-
Sync Capacitor
npm run cap:sync
-
Open Android Studio
npm run cap:open:android
-
Build APK
- Open the project in Android Studio
- Build → Build Bundle(s) / APK(s) → Build APK(s)
- Or use the GitHub Actions workflow for automated builds
npm run dev- Start development servernpm run build- Build for productionnpm run build:dev- Build in development modenpm run preview- Preview production buildnpm run lint- Run ESLintnpm run cap:sync- Sync Capacitor native projectsnpm run cap:copy- Copy web assets to native projectsnpm run cap:open:android- Open Android project in Android Studionpm run android:build- Build and sync Android project
attendance-io-frontend/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── attendance/ # Attendance-related components
│ │ ├── auth/ # Authentication components
│ │ ├── subjects/ # Subject management components
│ │ ├── timetable/ # Timetable components
│ │ └── ui/ # Base UI components (Shadcn)
│ ├── contexts/ # React contexts (Auth, Attendance)
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions and API config
│ ├── pages/ # Page components
│ │ ├── Dashboard.tsx
│ │ ├── Attendance.tsx
│ │ ├── DailyAttendance.tsx
│ │ ├── Analytics.tsx
│ │ ├── Timetable.tsx
│ │ ├── Profile.tsx
│ │ ├── Search.tsx
│ │ └── ...
│ └── types/ # TypeScript type definitions
├── android/ # Android native project
├── public/ # Static assets
├── scripts/ # Build and utility scripts
└── resources/ # App icons and logos
The app uses OAuth2 authentication. Users authenticate through their institute's OAuth provider and are automatically registered/logged in. The authentication is handled by the backend API.
The Android APK is automatically built and released via GitHub Actions when changes are pushed to the main branch.
Manual Build:
- Ensure you have Android Studio installed
- Run
npm run buildto build the web app - Run
npm run cap:syncto sync with native projects - Open Android Studio and build the APK
Automated Build:
- Push to
mainbranch triggers GitHub Actions workflow - APK is automatically built and released
- Version is automatically incremented based on Git tags
APKs are named: AttendanceIo-{version}-{buildType}.apk
Example: AttendanceIo-1.0.0-release.apk
- Dark theme - Beautiful dark mode interface
- Responsive design - Works on all screen sizes
- Smooth animations - Polished transitions and interactions
- Accessibility - Built with accessibility in mind
- Modern design - Clean, minimalist interface
- Lazy loading - Components loaded on demand
- Code splitting - Optimized bundle sizes
- React Query caching - Efficient data fetching and caching
- Optimized re-renders - Memoization and context optimization
# Run linter
npm run lint
# Type checking (via TypeScript)
npm run build- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is private and proprietary.
For issues, questions, or feedback, please use the in-app feedback feature or contact the development team.
Made with ❤️ for students
Author: Param Savjani