107 lines
2.6 KiB
Markdown
107 lines
2.6 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## 🏃 Development
|
|
|
|
Start the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
The app will be available at `http://localhost:5173`
|
|
|
|
## 🏗️ Build
|
|
|
|
Build for production:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Preview production build:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```css
|
|
@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
|