Unit Converter

A full-stack unit conversion web app built with the MERN stack (MongoDB, Express.js, React, Node.js).

Tech Stack

Layer	Technology	Version
Frontend	React + Vite	React 18
Backend	Node.js + Express	Node 18+
Database	MongoDB + Mongoose	v8+
Dev Tools	Nodemon	v3+

Features

• Convert units across 5 categories: Length, Weight, Temperature, Volume, Speed
• Real-time conversion with 400ms debounce on input change
• Conversion history saved to MongoDB with timestamps
• Delete individual history entries
• Responsive UI with clean table-based history view
• RESTful API with input validation and error handling
• Vite proxy configured — no hardcoded API URLs in frontend

Supported Units

Category	Units
Length	mm, cm, m, km, inch, foot, yard, mile
Weight	mg, g, kg, lb, oz, ton
Temperature	Celsius, Fahrenheit, Kelvin
Volume	ml, l, cup, pint, quart, gallon
Speed	m/s, km/h, mph, knot

Project Structure

Unit_Converter/
├── client/                    # React frontend (Vite)
│   ├── index.html
│   ├── vite.config.js
│   ├── package.json
│   └── src/
│       ├── components/
│       │   ├── Converter.jsx  # Conversion form with real-time results
│       │   └── History.jsx    # History table with delete
│       ├── App.jsx
│       ├── main.jsx
│       └── index.css
├── server/                    # Node/Express backend
│   ├── models/
│   │   └── Conversion.js      # Mongoose schema
│   ├── routes/
│   │   └── convert.js         # API routes + conversion logic
│   ├── .env                   # Environment variables
│   ├── index.js               # Entry point
│   └── package.json
└── README.md

Prerequisites

• Node.js v18+
• npm v9+
• MongoDB v6+ (local) or a MongoDB Atlas cluster

Getting Started

1. Clone the repo

git clone https://github.com/Basant1Saini/Unit_Converter.git
cd Unit_Converter

2. Setup environment variables

The server/.env file is pre-configured for local MongoDB:

PORT=5000
MONGO_URI=mongodb://localhost:27017/unit_converter

For MongoDB Atlas, replace MONGO_URI:

MONGO_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/unit_converter

3. Install dependencies

# Backend
cd server && npm install

# Frontend
cd ../client && npm install

4. Run the app

# Start backend (from server/)
npm run dev

# Start frontend (from client/) — in a separate terminal
npm run dev

• Frontend: http://localhost:5173
• Backend: http://localhost:5000

API Endpoints

Method	Endpoint	Description
POST	/api/convert	Perform a conversion
GET	/api/history	Get last 50 conversions
DELETE	/api/history/:id	Delete a history entry

POST /api/convert

Request:

{
  "category": "Length",
  "fromUnit": "km",
  "toUnit": "mile",
  "value": 10
}

Response:

{
  "result": 6.213712,
  "id": "64f1a2b3c4d5e6f7a8b9c0d1"
}

GET /api/history

Response:

[
  {
    "_id": "64f1a2b3c4d5e6f7a8b9c0d1",
    "category": "Length",
    "fromUnit": "km",
    "toUnit": "mile",
    "value": 10,
    "result": 6.213712,
    "createdAt": "2024-01-15T10:30:00.000Z"
  }
]

Key Dependencies

Backend (server/package.json)

Package	Purpose
express	HTTP server & routing
mongoose	MongoDB ODM
dotenv	Environment variables
cors	Cross-origin requests
nodemon	Auto-restart on changes

Frontend (client/package.json)

Package	Purpose
react	UI library
axios	HTTP requests to API
vite	Dev server & bundler
@vitejs/plugin-react	React support for Vite

Scripts

Location	Command	Description
server/	npm run dev	Start with nodemon
server/	npm start	Start without nodemon
client/	npm run dev	Start Vite dev server
client/	npm run build	Production build
client/	npm run preview	Preview production build

Troubleshooting

• MongoDB connection error – Ensure MongoDB is running locally (mongod) or your Atlas URI is correct in server/.env
• CORS error – Backend has cors middleware enabled; frontend uses Vite proxy (/api → http://localhost:5000)
• Port conflict – Change PORT in server/.env; Vite proxy in client/vite.config.js will need updating too

License

MIT