url-shortener/frontend

URL Shortener Frontend

The frontend application for the URL Shortener, built with React and Vite.

Tech Stack

• Framework: React 19
• Build Tool: Vite
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: Shadcn UI
• Forms: React Hook Form + Zod
• Routing: React Router
• Tooling: Biome - Fast formatter and linter.

Architecture

The frontend is organized using a feature-based architecture to ensure scalability and maintainability:

src/
├── components/     # Shared UI components (buttons, inputs, etc.)
├── config/         # Configuration files
├── context/        # React Context providers (Auth, Theme, etc.)
├── features/       # Feature-specific code (Auth, Dashboard, etc.)
├── hooks/          # Custom React hooks
├── layouts/        # Page layouts (AuthLayout, DashboardLayout)
├── lib/            # Shared utilities and helpers
├── pages/          # Page components (mapped to routes)
└── routes.tsx      # Route definitions

Key Directories

• features/: Contains logic specific to a domain (e.g., auth, url). Each feature folder typically contains its own components, hooks, and services.
• components/ui/: Houses reusable UI components styled with Tailwind CSS and Shadcn UI.

Getting Started

Prerequisites

• Bun (latest version)

Installation

Install the dependencies:

bun install

Environment Setup

Ensure you have a .env file in the project root (or frontend root if running standalone) with the necessary variables (see root README.md).

Running the Server

Start the development server:

bun run dev

The application will be available at http://localhost:5173 (or the port specified by Vite).

Scripts

• bun run dev: Start development server.
• bun run build: Build for production.
• bun run preview: Preview production build.
• bun run lint: Lint code using Biome.
• bun run format: Format code using Biome.
• bun run check: Check code for formatting and linting errors.