{"id":21698364,"url":"https://github.com/integeralex/employeedash","last_synced_at":"2025-12-31T00:04:56.816Z","repository":{"id":264511190,"uuid":"864281683","full_name":"IntegerAlex/employeedash","owner":"IntegerAlex","description":"MERN stack employee dashboard project","archived":false,"fork":false,"pushed_at":"2024-09-28T15:10:00.000Z","size":9196,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T16:43:59.911Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IntegerAlex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-27T21:05:24.000Z","updated_at":"2024-10-15T06:21:07.000Z","dependencies_parsed_at":"2024-11-24T20:00:28.415Z","dependency_job_id":"90856500-ac54-4382-86e2-3e7213634a8d","html_url":"https://github.com/IntegerAlex/employeedash","commit_stats":null,"previous_names":["integeralex/employeedash"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IntegerAlex%2Femployeedash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IntegerAlex%2Femployeedash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IntegerAlex%2Femployeedash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IntegerAlex%2Femployeedash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IntegerAlex","download_url":"https://codeload.github.com/IntegerAlex/employeedash/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244637095,"owners_count":20485447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T19:33:20.021Z","updated_at":"2025-12-31T00:04:56.776Z","avatar_url":"https://github.com/IntegerAlex.png","language":"TypeScript","readme":"# Employee Management System\n\n## DEMO\n\n    ![demo](./test.mkv)\n### LINK\n\n[LINK](https://youtu.be/L0XjWsU9B30)\n\n\n## Overview\n\nThe Employee Management System is a full-stack web application that allows users to view and manage employee records. Users can add, edit, view, and delete employee data using this platform. It includes a backend API for managing employee data and a responsive frontend for interacting with the system.\n\n### Key Features\n\n- Display employee cards with detailed information (Name, Email, Phone, Designation, Salary, Location, etc.).\n- Add new employee records via a form.\n- Edit existing employee details.\n- Delete employee records.\n- Integrated with a backend API.\n- Responsive design with dark theme support.\n\n## Table of Contents\n\n- [Technologies Used](#technologies-used)\n- [Project Structure](#project-structure)\n- [Backend Setup (API)](#backend-setup-api)\n- [Frontend Setup (UI)](#frontend-setup-ui)\n- [Running the Application](#running-the-application)\n- [API Endpoints](#api-endpoints)\n- [Future Enhancements](#future-enhancements)\n- [Screenshots](#screenshots)\n- [License](#license)\n\n## Technologies Used\n\n### Backend\n\n- **Node.js** with **Express.js**: For building the API server.\n- **MongoDB**: To store employee data.\n- **RESTful API**: To perform CRUD (Create, Read, Update, Delete) operations on employee data.\n- **CORS Middleware**: To enable communication between frontend and backend.\n\n### Frontend\n\n- **React.js** with **TypeScript**: For building a dynamic and interactive user interface.\n- **CSS**: For styling the components and ensuring responsive design.\n- **Fetch API**: For making HTTP requests from the frontend to the backend.\n- **Responsive Design**: Ensures the application is mobile-friendly and adapts well to different screen sizes.\n\n## Project Structure\n\nThe project is divided into two main parts:\n\n- **Frontend** (React + TypeScript)\n- **Backend** (Node.js + Express)\n```\n.\n├── backend/\n│   ├── controllers/\n│   ├── index.js (Main entry point for the server)\n│   └── package.json\n├── frontend/\n│   ├── public/\n│   ├── src/\n│   │   ├── components/\n│   │   ├── App.tsx\n│   │   ├── Add.tsx\n│   │   ├── index.tsx\n│   └── package.json\n└── README.md\n```\n\n## Key Components\n\n- **App.tsx**: Main component that fetches and displays employee data as cards.\n- **Add.tsx**: A form component for adding new employees.\n- **Edit.tsx**: Inline editing functionality for employee details.\n\n### CSS Styling\n\n- The app uses **Flexbox** for responsive design, ensuring the employee cards stack and scale properly.\n- Dark theme is applied for user-friendly interaction, especially in low-light environments.\n- Styling files are located in `src/App.css`.\n\n## API Endpoints\n\n### Fetch All Employees\n\n    **Request**: `GET /api/v1/employees`\n\n    ```json\n\n    {\n        \"employeeId\": 1,\n        \"employeeName\": \"John Doe\",\n        \"employeeEmail\": \"john@example.com\",\n        \"employeePhone\": \"123-456-7890\",\n        \"employeeDesignation\": \"Software Engineer\",\n        \"employeeSalary\": 70000,\n        \"employeeLocation\": \"New York\",\n        \"employeeImage\": \"https://via.placeholder.com/100\"\n    },\n    ...\n\n\n### Add New employees\n\n    **Request**: `POST /api/v1/employees`\n    ```json\n    {\n    \"employeeName\": \"Jane Doe\",\n    \"employeeEmail\": \"jane@example.com\",\n    \"employeePhone\": \"987-654-3210\",\n    \"employeeDesignation\": \"HR Manager\",\n    \"employeeSalary\": 65000,\n    \"employeeLocation\": \"Los Angeles\",\n    \"employeeImage\": \"https://via.placeholder.com/100\"\n}\n```\n\n### Update Employee details\n    \n    **Request**: `PUT /api/v1/employees/:id`\n\n    ```json\n{\n    \"employeeName\": \"John Smith\",\n    \"employeeEmail\": \"johnsmith@example.com\",\n    \"employeePhone\": \"111-222-3333\",\n    \"employeeDesignation\": \"Lead Developer\",\n    \"employeeSalary\": 85000,\n    \"employeeLocation\": \"San Francisco\"\n}\n```\n\n\n### Delete Employee\n\n    **Request**: `DELETE /api/v1/employee/:id`\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintegeralex%2Femployeedash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintegeralex%2Femployeedash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintegeralex%2Femployeedash/lists"}