Appearance
Step-by-Step Build Order
Rebuilding the URL Shortener Engine from Scratch
Phase 1: Express 5 Foundation & Database Connection
- Initialize modern ES module project (
"type": "module"inbackend/package.json). - Install
express5.1.0,mongoose8.1.0,nanoid5.1.5,dotenv,cors,cookie-parser. - Create
backend/src/config/monogo.config.jswith auto-reconnect listeners. - Setup
backend/app.jswith middleware chain and centralized error handler.
Phase 2: Schema Design & Data Access Object (DAO) Layer
- Build
backend/src/models/short_url.model.jswith unique compound index onshort_url. - Build
backend/src/models/user.model.jswith email uniqueness and bcrypt password hashing. - Implement
backend/src/dao/short_url.jsencapsulatingsaveShortUrl,getShortUrl, and atomic click increments.
Phase 3: Service Layer & Nanoid Logic
- Implement
backend/src/services/short_url.service.jswith Nanoid 7-char generation. - Add custom slug conflict detection and reserved path filtering.
Phase 4: Controllers & Redirection Handlers
- Build
short_url.controller.jsfor/api/createand/:idHTTP 302 redirection. - Build
auth.controller.jsanduser.controller.js. - Wire route modules in
backend/src/routes/.
Phase 5: React 19 Frontend & State Management
- Initialize Vite project with React 19 and Tailwind CSS v4.
- Install
@reduxjs/toolkit,react-redux,@tanstack/react-query,@tanstack/react-router. - Configure Axios client with
withCredentials: true. - Build
ShortenForm,UrlTable, andAnalyticsModalcomponents.