Skip to main content
Tambo360’s frontend is a modern React application built to manage dairy farm production operations. It provides an intuitive interface for tracking milk production, managing batches, monitoring costs, and receiving AI-powered alerts.

​
Technology Stack

The frontend leverages cutting-edge technologies for optimal performance and developer experience:

React 19

Latest React version with improved concurrent rendering and automatic batching

TypeScript

Full type safety across the entire application

Vite

Lightning-fast build tool with Hot Module Replacement (HMR)

Tailwind CSS 4

Utility-first CSS framework for rapid UI development

​
Core Dependencies

package.json
{
  "dependencies": {
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "react-router-dom": "^7.13.0",
    "@tanstack/react-query": "^5.90.21",
    "axios": "^1.13.5",
    "tailwindcss": "^4.1.18",
    "typescript": "~5.8.2",
    "vite": "^6.2.0"
  }
}

​
Architecture Overview

The application follows a feature-based architecture with clear separation of concerns: 
apps/frontend/src/
├── components/          # Reusable UI components
│   ├── common/         # Base components (Button, Input, Card)
│   ├── layout/         # Layout components (Navbar, Sidebar)
│   └── shared/         # Feature-specific shared components
├── context/            # React Context providers
│   └── AuthContext.tsx # Authentication state management
├── hooks/              # Custom React hooks
│   ├── auth/          # Authentication hooks
│   ├── batch/         # Batch management hooks
│   ├── dashboard/     # Dashboard data hooks
│   └── alerts/        # Alert management hooks
├── pages/              # Route-level page components
│   ├── Dashboard.tsx
│   ├── Login.tsx
│   ├── Produccion.tsx
│   └── TamboEngine.tsx
├── routes/             # Routing configuration
│   ├── AppRoutes.tsx
│   ├── ProtectedRoute.tsx
│   └── PublicRoute.tsx
├── services/           # API service layer
│   └── api.ts
├── types/              # TypeScript type definitions
├── utils/              # Utility functions
└── constants/          # Application constants

​
Key Features

​
Authentication & Authorization

  • JWT-based authentication with HTTP-only cookies
  • Protected routes with automatic redirects
  • Context-based auth state management
  • Session persistence and automatic token refresh

​
State Management

The application uses a hybrid approach:
  • React Context: Global auth state and user information
  • TanStack Query: Server state management, caching, and data fetching
  • Component State: Local UI state with React hooks

​
Responsive Design

Fully responsive interface that works seamlessly across:
  • Desktop (1024px+)
  • Tablet (768px - 1023px)
  • Mobile (320px - 767px)

​
Performance Optimizations

  • Code splitting with React lazy loading
  • Automatic caching with TanStack Query
  • Optimistic UI updates for better UX
  • Debounced search inputs
  • Efficient re-rendering with React 19’s automatic batching

​
Development Workflow

​
Running the Development Server

cd apps/frontend
npm run dev
The app will be available at http://localhost:5173 with hot module replacement enabled.

​
Building for Production

npm run build
This creates an optimized production build in the dist/ directory.

​
Type Checking

npx tsc --noEmit

​
Linting

npm run lint

​
Code Formatting

npm run format        # Format code
npm run format:check  # Check formatting

​
Environment Variables

Create a .env file in the frontend root:
.env
VITE_API_URL=http://localhost:3000/api
VITE_API_IA_URL=http://localhost:3000/ia
Environment variables must be prefixed with VITE_ to be accessible in the application.

​
Project Configuration

​
Vite Configuration

The vite.config.ts file configures:
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'

export default defineConfig({
  server: {
    port: 5173,
    host: '0.0.0.0',
  },
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '.'),
    },
  },
})

​
Path Aliases

The @ alias points to the frontend root directory: 
import { useAuth } from '@/src/context/AuthContext'
import { Button } from '@/src/components/common/Button'

​
Next Steps

Setup Guide

Get your development environment ready

Component Library

Explore reusable UI components

Authentication

Learn about auth implementation

Data Fetching

Understand React Query patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us