Skip to main content

​
Overview

The Transport Logistics system is built with modern web technologies, emphasizing type safety, performance, and developer experience. The stack is carefully chosen to provide a robust, scalable, and maintainable solution.

​
Frontend Stack

​
Core Framework

React

Version: 18.3.1React serves as the foundation of our UI, providing a component-based architecture with excellent performance through its virtual DOM implementation.Why React?
  • Large ecosystem and community support
  • Component reusability and composability
  • Efficient rendering with virtual DOM
  • Strong TypeScript integration

​
TypeScript

Version: 5.5.3 TypeScript provides static typing throughout the entire codebase, catching errors at compile time and improving code quality. Configuration Highlights:
  • Path aliases (@/* for ./src/*)
  • Flexible type checking for rapid development
  • Integration with all dependencies

​
Build Tool

Vite

Version: 5.4.1Vite provides lightning-fast development with Hot Module Replacement (HMR) and optimized production builds.Features:
  • Instant server start
  • Lightning-fast HMR
  • Optimized builds with Rollup
  • Native ESM support
  • SWC-powered React plugin for faster compilation

​
Routing

React Router DOM (v6.26.2) Implements client-side routing with:
  • Protected routes for authentication
  • Admin-only routes for privileged access
  • Lazy loading for code splitting
  • Nested route layouts

​
UI Framework

​
Component Library

A collection of beautifully designed, accessible components built on Radix UI primitives.Radix UI Components (v1.x):
  • @radix-ui/react-dialog - Modal dialogs
  • @radix-ui/react-dropdown-menu - Dropdown menus
  • @radix-ui/react-select - Select components
  • @radix-ui/react-tabs - Tab navigation
  • @radix-ui/react-toast - Toast notifications
  • And 20+ other components
Why shadcn/ui?
  • Fully accessible (WAI-ARIA compliant)
  • Customizable and themeable
  • Copy-paste integration (not a package)
  • Built with Radix UI primitives

​
Additional UI Libraries

{
  "lucide-react": "^0.462.0",      // Icon library (600+ icons)
  "framer-motion": "^12.4.10",     // Animation library
  "sonner": "^1.5.0",              // Toast notifications
  "next-themes": "^0.3.0",         // Theme management (dark/light)
  "vaul": "^0.9.3"                 // Drawer component
}

​
Backend & Database

​
Supabase

Supabase

Version: @supabase/supabase-js 2.49.4Supabase provides a complete backend solution including:
  • PostgreSQL Database: Relational database with full SQL support
  • Authentication: Built-in auth with email/password, social providers
  • Row Level Security (RLS): Database-level security policies
  • Real-time Subscriptions: Live data updates via WebSockets
  • Auto-generated APIs: RESTful and GraphQL endpoints
  • Storage: File storage with CDN
Why Supabase?
  • Open-source Firebase alternative
  • Full PostgreSQL power and flexibility
  • Automatic type generation for TypeScript
  • Row Level Security for fine-grained access control
  • Real-time capabilities out of the box

​
PostgreSQL Schema

The database uses PostgreSQL with:
  • 8 core tables (vehicles, shipments, packages, materials, routes, transporters, profiles, user_settings)
  • Foreign key relationships for data integrity
  • Automatic timestamps (created_at, updated_at)
  • UUID primary keys
  • Custom functions for role management

​
State Management

​
TanStack Query

Version: @tanstack/react-query 5.56.2
TanStack Query (formerly React Query) handles all server state management, eliminating the need for Redux or similar state management libraries.
Features:
  • Automatic caching and background refetching
  • Optimistic updates
  • Request deduplication
  • Pagination and infinite scroll support
  • Devtools for debugging
Implementation: 
// Query client configuration
import { QueryClient } from '@tanstack/react-query';

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1 minute
      retry: 1,
    },
  },
});

​
Context API

React Context is used for:
  • AuthContext: User authentication state and user profile
  • Theme management (via next-themes)

​
Data Fetching & API

​
Custom Hooks Pattern

All data fetching is encapsulated in custom hooks using TanStack Query: 
// hooks/use-vehicles.tsx
export const useVehicles = () => {
  return useQuery({
    queryKey: ['vehicles'],
    queryFn: async () => {
      const { data } = await supabase
        .from('vehicles')
        .select('*, transporters(*)')
        .order('created_at', { ascending: false });
      return data;
    },
  });
};

​
Utilities & Helper Libraries

​
Date Handling

date-fns (v3.6.0) - Modern date utility library
  • Lightweight and modular
  • Immutable and pure functions
  • TypeScript support

​
Excel Export

xlsx (v0.18.5) - Excel file generation
  • Export reports and data to Excel format
  • Read and parse uploaded Excel files

​
Additional Utilities

{
  "cmdk": "^1.0.0",                // Command menu (Cmd+K)
  "input-otp": "^1.2.4",           // OTP input component
  "embla-carousel-react": "^8.3.0", // Carousel component
  "react-day-picker": "^8.10.1",   // Date picker
  "react-resizable-panels": "^2.1.3" // Resizable panel layouts
}

​
Development Tools

​
Code Quality

Version: 9.9.0Configured with:
  • React Hooks rules
  • React Refresh plugin
  • TypeScript ESLint parser
  • Custom rule overrides for rapid development

​
Build Tools

{
  "@vitejs/plugin-react-swc": "^3.5.0",  // SWC compiler for React
  "autoprefixer": "^10.4.20",            // CSS vendor prefixing
  "postcss": "^8.4.47",                  // CSS transformations
  "lovable-tagger": "^1.1.7"             // Component tagging for dev
}

​
Architecture Decisions

​
Why This Stack?

Performance

  • Vite for instant dev server and fast builds
  • React 18 with concurrent features
  • SWC compiler for faster TypeScript compilation
  • Lazy loading for code splitting
  • TanStack Query for efficient data caching

Developer Experience

  • TypeScript for type safety and IntelliSense
  • Hot Module Replacement for instant feedback
  • shadcn/ui for rapid UI development
  • Path aliases for clean imports
  • Comprehensive hooks for data fetching

Scalability

  • Component-based architecture
  • Supabase for backend scalability
  • PostgreSQL for data integrity
  • Row Level Security for multi-tenancy
  • Modular code organization

Maintainability

  • Strong typing throughout
  • Consistent code patterns
  • Reusable components
  • Clear separation of concerns
  • Comprehensive type definitions

​
Package Management

npm is used for package management with the following scripts: 
{
  "dev": "vite",                           // Start dev server
  "build": "vite build",                   // Production build
  "build:dev": "vite build --mode development", // Dev build
  "lint": "eslint .",                      // Run linting
  "preview": "vite preview"                // Preview production build
}

​
Version Compatibility

All major dependencies are on stable, actively maintained versions:
  • React 18.x ecosystem
  • TypeScript 5.x
  • Radix UI 1.x and 2.x (latest stable)
  • Supabase JS client 2.x
  • TanStack Query 5.x

​
Next Steps

Database Schema

Learn about the database structure and relationships

Project Structure

Explore the codebase organization and architecture

Build docs developers (and LLMs) love

Get started for freeTalk to us