Skip to main content

​
Technology Stack

The Syngenta Warehouse Management System is built with modern web technologies:

Next.js 16.1.6

React framework with App Router

TypeScript 5.9.3

Type-safe JavaScript with strict mode

Tailwind CSS v4

Utility-first CSS framework

shadcn/ui

High-quality UI components

​
Core Dependencies

package.json
{
  "dependencies": {
    "next": "16.1.6",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "next-themes": "^0.4.6",
    "shadcn": "^4.0.5",
    "@hugeicons/react": "^1.1.6",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "tailwind-merge": "^3.5.0"
  }
}

​
Development Dependencies

  • @tailwindcss/postcss: ^4.1.18
  • TypeScript: ^5.9.3
  • ESLint: ^9.39.2
  • Prettier: ^3.8.1

​
Project Structure

The application follows Next.js App Router conventions with a clean, organized structure: 
warehouse-management-app/
├── app/
│   ├── layout.tsx          # Root layout with theme provider
│   ├── page.tsx            # Homepage
│   ├── globals.css         # Global styles and CSS variables
│   └── favicon.ico         # Application icon
├── components/
│   ├── ui/                 # shadcn/ui components
│   │   └── button.tsx      # Button component
│   ├── theme-provider.tsx  # Theme provider wrapper
│   └── .gitkeep
├── lib/
│   └── utils.ts            # Utility functions (cn helper)
├── hooks/
│   └── ...                 # Custom React hooks
├── public/
│   └── ...                 # Static assets
├── components.json         # shadcn/ui configuration
├── next.config.mjs         # Next.js configuration
├── tsconfig.json           # TypeScript configuration
├── package.json            # Project dependencies
└── bun.lock               # Dependency lock file

​
App Router Architecture

The application uses Next.js 15+ App Router, which provides:

​
Server Components by Default

Components are React Server Components (RSC) by default, offering:
  • Zero JavaScript sent to the client for static content
  • Direct database access without API routes
  • Improved performance through server-side rendering
app/page.tsx
// This is a Server Component by default
export default function Page() {
  return <div>Server-rendered content</div>
}

​
Client Components When Needed

Use the "use client" directive for interactive components:
components/theme-provider.tsx
"use client"

import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({ children, ...props }) {
  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
      {...props}
    >
      {children}
    </NextThemesProvider>
  )
}

​
Root Layout

The root layout (app/layout.tsx) wraps all pages and provides:
  • Theme management via ThemeProvider
  • Font configuration with Inter and Geist Mono
  • Global metadata and HTML structure
app/layout.tsx
import { Inter, Geist_Mono } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"
import { cn } from "@/lib/utils"
import "./globals.css"

const inter = Inter({ subsets: ['latin'], variable: '--font-sans' })
const fontMono = Geist_Mono({ subsets: ["latin"], variable: "--font-mono" })

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning className={cn("antialiased", fontMono.variable, "font-sans", inter.variable)}>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

​
TypeScript Configuration

The project uses strict TypeScript configuration:
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "strict": true,
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "bundler",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

​
Path Aliases

The @/ alias maps to the root directory, simplifying imports: 
// Instead of: import { cn } from "../../lib/utils"
import { cn } from "@/lib/utils"

// Instead of: import { Button } from "../../components/ui/button"
import { Button } from "@/components/ui/button"

​
Component Architecture

​
Component Organization

Components are organized by purpose:
  • components/ui/ - shadcn/ui components (Button, Card, Dialog, etc.)
  • components/features/ - Feature-specific components
  • components/shared/ - Shared/common components
  • components/theme-provider.tsx - Theme management

​
Component Pattern

All components follow a consistent pattern: 
import { cn } from "@/lib/utils"
import { type VariantProps } from "class-variance-authority"

interface ComponentProps {
  className?: string
  // ... other props
}

export function Component({ className, ...props }: ComponentProps) {
  return (
    <div className={cn("base-classes", className)} {...props}>
      {/* Component content */}
    </div>
  )
}

​
Styling Architecture

The application uses Tailwind CSS v4 with CSS variables for theming:

​
CSS Variables

Colors and design tokens are defined as CSS variables in globals.css: 
:root {
  --primary: oklch(0.45 0.18 305);    /* Syngenta Purple */
  --secondary: oklch(0.58 0.15 155);   /* Syngenta Green */
  --accent: oklch(0.55 0.25 345);      /* Vibrant Magenta */
  --radius: 0.75rem;                   /* Apple-inspired rounded corners */
}

​
Dark Mode Support

The .dark class overrides variables for dark mode: 
.dark {
  --primary: oklch(0.55 0.20 305);     /* Lighter purple for dark mode */
  --background: oklch(0.15 0 0);       /* Apple-inspired dark background */
}

​
Build & Production

​
Build Process

Next.js builds the application into optimized production bundles: 
bun run build
This command:
  1. Type checks all TypeScript files
  2. Compiles and optimizes React components
  3. Generates static pages where possible
  4. Creates optimized JavaScript bundles
  5. Processes and optimizes CSS

​
Production Server

Start the production server after building: 
bun run start

​
Performance Optimizations

The architecture includes several performance optimizations:
Server Components reduce client-side JavaScript by rendering on the server, sending only HTML to the client.
The development server uses Turbopack (--turbopack flag) for faster hot module replacement and builds.
Next.js automatically optimizes Google Fonts (Inter, Geist Mono) with zero layout shift.
Next.js Image component provides automatic image optimization with lazy loading and responsive sizes.

​
Next.js Configuration

The next.config.mjs file configures Next.js behavior:
next.config.mjs
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'upload.wikimedia.org',
        pathname: '/wikipedia/commons/**',
      },
    ],
  },
}

export default nextConfig

​
Next Steps

UI Components

Learn about the component library

Styling Guide

Understand the styling approach

Build docs developers (and LLMs) love

Get started for freeTalk to us