Skip to content

SETUP.md

Latest commit

 

History

History
332 lines (259 loc) · 6.81 KB

SETUP.md

File metadata and controls

332 lines (259 loc) · 6.81 KB

Setup & Installation Guide

Complete Step-by-Step Setup Instructions

Prerequisites Installation

  1. Install Node.js

    • Download from https://nodejs.org/ (LTS version recommended)
    • Verify installation: 
      node --version
npm --version

  2. Install MongoDB

    Option A: Local Installation

    Option B: MongoDB Atlas (Cloud)

Project Setup

1. Clone/Extract the Project

cd employee-management-system

2. Backend Setup

# Navigate to backend directory
cd backend

# Install dependencies
npm install

# Create .env file
cp .env.example .env

# Edit .env file with your MongoDB URI
# For local MongoDB:
# MONGODB_URI=mongodb://localhost:27017/employee-management
# 
# For MongoDB Atlas:
# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/employee-management

Start the backend:

npm run dev

Expected output:

MongoDB connected successfully
Server is running on http://localhost:5000

3. Frontend Setup

In a new terminal:

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

Expected output:

VITE v5.0.0  ready in 123 ms

➜ Local:   http://localhost:3000/
➜ press h to show help

Verify Installation

  1. Open Browser

  2. Test Login

  3. Check Network Tab in Browser DevTools

Common Issues & Solutions

Issue: "MongoDB connection failed"

Solution:

  • For local: Ensure mongod is running
  • For Atlas: Check connection string in .env
  • Verify firewall/VPN settings

Issue: "Port 3000 already in use"

Solution (Windows):

netstat -ano | findstr :3000
taskkill /PID <PID> /F

Solution (Mac/Linux):

lsof -i :3000
kill -9 <PID>

Issue: "Module not found"

Solution:

rm -rf node_modules
npm install

Issue: "VITE proxy not working"

Solution:

  • Ensure backend is running on port 5000
  • Update proxy in frontend/vite.config.js if using different port

Development Workflow

Terminal 1: Start Backend

cd backend
npm run dev

Terminal 2: Start Frontend

cd frontend
npm run dev

Terminal 3: MongoDB (if local)

mongod

Database Seeding (Optional)

To add sample data to MongoDB:

# Connect to MongoDB
mongosh

# Use the database
use employee-management

# Insert sample employee
db.employees.insertOne({
  name: "John Doe",
  email: "john@example.com",
  phone: "9876543210",
  department: "Engineering",
  role: "Senior Developer",
  salary: 120000,
  joiningDate: new Date("2020-01-15"),
  address: "123 Main Street",
  status: "active"
})

Production Deployment

Build Frontend

cd frontend
npm run build
# Output in: frontend/dist/

Deploy Frontend

  • Upload frontend/dist/ to hosting service (Netlify, Vercel, AWS S3, etc.)

Deploy Backend

  • Use services like Heroku, AWS EC2, DigitalOcean, Railway.app, etc.
  • Ensure MongoDB Atlas or managed database is accessible
  • Set environment variables on hosting platform

Example Heroku Deployment (Backend)

# Install Heroku CLI
heroku login

# Create Heroku app
heroku create your-app-name

# Set environment variables
heroku config:set MONGODB_URI=your-mongo-uri
heroku config:set PORT=5000

# Deploy
git push heroku main

Environment Variables

Backend (.env)

PORT=5000
MONGODB_URI=mongodb://localhost:27017/employee-management
NODE_ENV=development

Frontend (.env - create in frontend root)

VITE_API_URL=http://localhost:5000/api

API Testing Tools

Using Postman

  1. Download from https://www.postman.com/downloads/
  2. Import API collection (create manually or use Postman's tests)
  3. Test endpoints:

Using cURL

# Get all employees
curl http://localhost:5000/api/employees

# Create employee
curl -X POST http://localhost:5000/api/employees \
  -H "Content-Type: application/json" \
  -d '{"name":"Jane Doe","email":"jane@example.com","phone":"9876543211","department":"Sales","role":"Sales Manager","salary":100000,"joiningDate":"2021-03-20","address":"456 Oak Avenue"}'

Build Commands Reference

Command Directory Purpose
npm install backend/ or frontend/ Install dependencies
npm run dev backend/ Start backend (dev mode)
npm start backend/ Start backend (production)
npm run dev frontend/ Start frontend (dev mode)
npm run build frontend/ Build for production
npm run preview frontend/ Preview production build

Project File Structure

employee-management-system/
│
├── frontend/
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/        # Page components
│   │   ├── services/     # API integration
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── package.json
│   ├── vite.config.js
│   └── tailwind.config.js
│
├── backend/
│   ├── models/          # Mongoose schemas
│   ├── routes/          # Express routes
│   ├── server.js        # Express server
│   ├── package.json
│   └── .env
│
└── README.md

Next Steps After Setup

  1. Integrate Frontend with Backend

    • Replace mock data with API calls in components
    • Use /frontend/src/services/api.js for API calls
    • Add authentication if needed

  2. Add Features

    • Email notifications
    • Report generation
    • Data export (CSV/PDF)
    • Advanced filtering and sorting

  3. Optimize

    • Add caching strategies
    • Implement pagination
    • Database indexing
    • Code splitting

  4. Security

    • JWT authentication
    • Input validation
    • CORS configuration
    • Secure headers

  5. Testing

    • Unit tests (Jest)
    • Integration tests
    • E2E tests (Cypress/Playwright)
    • API testing

Useful Resources

Support

For detailed component documentation, check:

  • Frontend: /frontend/README.md
  • Backend: /backend/README.md

Happy Coding! 🚀