https://github.com/codemaker46/shipsy
Shipsy is a next-generation Shipment Management System that simplifies tracking, monitoring, and reporting. It delivers real-time shipment visibility through a modern dashboard with interactive insights, secure authentication, and complete CRUD functionality.
https://github.com/codemaker46/shipsy
Last synced: 4 months ago
JSON representation
Shipsy is a next-generation Shipment Management System that simplifies tracking, monitoring, and reporting. It delivers real-time shipment visibility through a modern dashboard with interactive insights, secure authentication, and complete CRUD functionality.
- Host: GitHub
- URL: https://github.com/codemaker46/shipsy
- Owner: CodeMaker46
- Created: 2025-10-03T18:26:05.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-10-04T06:56:59.000Z (4 months ago)
- Last Synced: 2025-10-04T08:37:12.584Z (4 months ago)
- Language: JavaScript
- Size: 82 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# 📦 Shipsy - Shipment Management System
> A modern Shipment Management System built to streamline shipment tracking, status monitoring, and reporting. Shipsy provides real-time visibility into shipments with a clean dashboard, interactive statistics, secure authentication, and full CRUD capabilities.
## 🌟 Live Demo
- **Client:** [https://voluble-lokum-7455da.netlify.app/](https://voluble-lokum-7455da.netlify.app/)
- **Server API:** [https://ship-server-11lf.onrender.com](https://ship-server-11lf.onrender.com)
## ✨ Features
- JWT-based Authentication – Secure login/signup system
- Interactive Dashboard – Real-time statistics and shipment overview
- Shipment CRUD – Complete shipment lifecycle management
- Advanced Filtering – Search and filter shipments by title, status, creator, and ID
- Pagination – Efficient data browsing
- Responsive Design – Works seamlessly on all devices
- Protected Routes – Token-gated routes on the client
- Modern UI/UX – Tailwind CSS + Framer Motion
## 🚀 Tech Stack
### Frontend
- React (Vite)
- Tailwind CSS
- React Router
- Framer Motion
- React Toastify
### Backend
- Node.js + Express.js
- MongoDB + Mongoose
- JWT authentication (jsonwebtoken)
- Password hashing (bcrypt)
- CORS middleware
### DevOps & Deployment
- Frontend: Vercel
- Backend: Render
- Database: MongoDB Atlas
- Version Control: Git & GitHub
## 📋 Entity Schema
### Shipment Model
| Field | Type | Required | Description |
|------|-----|---------|-------------|
| `title` | String | ✅ | Shipment title/description |
| `status` | Enum | ✅ | `NEW`, `IN-TRANSIT`, `DELIVERED`, `CANCELLED` |
| `fragile` | Boolean | ✅ | Indicates if shipment is fragile |
| `weightKg` | Number | ✅ | Weight in kilograms |
| `distanceKm` | Number | ✅ | Distance in kilometers |
| `baseRate` | Number | ✅ | Base shipping rate |
| `cost` | Number | Auto | Calculated: `weightKg * baseRate + distanceKm * 0.5` |
| `createdBy` | Embedded | ✅ | `{ _id, username }` of creator |
| `createdAt` | Date | Auto | Creation timestamp |
| `updatedAt` | Date | Auto | Last update timestamp |
## 📁 Project Structure
```
shipsy/
├── app/
│ ├── client/ # React frontend (Vite)
│ │ ├── public/ # Static assets
│ │ └── src/
│ │ ├── components/
│ │ │ ├── About.jsx
│ │ │ ├── AllShipments.jsx
│ │ │ ├── Chatbot.jsx
│ │ │ ├── CreateShipmentModel.jsx
│ │ │ ├── DashboardNavbar.jsx
│ │ │ ├── DashboardStats.jsx
│ │ │ ├── DashboardStatsCard.jsx
│ │ │ ├── DeleteConfirmationModal.jsx
│ │ │ ├── EditShipmentModal.jsx
│ │ │ ├── Features.jsx
│ │ │ ├── MyShipments.jsx
│ │ │ ├── Pagination.jsx
│ │ │ ├── Pricing.jsx
│ │ │ ├── ShipmentAction.jsx
│ │ │ ├── ShipmentTable.jsx
│ │ │ └── landing.jsx
│ │ ├── config/ # API base URL (config.js)
│ │ ├── App.jsx # Routes
│ │ └── main.jsx
│ │
│ └── server/ # Express backend
│ ├── config/
│ │ └── db.js # MongoDB connection
│ ├── middleware/
│ │ └── auth.js # JWT auth middleware
│ ├── models/
│ │ ├── User.js
│ │ └── Shipment.js
│ ├── routes/
│ │ ├── Auth.js
│ │ ├── Home.js # Home/health/docs
│ │ └── Shipment.js # Shipment CRUD routes
│ └── index.js # Server entry
│
└── docs/
├── architecture.md
├── ai-usages.md
└── ShipsyAPI.postman_collection.json
```
## 🛠️ Installation & Setup
### Prerequisites
- Node.js (v18+ recommended)
- MongoDB Atlas account
- Git
### 1) Clone the repository
```bash
git clone https://github.com/CodeMaker46/shipsy.git
cd shipsy
```
### 2) Backend setup
```bash
cd app/server
npm install
```
Create `.env` in `app/server/`:
```env
MONGODB_URI=
JWT_SECRET=
PORT=5001
```
Run the server:
```bash
npm run dev # or: npm start
# Server: http://localhost:5001
```
### 3) Frontend setup
```bash
cd ../../app/client
npm install
```
Create `.env` in `app/client/` (optional; defaults to http://localhost:5001):
```env
VITE_BACKEND_URL=http://localhost:5001
```
Run the client:
```bash
npm run dev
# App: http://localhost:5173
```
## 📊 API Endpoints
| Endpoint | Method | Description | Auth |
|---------|--------|-------------|------|
| `/` | GET | Home route | ❌ |
| `/auth/login` | POST | User login | ❌ |
| `/auth/signup` | POST | User registration | ❌ |
| `/auth/fetch` | GET | Get user profile | ✅ |
| `/shipment/` | GET | Get all shipments | ✅ |
| `/shipment/my` | GET | Get current user shipments | ✅ |
| `/shipment/:id` | GET | Get a shipment by id | ✅ |
| `/shipment/` | POST | Create shipment | ✅ |
| `/shipment/:id` | PATCH | Update shipment | ✅ |
| `/shipment/:id` | DELETE | Delete shipment | ✅ |
## 🖼️ Demo
## Landing Pages
## Dashboard
## All Shipments
## My Shipments
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch
```bash
git checkout -b feature/amazing-feature
```
3. Commit your changes
```bash
git commit -m "feat: add amazing feature"
```
4. Push and open a Pull Request
```bash
git push origin feature/amazing-feature
```
Guidelines
- Match existing code style and formatting
- Write clear commit messages
- Update docs when needed
## 🔐 Environment Variables
### Backend (.env)
```env
MONGODB_URI=your_mongob_atlas_connection_string
JWT_SECRET=your_jwt_secret_key
PORT=5001
```
### Frontend (.env)
```env
VITE_BACKEND_URL=http://localhost:5001
```
## 🚀 Deployment
### Frontend (Vercel)
- Set env: `VITE_BACKEND_URL=https://your-backend-url.com`
### Backend (Render)
- Set env: `MONGODB_URI`, `JWT_SECRET`, `PORT`
---
⭐ Star this repository if it helped you!
Built with ❤️ using React, Express.js, and MongoDB