Skip to content

anothercoder-nik/URLshortner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 

Repository files navigation

URL Shortener

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).

Features

  • ✂️ 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

Architecture

This project follows a clean, modular architecture that makes it production-ready:

Backend Architecture

  • 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

Frontend Architecture

  • 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

Tech Stack

Frontend

  • 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

Backend

  • Node.js with Express
  • MongoDB with Mongoose ODM
  • JWT for authentication
  • RESTful API architecture

Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • MongoDB (local or Atlas)
  • Git

Installation

  1. Clone the repository
git clone https://github.com/anothercoder-nik/URLshortner.git
cd URLshortner
  1. Install backend dependencies
cd Backend
npm install
  1. 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/
  1. Install frontend dependencies
cd ../Frontend
npm install
  1. Start the development servers

Backend:

cd Backend
npm run dev

Frontend:

cd Frontend
npm run dev
  1. Open your browser and navigate to http://localhost:5173

Usage

Shortening a URL

  1. Enter a long URL in the input field
  2. Click "Shorten URL"
  3. Copy the shortened URL to share

Creating a Custom URL (Registered Users)

  1. Log in to your account
  2. Enter a long URL in the input field
  3. Enter your desired custom slug
  4. Click "Shorten URL"

Viewing Statistics

  1. Log in to your account
  2. View your dashboard to see all your shortened URLs and their click counts

API Endpoints

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

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages