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

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

📝 License

MIT