A complete, production-ready solution with a React Native mobile app and a powerful MERN Stack backend code with the admin panel. Employees can mark attendance via QR code, track history, and apply for leave, while admins manage users, approve requests, generate reports, and create QR codes from a responsive dashboard.

Perfect for companies, schools, startups, and HR teams, this app includes full source code, clean UI for both mobile & web, step-by-step documentation, and is fully customizable to fit your needs.

📱 Mobile App Features (React Native)

• 📍 Smart QR Code Attendance
• 📷 Scan QR code to mark attendance
• ✅ Attendance only if inside office zone
• ⏱ Auto-checkout for missed logouts
• 📝 Apply for leave directly from the app
• 📅 Calendar view with visual tracking
• 📊 Real-time attendance tracking
• 🔍 Quick attendance record filtering
• 🔐 Secure authentication (JWT-based)
• 🌍 Works on Android & iOS
• REST API integration with backend

🧑‍💻 Admin Panel Features (MongoDB + Node.js + Express)

• 👥 Manage all employees data
• 📷 QR Code Generator (for employee attendance scanning)
• 📊 Manage and monitor all attendance records
• 📝 Approve or reject leave applications
• 📅 Calendar view for attendance & leave data
• 📊 Detailed attendance & leave reports
• 🔍 Advanced filtering for records
• 📂 Export to PDF, CSV, XLS
• 💾 MongoDB database integration
• 📦 Includes documentation & setup guide

🎥 Demo Links

• Mobile App Demo: Watch here
• Admin Portal Demo: Watch here

💻 System Requirements

Before running this project, make sure your computer has the following installed:

For Backend & Admin Panel

• Node.js → Version 16 or higher (Download here)
• MongoDB → Either:
  • Install locally (Download here)
  • OR use a free MongoDB Atlas cloud account (Sign up here)

For Mobile App

• Expo CLI → Install globally:

  npm install -g expo-cli
  
  
  
  

• Android Studio (for Android emulator)
  • Download here
  • Install Android SDK & Virtual Device during setup
• Xcode (for iOS development — macOS only)
  • Download from Mac App Store

Recommended Tools

• Git → For version control (Download here)
• Visual Studio Code → Code editor (Download here)
• Postman → For API testing (Download here)

1️⃣ Unzip the Package

Extract the main package to your preferred location.

2️⃣ Backend Setup (source-code/backend/)

Run Backend

cd source-code/backend
npm install
node index.js

Configure Environment Variables

📄 File location:

source-code/backend/.env

🔹 Example .env:

DB_HOST=mongodb+srv://username:[email protected]/mydb
PORT=8080
SECRET_KEY=your_secret_key_for_authentication
ABLY_API_KEY=your_ably_api_key_for_real_time_features
EMAIL_USER=your_email_address_for_notifications
EMAIL_PASS=your_email_password_or_app_password
EMAIL_FROM=your_sender_email_display

💡 Variable Details

• DB_HOST → MongoDB connection string
• PORT → Backend port (e.g., 8080)
• SECRET_KEY → JWT secret
• ABLY_API_KEY → From Ably.com
• EMAIL_USER / EMAIL_PASS → Email for notifications
• EMAIL_FROM → Sender display name

🔄 Restart after changes:

node index.js

3️⃣ Mobile App Setup (source-code/app/)

Run Mobile App

cd source-code/app
npm install
npx expo start

Configure Environment Variables

📄 File location:

source-code/app/.env

🔹 Example .env:

EXPO_PUBLIC_API_URL=http://192.168.1.13:8080/api/
EXPO_PUBLIC_STORAGE_PATH=http://192.168.1.13:8080/public/
EXPO_PUBLIC_DOCUMENT_STORAGE_PATH=http://192.168.1.13:8080/uploads/
EXPO_PUBLIC_STORAGE_KEY=EmsAuth
EXPO_PUBLIC_API_KEY=abc123
EXPO_PUBLIC_ABLY_AUTH=http://192.168.1.13:8080/api/ably-auth

💡 Variable Details

• EXPO_PUBLIC_API_URL → Backend API endpoint (replace 192.168.1.13 with your local IP)
• EXPO_PUBLIC_STORAGE_PATH → File storage path
• EXPO_PUBLIC_DOCUMENT_STORAGE_PATH → Uploaded documents path
• EXPO_PUBLIC_STORAGE_KEY → Local storage key
• EXPO_PUBLIC_API_KEY → App API key
• EXPO_PUBLIC_ABLY_AUTH → Ably auth endpoint

🔄 Restart after changes:

npx expo start --clear

4️⃣ Admin Portal Setup (source-code/portal/)

Run Admin Portal

cd source-code/portal
npm install
npm run dev

Configure Environment Variables

📄 File location:

source-code/portal/.env

🔹 Example .env:

VITE_APP_NAME="Ems Portal"
VITE_STORAGE_KEY=ems-portal-storage
VITE_REFRESH_TOKEN=ems-admin-token
VITE_API_URI=http://localhost:8080/api/
VITE_STORAGE_PATH=http://localhost:8080/public/
VITE_DOCUMENT_STORAGE_PATH=http://localhost:8080/uploads/
VITE_ABLY_AUTH=http://localhost:8080/api/ably-auth

💡 Variable Details

• VITE_APP_NAME → Display name
• VITE_STORAGE_KEY → Local storage key
• VITE_REFRESH_TOKEN → Admin token key
• VITE_API_URI → Backend API for portal
• VITE_STORAGE_PATH → Static file storage
• VITE_DOCUMENT_STORAGE_PATH → Uploaded documents path
• VITE_ABLY_AUTH → Ably auth endpoint

🔄 Restart after changes:

npm run dev

📄 More Info

For more detailed instructions:

source-code/readme.md