Live Link- app.clipli.sbs (Note: After first request, retry again to get backend active)
A modern, full-stack URL shortening service built with the MERN stack (MongoDB, Express, React, Node.js).
- ✂️ Shorten long URLs with a single click
- 🔗 Create custom short URLs (for registered users)
- 📊 Track click statistics for your shortened links
- 👤 User authentication system
- 📱 Responsive design for desktop and mobile devices
- 🔒 Secure API with JWT authentication
This project follows a clean, modular architecture that makes it production-ready:
- Controller-Service-DAO Pattern: Separation of concerns with controllers handling requests, services containing business logic, and DAOs (Data Access Objects) for database operations
- Middleware-based Authentication: JWT verification through middleware for protected routes
- Error Handling: Centralized error handling with custom error classes
- Environment Configuration: Externalized configuration using dotenv
- Model-View-Controller (MVC): Clear separation between data models, business logic, and API endpoints
- Component-Based Structure: Reusable UI components for maintainability
- State Management: Centralized state with Redux Toolkit
- Data Fetching Layer: Abstracted API calls with React Query
- Route Management: Declarative routing with TanStack Router
- Responsive Design: Mobile-first approach with Tailwind CSS
This modular approach ensures:
- 🔄 Easy maintenance and updates
- 🔌 Scalability for additional features
- 🧪 Testability of individual components
- 🚀 Simplified deployment process
- 👥 Collaborative development with clear boundaries
- React 19
- Redux Toolkit for state management
- TanStack Router for routing
- TanStack Query for data fetching
- Tailwind CSS for styling
- Vite for fast development and building
- Node.js with Express
- MongoDB with Mongoose ODM
- JWT for authentication
- RESTful API architecture
- Node.js (v18 or higher)
- MongoDB (local or Atlas)
- Git
- Clone the repository
git clone https://github.com/anothercoder-nik/URLshortner.git
cd URLshortner
- Install backend dependencies
cd Backend
npm install
- Set up environment variables
Create a
.env
file in the Backend directory with the following variables:
MONGO_URL=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
BASE_URL=http://localhost:3000/
- Install frontend dependencies
cd ../Frontend
npm install
- Start the development servers
Backend:
cd Backend
npm run dev
Frontend:
cd Frontend
npm run dev
- Open your browser and navigate to
http://localhost:5173
- Enter a long URL in the input field
- Click "Shorten URL"
- Copy the shortened URL to share
- Log in to your account
- Enter a long URL in the input field
- Enter your desired custom slug
- Click "Shorten URL"
- Log in to your account
- View your dashboard to see all your shortened URLs and their click counts
Method | Endpoint | Description | Authentication |
---|---|---|---|
POST | /api/create | Create a new short URL | Optional |
GET | /:id | Redirect to the original URL | None |
POST | /api/auth/register | Register a new user | None |
POST | /api/auth/login | Log in a user | None |
POST | /api/user/urls | Get all URLs for a user | Required |
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Nanoid for generating unique IDs
- MongoDB Atlas for database hosting
- React for the frontend framework
- Express for the backend framework