A full-featured Employee Management System built with React.js — featuring role-based dashboards, task management, and real-time data persistence via browser local storage.
- About the Project
- Features
- Tech Stack
- Getting Started
- Prerequisites
- Installation
- Usage
- Project Structure
- Screenshots
- License
Synapse is an Employee Management System designed to simplify workplace task coordination between admins and employees. It provides a clean, role-based interface where administrators can assign and track tasks, while employees can view and manage their assigned work — all without a backend server.
Data is persisted using browser local storage, simulating real backend interactions entirely on the front end.
- 🔐 Role-Based Access — Separate dashboards for Admin and Employee users
- 📝 Task Assignment — Admins can create, assign, and track tasks for employees
- 📊 Real-Time Updates — Changes reflect instantly across the UI
- 💾 Local Storage Persistence — All data is saved in the browser — no server required
- 🧩 Component-Based Architecture — Clean, reusable React components throughout
- 📱 Responsive UI — Works across different screen sizes
| Technology | Purpose |
|---|---|
| React.js | Frontend framework |
| HTML5 / CSS3 / Tailwind CSS | Markup and styling |
| Browser Local Storage | Data persistence |
Follow these steps to run the project locally.
Make sure you have the following installed:
- Node.js (v14 or higher)
- npm or yarn
node -v
npm -v- Clone the repository
git clone https://github.com/Shreshth-Srivastava/Synapse.git- Navigate to the project directory
cd synapse- Install dependencies
npm install- Start the development server
npm start- Open your browser and go to
http://localhost:5173
- Log in with admin credentials to access the Admin Dashboard
- Log in with employee credentials to access the Employee Dashboard
- View assigned tasks, update task status, and track your workload
Default Credentials Sample login credentials are available on the landing page of the app.
synapse/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── components/
│ │ ├── Auth/
│ │ │ └── Login.jsx
│ │ ├── Dashboard/
│ │ │ ├── AdminDashboard.jsx
│ │ │ └── EmployeeDashboard.jsx
│ │ ├── TaskList/
│ │ │ └── TaskList.jsx
│ │ └── Utils/
│ │ ├── Header.jsx
│ │ └── MetricCard.jsx
│ ├── context/
│ │ └── AuthProvider.jsx
│ ├── utils/
│ │ └── LocalStorage.js
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── package.json
└── README.md
| Login Page | Admin Dashboard | Employee Dashboard |
|---|---|---|
 |
 |
 |
Distributed under the MIT License. See LICENSE for more information.