A modern full-stack URL shortening application built with React, Node.js, Express, and MongoDB. It features a clean, responsive design and complete CRUD functionality.

• Create – Generate short URLs with optional titles and descriptions
• Read – View all your shortened URLs with detailed information
• Update – Edit existing URLs, titles, and descriptions
• Delete – Remove URLs you no longer need
• Modern UI – Responsive design with smooth animations
• Real-time Updates – Instant feedback with on-screen notifications
• Click Tracking – Monitor how many times each URL is accessed
• MongoDB Integration – Persistent, scalable data storage

• React 18 – Hooks-based modern React
• Tailwind CSS – Utility-first CSS framework
• Custom CSS – Gradients, animations, and modern UI patterns

• Node.js – JavaScript runtime
• Express.js – Web application framework
• MongoDB – NoSQL database
• Mongoose – MongoDB object modeling
• CORS – Cross-origin resource sharing

• Node.js v16+
• MongoDB (local or Atlas)
• npm or yarn package manager

1. Clone the repository

git clone <repository-url>
cd URL-Shortener-main

2. Install server dependencies

cd server
npm install

3. Install client dependencies

cd ../client
npm install

4. Environment Setup

server/.env

DATABASE_URL=mongodb://localhost:27017/url_shortener
BASE_URL=http://localhost:5000

client/.env

REACT_APP_API_URL=http://localhost:5000

5. Start MongoDB

• Local: Ensure the MongoDB service is running
• Atlas: Use your MongoDB Atlas connection string

6. Run the application

# Terminal 1 - Backend
cd server
npm run dev

# Terminal 2 - Frontend
cd client
npm start

7. Access the application

• Frontend → http://localhost:3000
• Backend API → http://localhost:5000

URL-Shortener-main/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # UI components
│   │   │   ├── Header.jsx
│   │   │   ├── Hero.jsx
│   │   │   ├── Main.jsx
│   │   │   ├── Shortener.jsx
│   │   │   └── Notification.jsx
│   │   ├── App.js
│   │   ├── index.js
│   │   └── index.css
│   └── package.json
├── server/                 # Node.js backend
│   ├── controllers/       # Business logic
│   ├── models/            # MongoDB schemas
│   ├── routes/            # API endpoints
│   ├── utils/             # Helper functions
│   ├── server.js          # Main server file
│   └── package.json
└── README.md

• Header – Minimal logo-based header
• Hero – Focused intro with a call-to-action
• Shortener Form – Full CRUD interface
• URL List – Card-based display with edit/delete actions
• Notifications – Real-time success/error feedback
• Statistics – Click tracking and analytics

• Update client/src/index.css or Tailwind config for colors, fonts, and animations
• Adjust component layouts for a unique look

• Add new fields to the URL schema in server/models/Url.js
• Extend API logic in server/controllers/url.js
• Add validation or authentication for advanced use cases

Frontend (React)

npm run build

Deploy to Vercel, Netlify, or other static hosting.

Backend (Node.js) Deploy to Heroku, Railway, Render, or any Node hosting. Update environment variables for production and ensure MongoDB connection is secure.

1. Fork the repository
2. Create a feature branch
3. Commit and push your changes
4. Submit a pull request

This project is licensed under the MIT License.

• Built with modern web technologies
• Responsive and accessible UI design
• End-to-end CRUD functionality with MongoDB persistence

If you want a shorter, portfolio-ready README (one that recruiters can scan in ~10 seconds), tell me and I’ll create it.