Agri360

A comprehensive agricultural management platform built with modern web technologies.

🚀 Tech Stack

Framework: React 19 with TypeScript
Build Tool: Vite 7
Routing: React Router DOM v7
Styling: Tailwind CSS v4 (with Vite plugin)
UI Components: Radix UI
Icons: Lucide React
State Management: Zustand
Data Fetching: TanStack Query (React Query)
Charts: Recharts
Forms: React Hook Form with Zod validation
Date Utilities: date-fns

📦 Installation

npm install

🏃 Development

Start the development server:

npm run dev

The app will be available at http://localhost:5173

🏗️ Build

Build for production:

npm run build

Preview production build:

npm run preview

📁 Project Structure

agri360/
├── src/
│   ├── pages/          # Page components
│   ├── components/     # Reusable components
│   ├── providers/      # Context providers (Query, etc.)
│   ├── lib/            # Utility functions
│   ├── hooks/          # Custom React hooks
│   ├── store/          # Zustand stores
│   ├── types/          # TypeScript type definitions
│   ├── App.tsx         # Main app component
│   └── main.tsx        # Entry point
├── public/             # Static assets
└── package.json

🎨 Tailwind CSS v4

This project uses Tailwind CSS v4 with the Vite plugin. Configuration is handled automatically through the @tailwindcss/vite plugin in vite.config.ts.

The main CSS file (src/index.css) imports Tailwind:

@import "tailwindcss";

🔧 Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build
npm run lint - Run ESLint

📚 Key Dependencies

React 19: Latest React with improved performance
React Router DOM: Client-side routing
TanStack Query: Powerful data synchronization for React
Zustand: Lightweight state management
React Hook Form: Performant forms with easy validation
Zod: TypeScript-first schema validation
Radix UI: Unstyled, accessible component primitives
Recharts: Composable charting library built on React

🎯 Next Steps

Set up your API endpoints
Create your application routes
Build your UI components using Radix UI and Tailwind
Implement state management with Zustand
Add data fetching with TanStack Query
Create forms with React Hook Form and Zod validation

📝 License

MIT

2.6 KiB Raw Blame History