System Design Document (Frontend)
1. Introduction
This document outlines the architectural and design choices made while developing the frontend for
the URL Shortener application. The goal was to deliver a scalable, maintainable, and user-friendly
interface while integrating with external services via APIs.
2. Architecture Overview
• Framework: React (functional components + hooks).
• UI Layer: Modular component-based design for reusability.
• State Management: Local component state and props for simplicity (no global store required
at current scale).
• API Communication: Fetch API used for asynchronous calls to external services.
• Logging: Client-side integration with a logging endpoint (via middleware utility).
Flow:
User → React UI (Form + Display Components) → Utility Functions → External API (logging/shortener
service).
3. Key Design Decisions
1. Componentization: Split the UI into clear functional components (input form, shortened URL
display, alert messages).
2. Hooks-based State: Used useState and useEffect for lightweight state management.
3. Reusable Utilities: API interactions (e.g., shortenUrl, Log) moved into a utils/ folder for better
maintainability.
4. Error Handling & Alerts: Errors (like invalid URL, CORS issues, or failed API calls) trigger user-
friendly alerts.
5. Scalability Consideration: Although minimal now, components and utilities are structured to
allow expansion (e.g., adding authentication, analytics).
4. Data Modeling (Frontend State)
Frontend doesn’t persist data in a database, but local state is structured as:
inputUrl: "https://example.com",
shortUrl: "http://short.ly/abc123",
expiry: "2025-09-01T10:30:00Z",
error: null
• inputUrl: User-entered long URL.
• shortUrl: Generated shortened URL.
• expiry: Calculated expiry time for the URL.
• error: Captures API or validation issues.
5. Technology Selections & Justifications
• React: Component-driven, efficient rendering, large ecosystem.
• Fetch API: Native, lightweight option for handling async requests.
• Plain CSS / React styling: Keeps UI simple and maintainable.
• Utility Layer: Encapsulates API and logging, separating concerns from UI.
6. Assumptions
• A backend service exists to handle actual URL shortening and logging (mocked in
development).
• CORS and authentication are expected to be configured on the backend, not frontend.
• Users are expected to access via modern browsers with ES6 support.
7. Scalability & Maintainability
• Scalable UI: Components can be extended or reused for new features.
• Maintainability: Clear folder structure (components/, utils/, assets/).
• Future Extensions: Theme support, global state management (Redux/Zustand), and
advanced error reporting.
