People Planner Fullstack App

Overview

People Planner is a fully responsive full-stack application developed using the MERN stack. It is designed to help users manage their in-time and out-time, apply for leaves, view and filter applied leaves based on month, leave type & status, and view holidays on a calendar. It features secure authentication and a role-based UI for effective leave management.

Table of Contents

• Features
• Major Technologies Used
• Demo Video
• Installation
  • Prerequisites
  • Setup
• Application Screenshots

Features

• User Authentication: Secure login and registration.
• Time Management: Set in-time and out-time.
• Leave Management: Apply for regular and half-day leaves.
• Holiday Calendar: View all holidays on an interactive calendar.
• Leave Overview: View applied leaves based on month and filter by type (regular or half-day) and status (approved, pending, denied, cancelled).
• Role-Based UI: The manager can approve or deny leave requests before the leave start date. (Note: The manager role is seeded at the start of the application for simplicity. Future updates may include separate modules for more advanced manager management.)
• Multiple-Day Handling: Handled the multiple-day login-logout scenarios.

Major Technologies Used

• Frontend: React, Vite, Tailwind CSS, React-Suite
• Backend: Node.js, Express, Mongoose, BcryptJS
• Database: MongoDB
• Authentication: JSON Web Tokens (JWT)

Demo Video

People.Planner_Demo.Video.mp4

Installation

Prerequisites

• Node.js
• MongoDB

Setup

1. Clone the repository:

   git clone https://github.com/maanasb01/People-Planner.git
   cd People-Planner

2. Install dependencies for the server:

   cd server
   npm install

3. Install dependencies for the client (in separate terminal):

   cd client
   npm install

4. Environment Variables: Create a .env file in the server directory and add the following:

   DATABASE_URL=your_mongodb_connection_string
   AUTH_SECRET_KEY = your_jwt_secret
   PORT = 3000
   CLIENT_URL = "http://localhost:5173"
   

5. Run the Application for Development:

   • Server:

     cd server
     npm run dev

   • Client (in a separate terminal):

     cd client
     npm run dev

6. Open your browser and visit:

   http://localhost:5173
   

Application's Screenshots

Home

Leave Management for User

Select Leave-Type

Apply for Regular Leave

Apply for Half-Day Leave

Applied Leaves

Applied Leaves with Filters

Leave Administration for Manager

Login