EMS-React

A full-stack Employee Management System with a React frontend and GraphQL API backend, backed by MongoDB.

Features

• Employee directory with filtering by employment type (FullTime, PartTime, Contract, Seasonal)
• Employee details view with computed retirement date
• Create new employees
• Edit employee title, department, and status
• Delete inactive employees
• Retiring employees view (employees approaching retirement age)
• 404 page for unmatched routes

Technologies

API

• Node.js with Apollo Server (GraphQL)
• MongoDB (via MongoDB Atlas)

UI

• React 18
• React Router v6
• Webpack (via bundle.config.js)
• Tailwind CSS

Project Structure

API/
  index.js        - Apollo Server entry point
  schema.js       - GraphQL schema definition
  resolvers.js    - GraphQL resolvers
  database.js     - MongoDB connection and data operations
UI/
  jsx/
    Main.jsx              - React entry point
    PageRouter.jsx        - Client-side routing
    Home.jsx              - Landing page
    EmployeeDirectory.jsx - Employee list with filtering
    EmployeeDetails.jsx   - Individual employee details
    EmployeeCreate.jsx    - New employee form
    EmployeeChange.jsx    - Edit employee form
    EmployeeTable.jsx     - Table component
    EmployeeRow.jsx       - Table row component
    EmployeeFilter.jsx    - Type filter dropdown
    Helper.jsx            - API fetch utility
    404.jsx               - Not found page

How to Run

1. Set the ATLAS_URL environment variable with your MongoDB Atlas connection string
2. Start the API:

   cd API && node index.js

3. Build the UI:

   cd UI && npm install && npm run build

4. Serve the UI from the public directory or configure a proxy to the API