Link24 - Full-Stack URL Shortener

Project Overview

Link24 is a comprehensive, full-stack URL shortening service designed to provide both anonymous and registered users with a seamless link management experience. While anonymous users can quickly generate temporary short links, registered users unlock a suite of powerful features, including a personal dashboard with link history, custom slugs, expiration date management, and click tracking. The project is architected as a decoupled system with a Next.js frontend, a Node.js/Express backend API, and a MongoDB database, all containerized with Docker for scalability and ease of deployment.

The Challenge

The primary challenge was to design and build a secure, scalable, and multi-featured web application from the ground up. This involved creating a stateless REST API with secure JWT-based authentication, developing an intuitive and responsive user interface with React and Next.js, and establishing a robust DevOps workflow. A key architectural goal was to ensure service independence and automate the testing and build processes using a CI/CD pipeline.

Key Features

• User Authentication: Secure user registration and login system using JWT and bcrypt for password hashing.
• Public Link Shortening: Anonymous users can create short links with a randomly generated slug and a default 30-day expiration.
• Authenticated User Dashboard: Logged-in users have access to a history of all their created links.
• Custom Link Management: Users can define custom, human-readable slugs for their short links.
• Expiration Date Control: Authenticated users can set a custom expiration period for each link.
• CRUD Operations: Full capabilities to create, read, update, and delete personal links.
• Click Tracking: The system counts and displays the number of clicks each short link receives.

Technical Deep Dive

Frontend The user interface was built with Next.js and React, creating a fast, server-rendered application. The component-based architecture ensures a maintainable and reusable codebase. Tailwind CSS was utilized for rapid, utility-first styling, enabling the creation of a modern and responsive design. End-to-end testing was implemented with Cypress to guarantee the reliability of critical user flows like registration, login, and link creation.

Backend The backend is a RESTful API powered by Node.js and Express.js. It follows a clean, service-oriented architecture, separating routing, controller logic, and business logic for clarity and testability. Mongoose serves as the ODM to interact with the MongoDB database, modeling user and link data. User security is paramount, with JWT for managing stateless authentication and bcrypt for securely hashing passwords. A clever use of MongoDB's TTL (Time-To-Live) index on the expiresAt field automates the deletion of expired links, ensuring efficient data management. The API is thoroughly tested with Jest and Supertest.

DevOps/Deployment The entire application is containerized using Docker and orchestrated with Docker Compose. This setup defines three independent services (frontend, backend, database), simplifying the development environment and making the application portable and easy to deploy. A GitLab CI pipeline (.gitlab-ci.yml) automates the entire CI/CD process. On every push, the pipeline automatically installs dependencies, runs the backend and frontend test suites, and builds the applications, ensuring code quality and integration are continuously verified.

Personal Learnings

This project was an incredible deep dive into full-stack development and modern DevOps practices. I gained significant experience in designing and building secure REST APIs with Node.js, including implementing robust authentication and data validation. Working with Next.js and React solidified my frontend skills, particularly in state management and building responsive UIs. The most valuable takeaway was implementing a complete CI/CD workflow with Docker and GitLab CI, which taught me the importance of containerization and automation in building reliable and scalable software.