https://github.com/wiseweb-works/mern-employee-shift-manager
📅 Employee Shift Management App – A full-stack application built with MongoDB, Express.js, React, and Node.js (MERN) to manage employee schedules, shifts, and availability.
https://github.com/wiseweb-works/mern-employee-shift-manager
backend employee employee-management frontend fullstack fullstack-project mern mern-stack shift vercel
Last synced: 4 months ago
JSON representation
📅 Employee Shift Management App – A full-stack application built with MongoDB, Express.js, React, and Node.js (MERN) to manage employee schedules, shifts, and availability.
- Host: GitHub
- URL: https://github.com/wiseweb-works/mern-employee-shift-manager
- Owner: wiseweb-works
- License: mit
- Created: 2025-04-10T11:02:50.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-04-30T18:19:16.000Z (5 months ago)
- Last Synced: 2025-05-18T15:13:44.252Z (5 months ago)
- Topics: backend, employee, employee-management, frontend, fullstack, fullstack-project, mern, mern-stack, shift, vercel
- Language: JavaScript
- Homepage: https://shift-manager-frontend.vercel.app/
- Size: 2.86 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Employee Shift Management App
**Employee Shift Management App** is a fullstack web application designed to streamline and centralize employee scheduling. Built with a modern React frontend and an Express/MongoDB backend, the app offers a seamless interface for creating, updating, and tracking employee shifts in a collaborative environment.
## Admin Pages
| Dashboard (View Mode) | Dashboard (Edit Mode) |
| :------------------------------------------: | :------------------------------------------: |
|  |  |
| Create a New Shifts | View Statistics |
| :----------------------------------------: | :---------------------------------------: |
|  |  |
| Create a New Team Member | View and Edit Team Members |
| :----------------------------------------: | :----------------------------------------: |
|  |  |
## User Pages
| Dashboard | View Statistics |
| :--------------------------------------: | :---------------------------------------: |
|  |  |
## 🚀 Features
- 📅 **Drag-and-Drop Calendar Interface** powered by **ScheduleX**
- 🌍 **Timezone-Aware Scheduling** with `moment-timezone`
- 🔐 **JWT-based Authentication and Authorization**
- 📊 **Interactive Charts and Statistics** using **Recharts**
- 🧠 **Smart Shift Visualization** and management tools
- 💡 **Fully Responsive Design** with **Tailwind CSS**
- ⚙️ RESTful API with secure endpoints for user and shift data
## 🧱 Tech Stack
### Frontend
- **React 19** + **React Router 7**
- **Tailwind CSS 4**
- **ScheduleX Calendar Suite**
- **Recharts**
- **Axios** for API communication
- **Vite** for blazing-fast development
### Backend
- **Express.js** (v5)
- **MongoDB + Mongoose**
- **JWT** for authentication
- **dotenv** for environment configuration
- **bcryptjs** for password hashing
- **moment-timezone** for accurate time tracking
### ERD Diagram
## 📦 Installation
### Clone the Repository
```bash
git clone https://github.com/wiseweb-works/mern-employee-shift-manager.git
cd mern-employee-shift-manager
```
### Backend Setup
```bash
cd backend
npm install
cp .env.example .env # Add your Mongo URI and JWT secret here
npm start
```
### Frontend Setup
```bash
cd ../frontend
npm install
npm run dev
```
## ✨ What I Learned
While developing this project, I deepened my understanding of:
- Implementing calendar components with custom drag-and-drop behavior
- Building fullstack authentication flows using JWT
- Managing date/time with timezone awareness
- Creating modular RESTful APIs with Express and Mongoose
- Styling complex UIs with Tailwind CSS and component libraries
## 📚 Useful Resources
- [ScheduleX Calendar Docs](https://docs.schedule-x.dev)
- [Recharts](https://recharts.org/)
- [Tailwind CSS](https://tailwindcss.com/docs)
- [Express.js](https://expressjs.com/)
- [MongoDB Docs](https://www.mongodb.com/docs/)
## 🤝 Acknowledgments
This project reflects my ongoing journey in building robust and modern web applications. Thanks to the open-source community and tool creators whose work made this possible.
Feel free to fork this project, contribute, or reach out with feedback!