MERN URL Shortener

📄 Introduction

MERN URL Shortener is a full-stack web application that allows users to shorten long URLs efficiently. It is built using the MERN (MongoDB, Express.js, React, Node.js) stack + TypeScript, providing a seamless user experience with a modern frontend and a robust backend API. The application allows users to create, copy, and delete short URLs easily.

🛠️ Features

Frontend

• User-Friendly Interface: Built with React, featuring a clean and responsive UI.
• Shorten URLs: Users can input a long URL and generate a short URL instantly.
• Copy to Clipboard: Users can copy the generated short URL with a single click.
• Delete URLs: Users can delete shortened URLs, with a confirmation prompt before deletion.
• Table View: Displays all the generated short URLs in a structured format.

Backend

• RESTful API: Built with Node.js and Express.js to handle URL shortening and data management.
• MongoDB Database: Stores original and shortened URLs efficiently.
• Validation & Error Handling: Ensures valid URLs are processed and appropriate errors are returned.
• CORS Support: Allows secure communication between frontend and backend.
• Environment Variables: Uses .env to store sensitive configuration data.

🗂️ Project Structure

mern-url-shortener/
│── backend/
│   ├── dist/
│   ├── node_modules/
│   ├── src/
│   │   ├── config/
│   │   │   ├── allowedOrigins.ts
│   │   │   ├── corsOptions.ts
│   │   │   ├── dbConnection.ts
│   │   ├── controllers/
│   │   │   ├── shortUrl.controllers.ts
│   │   ├── models/
│   │   │   ├── ShortUrl.model.ts
│   │   ├── routes/
│   │   │   ├── shortUrl.routes.ts
│   │   ├── utils/
│   │   │   ├── validateUrl.ts
│   │   ├── server.ts
│   ├── .env
│   ├── .gitignore
│   ├── nodemon.json
│   ├── package-lock.json
│   ├── package.json
│   ├── tsconfig.json
|
|── frontend/
    ├── node_modules/
    ├── public/
    │   ├── css/
    │   ├── sass/
    ├── src/
    │   ├── assets/
    │   │   ├── bg.webp
    │   │   ├── react.svg
    │   ├── components/
    │   │   ├── Container/Container.tsx
    │   │   ├── DataTable/DataTable.tsx
    │   │   ├── Footer/Footer.tsx
    │   │   ├── Form/Form.tsx
    │   │   ├── Header/Header.tsx
    │   │   ├── Icons/
    │   │   │   ├── CopyIcon.tsx
    │   │   │   ├── DeleteIcon.tsx
    │   ├── helpers/
    │   │   ├── Constants.ts
    │   ├── interface/
    │   │   ├── UrlData.ts
    │   ├── App.tsx
    │   ├── index.css
    │   ├── main.tsx
    │   ├── vite-env.d.ts
    ├── .env
    ├── .gitignore
    ├── eslint.config.js
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── readme.md
    ├── tailwind.config.js
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vite.config.json

🛰️ Technologies Used

Frontend

• React: UI library for building interactive user interfaces.
• TypeScript: Allows specifying the types of data being passed around within the code.
• Vite: Fast development and build tool for modern frontend projects.
• TailwindCSS: Utility-first CSS framework for styling.
• SASS: CSS preprocessor for enhanced styling capabilities. A personal preference I have.
• Axios: HTTP client for making API requests.
• React Router: Enables routing within the React application.
• React Icons: Provides a collection of icons for UI enhancements.
• ESLint: Linter for maintaining clean and consistent TypeScript and JavaScript code.

Backend

• Node.js: JavaScript runtime for server-side development.
• TypeScript: Allows specifying the types of data being passed around within the code.
• Express.js: Minimalist web framework for building web applications.
• MongoDB: Non-relational document database for agile development.
• Mongoose: Library used to manage data in MongoDB and Node.js.
• dotenv: For managing environment variables.
• Nano ID: To create unique file names or identifiers within the file system.
• Nodemon: For development convenience with automatic server restarts.

📋 Installation

Prerequisites

• Node.js (latest LTS version)
• MongoDB (local or cloud instance)

Setup

1. Clone the repository

git clone https://github.com/MartinXCVI/mern-url-shortener.git
cd mern-url-shortener

2. Install dependencies

Backend

cd backend
npm install

Frontend

cd ../frontend
npm install

3. Configure environment variables

Create a .env file in the backend and frontend folders with the required configurations.

Backend

The API requires a MongoDB connection string:

MONGO_URI=mongodb+srv://<username>:<password>@<cluster_name>.mongodb.net/<database_name>?retryWrites=true&w=majority

Frontend

This variable defines the backend API URL

VITE_SERVER_URL=http://localhost:5000/api

4. Run the project

Backend

cd backend
npm start

Frontend

cd ../frontend
npm run dev

📑 Documentation Links

• MERN URL Shortener's API documentation
• MERN URL Shortener's frontend documentation

📚 Learn More

• Node.js latest documentation
• React official website
• Nodemon project website
• Dotenv repository
• Vite guides
• Getting started with Express.js
• TailwindCSS installation guides
• SASS documentation
• Dotenv repository
• MongoDB documentation
• Mongoose documentation
• Axios documentation
• React Router NPM package
• Nano ID NPM package page
• React Icons repository

📜 License

This project is licensed under the MIT License.

🧑‍💻 Developer

• MartinXCVI