A comprehensive farm management platform built with Next.js, TypeScript, and Tailwind CSS. FarmConnect simplifies livestock management for owners and suppliers with role-based access control and modern web technologies.
- JWT-based authentication with secure token storage
- Role-based access control (Owner/Supplier)
- Protected routes with middleware
- Automatic session management
- Medicine Management: Create, edit, and manage medicine inventory
- Feed Management: Handle feed products and inventory
- Livestock Management: Track and manage livestock records (Owner role)
- Request System: Submit and manage resource requests
- Feedback System: Customer feedback and supplier responses
- Image Upload: File upload with base64 conversion and storage
- Drag-and-drop file upload interface
- Automatic base64 conversion for storage
- Support for JPEG, PNG, GIF, and WebP formats
- 5MB file size limit with validation
- Preview functionality with removal option
- Responsive image display components
- Framework: Next.js 15.3.5 with App Router
- Language: TypeScript
- Styling: Tailwind CSS 4
- UI Components: Custom React components
- Authentication: JWT tokens with localStorage
- File Handling: Browser FileReader API for base64 conversion
FarmConnect follows a modern microservices architecture:
- Frontend: This Next.js application (React-based web interface)
- Backend: FarmConnect-WebApi (RESTful API service)
- Database: SQL Server (managed by the backend API)
- Authentication: JWT-based auth system
- Image: Base64 encoding for image storage
First, install dependencies:
npm install
# or
yarn install
# or
pnpm installThen, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
Create a .env.local file in the root directory with your environment variables:
# Backend API URL - Points to the FarmConnect WebAPI service
NEXT_PUBLIC_API_URL=https://your-backend-api-url.comNote: This frontend application requires the FarmConnect-WebApi backend service to be running. Make sure to set up and deploy the backend API first, then configure the NEXT_PUBLIC_API_URL to point to your API endpoint.
src/
├── app/ # Next.js app router pages
│ ├── owner/ # Owner role specific pages
│ ├── supplier/ # Supplier role specific pages
│ ├── login/ # Authentication pages
│ └── register/
├── components/ # Reusable React components
│ ├── ImageUpload.tsx # File upload component
│ ├── ImageDisplay.tsx # Image display component
│ └── Navbar.tsx # Navigation component
├── contexts/ # React contexts
│ └── AuthContext.tsx # Authentication context
├── services/ # API service layers
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
└── imageUtils.ts # Image handling utilities
- File Selection: Click or drag-and-drop interface
- Validation: Automatic file type and size validation
- Preview: Real-time image preview with edit/remove options
- Storage: Base64 encoding for database storage
- Display: Optimized rendering with fallback support
- Owner: Access to livestock, medicine browsing, feed browsing, requests, and feedback
- Supplier: Access to medicine management, feed management, request handling, and feedback viewing
- Backend API: FarmConnect-WebApi - The backend API service that powers this frontend application
To learn more about the technologies used:
- Next.js Documentation - learn about Next.js features and API
- TypeScript Documentation - TypeScript language reference
- Tailwind CSS - utility-first CSS framework
- React Documentation - React library documentation
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out the Next.js deployment documentation for more details.