Student Attendance System Frontend

This is the frontend for the Student Attendance System, a web application designed to manage and track student attendance efficiently. The project is built using Vue.js with Vuetify, TypeScript, Pinia, Vue Router, and Tailwind CSS.

ESP32 and RFID Integration

Works with an ESP32 microcontroller and RFID readers to scan student IDs and mark attendance automatically.

Features

• Firebase Integration: Real-time database for storing attendance data.
• Authentication: Secure login using Firebase Authentication.
• Responsive Design: Built with Vuetify and Tailwind CSS for a seamless experience across devices.

About the Project

This project was developed as a semester project for my electronics class at university. It combines hardware and software to create a practical solution for managing student attendance. The ESP32 code for RFID integration is included in this repository. You can find the ESP32 code here.

Project Setup

Prerequisites

• Node.js (>= 14.x)
• npm (>= 6.x) or yarn (>= 1.x)
• Firebase account for backend configuration

Installation

1. Clone the repository:

   git clone https://github.com/YousifVN/student-attendance-system-front.git
   cd student-attendance-system-front
   

2. Install dependencies:

   npm install
   

3. Configure environment variables:

   • Create a .env file in the root directory.
   • Add the following variables (replace with your Firebase project details):

     VITE_FIREBASE_API_KEY=your-firebase-api-key
     VITE_BASE_URL=your-firebase-database-url
     VITE_FIREBASE_PROJECT_ID=your-firebase-project-id
     VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
     VITE_FIREBASE_APP_ID=your-firebase-app-id
     VITE_FIREBASE_EMAIL=your-admin-email
     VITE_FIREBASE_PASSWORD=your-admin-password
     

Running the Development Server

Start the development server:

npm run dev

The application will be available at http://localhost:3000.

Building for Production

To build the project for production:

npm run build

The production-ready files will be in the dist/ directory.

Folder Structure

student-attendance-system-front/
├── public/                 # Static assets
├── src/
│   ├── assets/             # Project assets (images, fonts, etc.)
│   ├── components/         # Vue components
│   ├── layouts/            # Layout components
│   ├── router/             # Vue Router configuration
│   ├── store/              # Pinia stores
│   ├── styles/             # Global styles (Tailwind CSS)
│   ├── utils/              # Utility functions (e.g., Firebase config)
│   ├── views/              # View components
│   ├── App.vue             # Root component
│   ├── main.ts             # Entry point
│   └── shims-vue.d.ts      # TypeScript shims
├── .env                    # Environment variables
├── .eslintrc.js            # ESLint configuration
├── .prettierrc             # Prettier configuration
├── tailwind.config.js      # Tailwind CSS configuration
├── tsconfig.json           # TypeScript configuration
├── package.json            # Project metadata and dependencies
└── README.md               # Project documentation

Firebase Schema

Below is the structure of the Firebase database used in this project:

{
  "class": {
    "attendance": {
      "week1": {
        "uid1": true,
        "uid2": false
      },
      "week2": {
        "uid1": false,
        "uid2": true
      }
    },
    "currentWeek": 1,
    "students": {
      "uid1": "Student Name 1",
      "uid2": "Student Name 2"
    }
  }
}

Note: The above schema is a mock version for clarification purposes and does not contain real data.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Commit your changes and push them to your fork.
4. Submit a pull request with a detailed description of your changes.