Shortly - Modern URL Shortener

Overview

Shortly is a production-ready URL shortening platform built with the MERN stack. It combines powerful link management capabilities with comprehensive analytics, secure authentication (JWT + OAuth), and a modern glass-morphism UI. The platform enables users to create custom short URLs, track detailed analytics (clicks, devices, browsers, referrers), and manage links through an intuitive dashboard.

Technical Architecture

Backend (Node.js + Express + MongoDB)

The backend is architected with production-grade patterns:

• Modular Architecture: Clean separation with controllers, services, and helpers
• Data Models: Mongoose schemas for User, Link, and Analytics
• Middleware Pipeline: Authentication, validation, and security layers
• Analytics Engine: Dedicated pipeline using express-useragent for tracking
• OAuth Flows: GitHub and Google login integration
• RESTful API: Clean, documented API endpoints
• Security Layer: JWT auth, rate limiting, helmet, and input sanitization
• Database Design: Optimized MongoDB schemas with proper indexing

The backend handles short link generation, redirects, authentication flows, analytics logging, and security enforcement.

Frontend (React + Vite + Redux Toolkit)

• State Management: Redux Toolkit with slices and async thunks for global state
• Component Architecture: Modular, reusable components with protected routes
• API Layer: Axios service layer with interceptors for auth token management
• Styling: Tailwind CSS with custom glass-morphism utilities
• UI/UX: Modal-based interactions, real-time updates, responsive design

Key Features

Link Management

• Instant URL shortening with custom slug support
• Link expiration controls and real-time editing
• Search and filter functionality (date, popularity, custom criteria)
• Dashboard for centralized link management

Analytics Dashboard

• Real-time click tracking and monitoring
• Device breakdown (mobile, desktop, tablet)
• Browser and referrer tracking
• Time-based trend visualization with dynamic charts

Security & Authentication

• JWT tokens stored in httpOnly cookies (XSS protection)
• OAuth 2.0 integration with Google and GitHub
• Bcrypt password hashing
• Rate limiting and CORS configuration
• Protected routes with auth state persistence

Technical Challenges & Solutions

OAuth Cookie Management

Challenge: Authentication cookies not persisting after OAuth login, causing redirect loops.

Solution:

• Configured cookies with SameSite=none and Secure=true for cross-domain OAuth flows
• Implemented environment-specific cookie settings (dev vs production)
• Added withCredentials: true to CORS configuration
• Validated redirect URIs on OAuth provider dashboards

Production Deployment

Challenge: Multiple deployment issues on Vercel including 404 errors, broken OAuth, and cookie persistence problems.

Solution:

• Created vercel.json with proper SPA routing rewrites
• Updated OAuth redirect URIs for production URLs
• Set NODE_ENV=production with environment-specific configurations
• Configured HTTPS-only cookies with proper CORS whitelist

Real-time Analytics

Challenge: Tracking analytics without impacting redirect performance.

Solution:

• Implemented asynchronous analytics logging using middleware
• Created separate Analytics collection with indexed fields
• Used batch updates to reduce database writes
• Added caching layer for frequently accessed data

JWT Cookie Persistence

Challenge: Cookies not persisting across requests due to environment misconfigurations.

Solution:

• Implemented environment-aware cookie configuration
• Added withCredentials: true to all Axios requests
• Created debugging middleware for development environment
• Documented cookie requirements for both environments

Performance Optimizations

• Code Splitting: Route-based dynamic imports
• Database Indexing: Optimized MongoDB queries for fast lookups
• Caching Strategy: Browser and API response caching
• Debounced Search: Reduced API calls with input debouncing
• Lazy Loading: On-demand component loading

Key Learnings

• OAuth 2.0 Implementation: Mastered OAuth flows, redirect URI management, and cross-domain cookie handling
• Security Best Practices: Implemented production-grade security (JWT, CORS, rate limiting, input validation)
• MERN Stack Architecture: Built scalable full-stack application with proper separation of concerns
• Production Deployment: Debugged real-world deployment issues (environment configs, SPA routing, HTTPS requirements)
• State Management: Effectively used Redux Toolkit for complex state management
• Cookie Security: Learned intricacies of httpOnly, SameSite, and Secure flags in different environments

Technical Stack Justification

• MongoDB: Flexible schema for analytics data and fast writes for link tracking
• Express + Node.js: Efficient for I/O-heavy operations (redirects, analytics logging)
• React + Redux: Complex state management for dashboard and real-time updates
• JWT + OAuth: Secure, stateless authentication with social login convenience
• Vite: Fast development builds and optimized production bundles