Short URL

A URL shortener like bit.ly. You paste a long link and get a short one that redirects to the original. If you create an account, all your links are saved in your profile with the number of clicks. I built it to practice a full-stack app with React + TypeScript on the frontend and Node.js + MongoDB on the backend.

Live demo: https://beamish-valkyrie-00af98.netlify.app

Features

• Shorten any valid URL
• Short link redirects to the original URL and counts clicks
• Register and login with JWT
• Profile page with all your links, click count and date
• Copy short or original link with one click

Built with

Client

• React 18 + TypeScript
• Vite
• Redux Toolkit
• React Router
• Material UI
• Axios
• Deployed on Netlify

Server

• Node.js + Express
• MongoDB + Mongoose
• JWT + bcryptjs
• shortid

How it works

sequenceDiagram
    participant Client
    participant Server
    participant MongoDB
    Client ->> Server: POST / (long url)
    Server ->> MongoDB: save url with new short id
    Server -->> Client: short url
    Client ->> Server: POST /urlId (short id)
    Server ->> MongoDB: find url, clicks + 1
    Server -->> Client: original url
    Client ->> Client: redirect to original url

Loading

How to run

You need Node.js and MongoDB (local or Atlas).

git clone https://github.com/IkboljonMe/short-url.git
cd short-url

Server

cd server
npm install
cp .env.example .env
npm run dev

Fill .env:

MONGO_URI=mongodb://localhost:27017/short-url
BASE=http://localhost:5173
JWT_SECRET_KEY=any_secret
JWT_EXPIRE=1d

BASE is the client address, it is used to build the short links. The server runs on http://localhost:3333

Client

Open a new terminal:

cd client
npm install
npm run dev

client/.env.local already points to http://localhost:3333. The app opens on http://localhost:5173

API

Method	Route	Description
POST	/	Shorten url, body: { origUrl, userId? }
POST	/urlId	Get original url by short id, body: { urlId }
POST	/register	Create account
POST	/login	Login, returns JWT
POST	/profile	User links, needs Authorization: Bearer <token>

Project structure

client/
  src/components   pages (Home, Login, Register, Profile, ...)
  src/Redirect.tsx redirects short link to original url
  redux/           store, user and url reducers
server/
  controllers/     auth and url logic
  models/          User and Url
  middlewares/     JWT check and error handler
  routes/

License

MIT, see LICENSE.

---

Made by IkboljonMe