Skip to main content

​
Introduction

The Auction Platform Frontend follows a feature-based architecture organized around domain-specific modules. The application is built with React, TypeScript, TanStack Router, and Zustand for state management.

​
Project Structure

The source code is organized into the following top-level directories: 
src/
├── app/              # Application core (config, providers, stores, hooks)
├── features/         # Feature modules (auth, dashboard, onboarding)
├── pages/            # Page components
├── routes/           # TanStack Router definitions
├── shared/           # Shared utilities and UI components
├── widgets/          # Complex reusable components
└── tests/            # Test files

​
Core Directories

​
App Layer (src/app/)

The application layer contains the core infrastructure:
  • api/ - API client and request handling
  • store/ - Global state management with Zustand
  • hooks/ - Custom React hooks
  • providers/ - Context providers (Theme, etc.)
  • config.ts - Application configuration
  • ErrorBoundary.tsx - Global error handling

​
Features Layer (src/features/)

Feature modules encapsulate domain-specific logic: 
features/
├── auth/
│   ├── components/     # Auth UI components
│   ├── services/       # Auth API services
│   ├── types/          # TypeScript types
│   ├── Schema/         # Validation schemas
│   └── styles/         # Feature-specific styles
├── dashboard/
└── onboarding/
Each feature is self-contained with its own components, services, types, and styles.

​
Shared Layer (src/shared/)

Reusable code shared across features:
  • ui/ - Generic UI components (Button, TextField, Typography, etc.)
  • styles/ - Global styles (tokens, themes, reset)
  • validation-engine/ - Form validation utilities

​
Widgets Layer (src/widgets/)

Complex, reusable components that combine multiple UI elements:
  • Navbar/ - Navigation bar component
  • Sidebar/ - Sidebar navigation
  • Create-auction/ - Auction creation widget

​
Routes Layer (src/routes/)

TanStack Router file-based routing structure with layout routes:
  • __root.tsx - Root route component
  • _with-navbar/ - Routes with navbar layout
  • _with-sidebar/ - Routes with sidebar layout
  • _without-navbar/ - Routes without navigation (auth pages)

​
Design Patterns

​
Feature-Sliced Design

The architecture follows principles inspired by Feature-Sliced Design:
1

Layers

Code is organized into layers (app, features, shared, widgets) with clear dependencies flowing downward.
2

Feature Isolation

Each feature module is self-contained and can be developed independently.
3

Shared Infrastructure

Common utilities and components live in the shared layer to avoid duplication.

​
Separation of Concerns

React components focus purely on presentation and user interaction.
Services and stores handle business logic, API calls, and state management.
TanStack Router manages navigation with type-safe routes and layouts.
Zustand stores provide global state with a simple, hook-based API.

​
Application Bootstrap

The application initializes in src/main.tsx: 
import { createRouter, RouterProvider } from '@tanstack/react-router';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import ErrorBoundary from './app/ErrorBoundary';
import { ThemeProvider } from './app/providers/Theme';
import { useAuthStore } from './app/store/auth/auth.store';
import { routeTree } from './routeTree.gen';

import '../src/shared/styles/global.css';
import '../src/shared/styles/themes.css';
import '../src/shared/styles/tokens.css';

async function bootstrap() {
  // Initialize auth state before rendering
  await useAuthStore.getState().init()

  const router = createRouter({ routeTree })

  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <ErrorBoundary>
        <ThemeProvider>
          <RouterProvider router={router} />
        </ThemeProvider>
      </ErrorBoundary>
    </StrictMode>,
  )
}

bootstrap();
The auth store is initialized before the router to ensure authentication state is available for route guards.

​
Key Technologies

React 18

Modern React with hooks, StrictMode, and Suspense

TypeScript

Full type safety across the application

TanStack Router

Type-safe routing with file-based routes

Zustand

Lightweight state management

​
Next Steps

Routing

Learn about TanStack Router setup and route structure

State Management

Explore Zustand stores and state patterns

API Client

Understand the API client and request handling

Build docs developers (and LLMs) love

Get started for freeTalk to us