Skip to main content

Frontend - Tech Stack

Overview​

OX Agry is an enterprise modular application for the agricultural industry, serving as an agro trade and service aggregator. This document outlines the comprehensive frontend technical stack and architecture.

Core Technology Stack​

Build Tools & Package Management​

  • Package Manager: pnpm
    • Workspace management for modular architecture
    • Fast, disk-efficient package management
    • Strict dependency resolution
    • Built-in monorepo support
    • Script running and build orchestration

Core Technologies​

  • Language: TypeScript
    • Type safety across the application
    • Better IDE support and intellisense
    • Compile-time error checking
    • Seamless integration with GraphQL code generation

Routing & Navigation​

  • TanStack Router
    • Type-safe routing system
    • File-based or configuration-based routing
    • Built-in data loading and mutations
    • Automatic route prefetching
    • Search params state management
    • Nested layouts for complex dashboards
    • Route-level code splitting

Form Management​

  • TanStack Form
    • Type-safe form state management
    • Built-in validation with multiple validators
    • Performance optimized for large forms
    • Async validation support
    • Field arrays for dynamic forms
    • Form state persistence
    • Integration with Zod/Yup for schema validation

Data Layer & API Communication​

  • Apollo Client 3.x

    • GraphQL client for NestJS backend integration
    • Normalized caching for optimal performance
    • Real-time subscriptions via WebSocket
    • Optimistic UI updates
    • Comprehensive error handling and retry logic
    • Batch queries support
    • Integration with GraphQL code generation

  • GraphQL

    • Type-safe API communication
    • Schema-first development approach
    • Automatic type generation
    • Fragment colocation
    • Query/Mutation/Subscription support

UI Framework & Styling​

  • Base Theme: Ecme React Theme

    • Pre-built component library
    • Consistent design system
    • Customizable components
    • Accessibility compliant

  • Tailwind CSS 3.x

    • Utility-first CSS framework
    • Custom design tokens for OX Agry brand
    • Component variants with CVA (Class Variance Authority)
    • Responsive design utilities
    • JIT compilation for optimal bundle size
    • Dark mode support

Testing Framework​

  • Vitest

    • Fast unit testing framework
    • Jest-compatible API
    • Native ESM support
    • Snapshot testing
    • Coverage reporting

  • React Testing Library (RTL)

    • Component testing
    • User interaction simulation
    • Accessibility testing
    • Custom render utilities
    • Integration with Vitest

Authentication & Security​

  • Two-Token Authentication System 
    interface AuthTokens {
      accessToken: string; // Short-lived (15-30 minutes)
      refreshToken: string; // Long-lived (7-30 days)
    }
    • Secure token storage (HttpOnly cookies)
    • Automatic token refresh mechanism
    • Role-based access control (RBAC)
    • Permission-based UI rendering
    • Session management

Development Workflow​

Getting Started​

# Install pnpm globally
npm install -g pnpm

# Clone repository
git clone <repository-url>
cd ox-agry

# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env.local

# Run development server
pnpm dev

# Run tests
pnpm test

# Build for production
pnpm build

Conclusion​

This technical stack provides a robust, scalable, and maintainable foundation for the OX Agry platform, leveraging modern web technologies and best practices to deliver a high-performance agricultural industry solution.