Smart Attendance | SUST - Mobile App

A complete React Native mobile application for Smart Attendance | SUST, built with Expo for cross-platform support (iOS & Android).

Features

Student Features

• View active classes in real-time
• Submit attendance with validation codes
• Online Classes: Simple code entry
• Offline Classes: Code + Location verification + Photo capture
• View attendance history

Teacher Features

• Create online/offline classes
• Generate/update validation codes
• View real-time attendance lists
• Manage courses
• View cumulative attendance by course
• Export attendance data (view in app, export via web)

Technical Features

• JWT Authentication with auto-login
• Geolocation for offline classes
• Camera capture for photo verification
• Local data persistence with AsyncStorage
• Pull-to-refresh on all lists
• Modern dark theme UI
• Fast and responsive

Quick Start

Prerequisites

• Node.js (v14+)
• npm or yarn
• Expo Go app (for testing on physical device)
• iOS Simulator (Mac only) or Android Emulator (optional)

Installation

1. Navigate to the mobile app directory:

cd /Users/tanzimhasanprappo/Desktop/DigitalAttendenceMobile

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Run on device/simulator:

• Physical Device: Scan the QR code with Expo Go app
• iOS Simulator: Press i in the terminal
• Android Emulator: Press a in the terminal

Configuration

Backend API URL

The app connects to your deployed backend. The API URL is configured in:

src/utils/constants.js

Current backend URL:

export const API_URL = 'https://digitalattendancesystem-production.up.railway.app/api';

To change the backend URL, edit this file and restart the app.

Project Structure

DigitalAttendenceMobile/
├── App.js                          # Main app entry point
├── app.json                        # Expo configuration
├── package.json                    # Dependencies
├── src/
│   ├── components/                 # Reusable components
│   │   ├── common/                 # Common UI components
│   │   │   ├── Alert.js
│   │   │   ├── Badge.js
│   │   │   ├── Button.js
│   │   │   ├── Card.js
│   │   │   ├── Input.js
│   │   │   └── Loading.js
│   │   └── CameraCapture.js        # Camera component
│   ├── context/
│   │   └── AuthContext.js          # Global auth state
│   ├── navigation/
│   │   ├── AppNavigator.js         # Main router
│   │   ├── AuthNavigator.js        # Auth screens
│   │   ├── StudentNavigator.js     # Student screens
│   │   └── TeacherNavigator.js     # Teacher screens
│   ├── screens/
│   │   ├── Auth/
│   │   │   ├── LoginScreen.js
│   │   │   └── RegisterScreen.js
│   │   ├── Student/
│   │   │   ├── StudentDashboardScreen.js
│   │   │   ├── AttendanceFormScreen.js
│   │   │   └── AttendanceHistoryScreen.js
│   │   └── Teacher/
│   │       ├── TeacherDashboardScreen.js
│   │       ├── CreateClassScreen.js
│   │       ├── ClassDetailsScreen.js
│   │       ├── CourseManagementScreen.js
│   │       └── CumulativeAttendanceScreen.js
│   ├── services/
│   │   ├── api.js                  # API client
│   │   ├── location.js             # Location service
│   │   └── storage.js              # AsyncStorage wrapper
│   ├── styles/
│   │   ├── colors.js               # Color palette
│   │   ├── globalStyles.js         # Shared styles
│   │   └── theme.js                # Theme config
│   └── utils/
│       ├── constants.js            # App constants
│       └── helpers.js              # Utility functions

Usage Guide

For Students

1. Login/Register

   • Open the app
   • Login with your credentials or register a new account
   • Select "Student" role during registration

2. Mark Attendance

   • View active classes on your dashboard
   • Tap on a class to open attendance form
   • For Online Classes: Enter validation code from teacher
   • For Offline Classes:
     • Allow location permission
     • Allow camera permission
     • Capture your photo
     • Enter validation code
   • Submit attendance

3. View History

   • Tap "My History" button on dashboard
   • See all your attended classes

For Teachers

1. Create a Class

   • Tap "Create New Class" button
   • Enter class details
   • Select type (Online/Offline)
   • Optionally link to a course
   • Generate or enter validation code
   • For offline classes, location will be captured automatically
   • Tap "Create Class"

2. View Attendance

   • Tap on any class from "My Classes" list
   • See all students who submitted attendance
   • Update validation code if needed
   • Delete class if necessary

3. Manage Courses

   • Tap "+ New Course" to create a course
   • Enter course code, name, and session
   • Link classes to courses when creating them
   • View cumulative attendance per course

Permissions

The app requires the following permissions:

• Camera: For photo verification in offline classes (Student only)
• Location: For location verification in offline classes (Student & Teacher)

Permissions are requested when needed and can be managed in your device settings.

Development

Available Scripts

• npm start - Start Expo development server
• npm run android - Run on Android emulator/device
• npm run ios - Run on iOS simulator/device (Mac only)
• npm run web - Run in web browser (limited functionality)

Key Dependencies

• React Native (0.81.5) - Mobile framework
• Expo (~54.0.33) - Development platform
• React Navigation (v7) - Navigation library
• Axios - HTTP client
• Expo Camera - Camera functionality
• Expo Location - Geolocation
• AsyncStorage - Local storage
• React Native Paper - UI components

Features Comparison with Web App

Feature	Web App	Mobile App
Authentication	Yes	Yes
Student Dashboard	Yes	Yes
Teacher Dashboard	Yes	Yes
Online Class Attendance	Yes	Yes
Offline Class Attendance	Yes	Yes
Camera Capture	Yes	Yes
Location Verification	Yes	Yes
Attendance History	Yes	Yes
Create Classes	Yes	Yes
Course Management	Yes	Yes
Cumulative Attendance	Yes	Yes
Excel Export	Yes	View only*
Update Validation Code	Yes	Yes
Delete Class	Yes	Yes

*Excel export is viewable in the mobile app, but download/share functionality is best accessed via the web version.

Notes

• The mobile app is a complete replica of the web app with identical functionality
• All data is synced with the same backend API
• Students can use either web or mobile app interchangeably
• Teachers can manage classes from both platforms
• Remember to allow camera and location permissions for offline classes

Troubleshooting

Common Issues

1. "Network Error" when logging in:

• Check your internet connection
• Verify the backend API URL in src/utils/constants.js
• Ensure the backend server is running

2. Camera not working:

• Grant camera permission in device settings
• Restart the app after granting permission

3. Location not acquired:

• Enable location services on your device
• Grant location permission to Expo Go / the app
• Try again in an open area for better GPS signal

4. App won't start:

• Delete node_modules and run npm install again
• Clear Expo cache: npx expo start -c
• Ensure you're using compatible Node.js version (v14+)

Support

For issues or questions:

1. Check the troubleshooting section above
2. Ensure you're running the latest version
3. Check the backend API is accessible

---

Built with React Native & Expo