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.

2.3 KiB Raw Permalink Blame History