Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v18 or higher)
  • npm, yarn, or pnpm package manager

​
Install Dependencies

The Auction Platform Frontend uses modern React tooling with Vite, TanStack Router, and Zustand for state management. Install the project dependencies using your preferred package manager: 
npm install

​
Key Dependencies

The project includes the following core dependencies:

​
Production Dependencies

  • @tanstack/react-router (^1.154.14) - File-based routing with automatic code splitting
  • react (^19.2.0) - UI library
  • react-dom (^19.2.0) - React DOM renderer
  • zustand (^5.0.10) - Lightweight state management
  • lucide-react (^0.563.0) - Icon library

​
Development Tools

  • vite (^7.2.4) - Build tool and dev server
  • @vitejs/plugin-react-swc (^4.2.2) - Fast React refresh with SWC
  • storybook (^10.2.12) - Component development environment
  • vitest (^4.0.18) - Unit testing framework
  • typescript (~5.9.3) - Type safety
  • eslint (^9.39.1) - Code linting

​
Environment Configuration

Create a .env file in the root of your project to configure environment variables:
.env
VITE_API_URL=http://localhost:3000/api
The VITE_API_URL environment variable is used throughout the application for API requests. See src/app/api/client.ts:3 for the implementation.

​
Environment Variables

VariableDescriptionDefault
VITE_API_URLBase URL for backend API requests-

​
Project Structure

The project follows Feature-Sliced Design (FSD) architecture: 
src/
├── app/              # Application initialization & providers
│   ├── api/          # API client configuration
│   ├── providers/    # Theme & global providers
│   ├── store/        # Zustand stores (auth, etc.)
│   └── hooks/        # Custom hooks (form engine)
├── features/         # Feature modules
│   ├── auth/         # Authentication (login, signup)
│   ├── dashboard/    # Dashboard components
│   └── onboarding/   # User onboarding flow
├── pages/            # Page components
│   ├── home/
│   ├── Login/
│   ├── Signup/
│   └── onboarding/
├── routes/           # TanStack Router routes
│   ├── __root.tsx
│   ├── _with-navbar.tsx
│   ├── _with-sidebar.tsx
│   └── _without-navbar.tsx
├── shared/           # Shared utilities & UI components
│   ├── ui/           # Reusable UI components
│   │   ├── button/
│   │   ├── Typography/
│   │   ├── TextField/
│   │   └── CardContainer/
│   ├── styles/       # Global styles & themes
│   └── validation-engine/ # Form validation
└── widgets/          # Complex composite components
    ├── Navbar/
    ├── Sidebar/
    └── Create-auction/

​
Path Aliases

The project uses TypeScript path aliases for cleaner imports (configured in vite.config.ts:59-65): 
import { Button } from '@shared/ui/button/Button'
import { useAuthStore } from '@app/store/auth/auth.store'
import { LoginForm } from '@features/auth/components/LoginForm'
AliasPath
@/./src
@app./src/app
@shared./src/shared
@features./src/features

​
Verify Installation

Run the development server to verify your installation: 
npm run dev
You should see output indicating the dev server is running: 
VITE v7.2.4  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

Next Steps

Follow the quickstart guide to run your first auction platform application

Build docs developers (and LLMs) love

Get started for freeTalk to us