SupplyNet SCMS - Supply Chain Management System

A full-stack web application for managing supply chain operations, built with React (frontend) and Node.js/Express (backend) with MongoDB database.

Features

Frontend (React + Vite + Tailwind CSS)

• Authentication - Secure login/register with JWT tokens
• Supplier Management - Add, view, edit, and delete suppliers
• Shipment Management - Track shipments with full CRUD operations
• Delivery Management - Manage deliveries with status tracking
• Analytics & Reports - Generate daily, weekly, and monthly reports
• Responsive UI - Modern, mobile-friendly interface with Tailwind CSS

Backend (Node.js + Express + MongoDB)

• RESTful API with full CRUD operations
• MongoDB integration with Mongoose ODM
• JWT-based authentication with bcrypt password hashing
• User registration and login endpoints
• Protected route middleware
• Error handling middleware
• CORS enabled for cross-origin requests

Project Structure

supply/
├── frontend-project/     # React frontend application
│   ├── src/
│   │   ├── components/   # React components
│   │   ├── App.jsx       # Main application component
│   │   ├── main.jsx      # Entry point
│   │   └── styles.css    # Global styles
│   ├── index.html
│   ├── package.json
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── .env              # Environment variables
│
├── backend-project/      # Node.js backend application
│   ├── src/
│   │   ├── config/       # Database configuration
│   │   ├── models/       # MongoDB models
│   │   ├── routes/       # API routes
│   │   ├── middleware/   # Express middleware
│   │   └── index.js      # Server entry point
│   ├── package.json
│   ├── .env              # Environment variables
│   └── .env.example      # Environment template
│
└── README.md             # This file

Prerequisites

• Node.js (v18 or higher)
• MongoDB (v6 or higher, or MongoDB Atlas account)
• npm or yarn

Installation & Setup

1. Clone or navigate to the project directory

cd supply

2. Backend Setup

# Navigate to backend directory
cd backend-project

# Install dependencies
npm install

# Copy environment example and configure
cp .env.example .env
# Edit .env with your MongoDB connection string

# Start the backend server
npm run dev

The backend will start on http://localhost:7008

3. Frontend Setup

Open a new terminal:

# Navigate to frontend directory
cd frontend-project

# Install dependencies
npm install

# Start the development server
npm run dev

The frontend will start on http://localhost:5173

Environment Configuration

Backend (.env)

PORT=7008
MONGODB_URI=mongodb://localhost:27017/scms
JWT_SECRET=your-secret-key-here
DEFAULT_USER=admin
DEFAULT_PASSWORD=admin123

Frontend (.env)

VITE_API_URL=http://localhost:7008

Authentication

The application includes a complete authentication system:

Default Admin User

On first run, you can initialize a default admin user by calling:

curl -X POST http://localhost:7008/api/auth/init-default

Or simply use the default credentials: admin / admin123

Register a New User

1. Click "Sign up" on the login page
2. Enter a username and password (min 6 characters)
3. After registration, log in with your new credentials

How It Works

• Passwords are hashed using bcrypt before storage
• JWT tokens are issued on login (valid for 8 hours)
• Tokens are stored in localStorage and sent with each API request
• Protected routes redirect unauthenticated users to login

API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - User login (returns JWT token)
• POST /api/auth/init-default - Initialize default admin user
• GET /api/auth/me - Get current user info (protected)

Suppliers

• POST /api/suppliers - Create supplier
• GET /api/suppliers - Get all suppliers
• PUT /api/suppliers/:supplierCode - Update supplier
• DELETE /api/suppliers/:supplierCode - Delete supplier

Shipments

• POST /api/shipments - Create shipment
• GET /api/shipments - Get all shipments
• PUT /api/shipments/:shipmentNumber - Update shipment
• DELETE /api/shipments/:shipmentNumber - Delete shipment

Deliveries

• POST /api/deliveries - Create delivery
• GET /api/deliveries - Get all deliveries
• PUT /api/deliveries/:deliveryCode - Update delivery
• DELETE /api/deliveries/:deliveryCode - Delete delivery

Reports

• GET /api/reports/daily?date=YYYY-MM-DD - Daily report
• GET /api/reports/weekly?start=YYYY-MM-DD&end=YYYY-MM-DD - Weekly report
• GET /api/reports/monthly?month=YYYY-MM - Monthly report

Available Scripts

Frontend

| Script | Description | |--------|-------------| | npm run dev | Start development server | | npm run build | Build for production | | npm run preview | Preview production build | | npm run lint | Run ESLint |

Backend

| Script | Description | |--------|-------------| | npm run dev | Start server with auto-reload | | npm start | Start server in production mode |

Technology Stack

Frontend

• React 19 - UI library
• Vite - Build tool and dev server
• React Router v7 - Client-side routing
• Tailwind CSS - Utility-first CSS framework
• Axios - HTTP client

Backend

• Node.js - Runtime environment
• Express - Web framework
• MongoDB - Database
• Mongoose - MongoDB object modeling
• JWT - Authentication tokens
• bcrypt - Password hashing

Development

1. Start MongoDB (if running locally):

   mongod

2. Start the backend:

   cd backend-project && npm run dev

3. Start the frontend (in a new terminal):

   cd frontend-project && npm run dev

4. Open your browser to http://localhost:5173

Building for Production

Frontend

cd frontend-project
npm run build
# Production files will be in dist/

Backend

cd backend-project
npm start

License

MIT