Puskar-Roy/Attendance-System--MERN

Full-stack web application for managing attendance records using JavaScript technologies including Node.js, Express, and React.

Full-Stack JavaScript Attendance Portal ! 📝

Explore the docs »

Go Live · Report Bug · Request Feature

Note: For login in the deployed version, use the following credentials for the admin account: Email - admin@admin.com, Password - admin.

All Features 🌟

1. Role base Authentication (JWT, session-based)

Login Page

• Users can log in to their accounts using their credentials.

Register Page

• New users can create an account to access the application.

2. Admin Panel

Date-Based Attendance Management for All Users

• Admins can select a date from the calendar and then mark the attendance of all users based on that date.

View All Users and Mark All Absent Users

• Admins can view all users and mark those who are absent for the day.

Calendar View For Finding Attendance Records

• Admins can use a calendar view to find attendance records for specific dates.

Find the Attendance Record of a Single User

• Admins can find the attendance record of a single user.

Delete or Edit an Attendance Record

• Admins can delete or edit attendance records as needed.

3. Users Page

Users can View Attendance and Give Attendance

• Users can view their attendance records and mark their attendance for the day.

Getting Started 🚀

Prerequisites

Before you begin contributing to this project, make sure you have the following set up:

• Node.js: A JavaScript runtime.
• npm: The Node.js package manager.

Run This ⌨️

1. Clone the Repository:

   git clone https://github.com/Puskar-Roy/Attendance-System---Frontend

2. Install Dependencies:

    npm install

3. Add Environment Variables:

   touch .env

4. Add the necessary configuration:

   VITE_API=<backend-api-url>
   VITE_ROLE=admin

5. Run This Project:

   npm run dev

   (back to top)

Built With

This section highlights the key frameworks and libraries that form the foundation of your project. Below are some notable examples:

• : A superset of JavaScript that adds static types.
• : The programming language of
• : The database for modern applications.
• : Cloud platform for serverless deployment and hosting.
• : Pluggable linting utility for identifying and fixing code issues.
• : Opinionated code formatter to ensure consistent code styling the web.

(back to top)

Contributing 🌟

Making Contributions

We welcome and appreciate contributions from the community ❤️! Here's how you can contribute:

• Open Issues: Check for open issues or create a new one to start discussions.
• Fork the Repository: Fork the project to your own GitHub account.
• Create Pull Request: Make changes in your fork and submit a pull request.

Welcome Contributors!

🚀 Thank you for considering contributing to this project! Your involvement makes this template even better. Feel free to explore the code, share your ideas, and make improvements ✌️.

🌟 Don't hesitate to reach out if you have any questions or need assistance. Together, let's make this project amazing!🟩

(back to top)

Puskar Roy🖋️