Skip to main content

​
Quick Setup

This guide will walk you through setting up and running the Auction Platform Frontend locally.
1

Clone the Repository

First, clone the repository and navigate to the project directory:
git clone <repository-url>
cd auction-platform-frontend
2

Install Dependencies

Install all required dependencies using your preferred package manager:
npm install
3

Configure Environment

Create a .env file in the root directory with your API configuration:
.env
VITE_API_URL=http://localhost:3000/api
Make sure your backend API is running at the specified URL. The API client is configured in src/app/api/client.ts and includes automatic retry logic, timeout handling, and authentication.
4

Start Development Server

Launch the Vite development server:
npm run dev
The application will start at http://localhost:5173/

​
Available Scripts

The project includes several npm scripts for different tasks:
CommandDescription
npm run devStart the Vite development server
npm run buildBuild the application for production
npm run previewPreview the production build locally
npm run lintRun ESLint to check code quality
npm run storybookStart Storybook on port 6006
npm run build-storybookBuild Storybook for deployment
npm run analyzeAnalyze bundle size with visualizer

​
Using UI Components

The platform includes a comprehensive set of UI components in the src/shared/ui/ directory. Here’s how to use them:

​
Button Component

The Button component supports multiple variants and sizes: 
import { Button } from '@shared/ui/button/Button'

function MyComponent() {
  return (
    <>
      <Button variant="primary" size="md">
        Primary Action
      </Button>
      
      <Button variant="secondary" size="sm">
        Secondary Action
      </Button>
      
      <Button variant="danger" size="lg" block>
        Danger Action (Full Width)
      </Button>
      
      <Button variant="outline" disabled>
        Disabled Button
      </Button>
    </>
  )
}
Available Props:
  • variant: "primary" | "secondary" | "danger" | "outline"
  • size: "sm" | "md" | "lg"
  • block: boolean - Full width button
  • disabled: boolean

​
Typography Component

Render semantic HTML with consistent styling: 
import Typography from '@shared/ui/Typography/Typography'

function MyComponent() {
  return (
    <>
      <Typography as="h1" weight="bold">
        Page Title
      </Typography>
      
      <Typography as="p" size="text-base" weight="normal">
        This is a paragraph with base text size.
      </Typography>
      
      <Typography as="label" size="text-sm" weight="medium">
        Form Label
      </Typography>
    </>
  )
}
Available Props:
  • as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "label"
  • weight: "light" | "normal" | "medium" | "bold"
  • size: "text-base" | "text-md" | "text-sm" | "text-xs"

​
Exploring Components with Storybook

The project includes Storybook for interactive component development and testing.
1

Launch Storybook

Start the Storybook development server:
npm run storybook
Storybook will open in your browser at http://localhost:6006/
2

Browse Components

Explore the available components in the sidebar:
  • Button - All button variants and sizes
  • Typography - Text styling options
  • TextField - Input components
  • CardContainer - Card layouts
3

Test Interactions

Storybook includes accessibility testing and interaction tests powered by Vitest:
npm run test
All component stories are located alongside their respective components with the .stories.tsx extension. For example, see src/shared/ui/button/Button.stories.tsx.

​
Understanding the Architecture

The application uses modern React patterns:

​
Routing with TanStack Router

Routes are defined in the src/routes/ directory with automatic code splitting: 
// src/routes/__root.tsx
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'

const router = createRouter({ routeTree })
Route layouts:
  • _with-navbar.tsx - Pages with navigation bar (home)
  • _with-sidebar.tsx - Pages with sidebar (dashboard)
  • _without-navbar.tsx - Auth pages (login, signup, onboarding)

​
State Management with Zustand

Authentication state is managed with Zustand (src/app/store/auth/auth.store.ts): 
import { useAuthStore } from '@app/store/auth/auth.store'

function MyComponent() {
  const { user, logout } = useAuthStore()
  
  return (
    <div>
      <p>Welcome, {user?.name}</p>
      <button onClick={logout}>Logout</button>
    </div>
  )
}

​
API Client

The API client (src/app/api/client.ts:5-57) provides request utilities with built-in features:
  • Automatic authentication handling
  • Request timeout (30s default)
  • Retry logic for failed requests
  • Automatic logout on 401 responses
import { apiGET, apiPOST } from '@app/api/client'

// GET request
const data = await apiGET('/auctions')

// POST request with body
const result = await apiPOST('/auctions', {
  body: JSON.stringify({ title: 'New Auction' })
})

​
Next Steps

Component Library

Explore the complete UI component library in Storybook

Authentication

Learn about the authentication flow and auth store

Routing

Deep dive into TanStack Router and route layouts

API Integration

Understand how to make API requests and handle responses
The application includes comprehensive error boundaries and theme support. See src/app/ErrorBoundary.tsx and src/app/providers/Theme.tsx for implementation details.

Build docs developers (and LLMs) love

Get started for freeTalk to us