DeskBuddy Frontend

A modern React application for managing student check-in processes with glassmorphism UI design and QR code scanning capabilities.

Features

• 🔐 Authentication - Google OAuth and email/password login
• 📷 QR Scanning - Real-time camera-based QR code scanning
• 📊 Student Management - Multi-stage check-in process
• 📧 Email System - Automated QR code delivery to students
• 🎨 Premium UI - Glassmorphism design with smooth animations

Tech Stack

• React 19 + Vite
• Firebase - Authentication
• React Router DOM - Routing
• React Hot Toast - Notifications
• HTML5 QR Scanner - QR code scanning
• CSS3 - Glassmorphism styling

Installation

1. Clone and install

   git clone <repository-url>
   cd deskbuddy-frontend
   npm install

2. Environment setup Create .env file:

   VITE_FIREBASE_API_KEY=your_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id

3. Run development server

   npm run dev

Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

Project Structure

src/
├── components/     # Reusable components
├── pages/         # Main application pages
├── context/       # React context providers
├── services/      # External integrations
├── styles/        # CSS stylesheets
└── assets/        # Images and static files

Usage

1. Login - Use Google OAuth or email/password
2. Dashboard - Navigate to different check-in stages
3. Scan QR - Use camera to scan student QR codes
4. Send QR - Upload CSV and send QR codes to students

---

Built with React and modern web technologies.