A Next.js-based web application for managing agricultural supply chain operations with a focus on medicinal plants and Ayurvedic products. This frontend provides a modern, responsive interface for tracking herbs from cultivation to distribution.
HerbTrace Frontend delivers a comprehensive dashboard for supply chain stakeholders to:
- Monitor herb cultivation and processing stages
- Track quality assurance protocols and testing results
- Manage user profiles across different roles (Farmers, Processors, Labs, etc.)
- Visualize supply chain data with interactive charts and real-time updates
- Access blockchain-verified transaction records
- Node.js 18.0 or higher
- npm, yarn, or pnpm package manager
- Modern web browser with ES2020 support
- Clone the repository:
git clone https://github.com/herbtrace/Frontend.git
cd Frontend- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Start the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser
Frontend/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── dashboard/ # Dashboard pages and components
│ │ ├── login/ # Authentication pages
│ │ ├── globals.css # Global styles
│ │ └── layout.tsx # Root layout component
│ ├── components/
│ │ ├── ui/ # Reusable UI components (shadcn/ui)
│ │ └── forms/ # Form components for different user roles
│ ├── contexts/ # React contexts for state management
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions and configurations
│ └── services/ # API service functions
├── public/ # Static assets
├── next.config.ts # Next.js configuration
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Project dependencies and scripts
- Overview Dashboard: Real-time supply chain metrics and activity feeds
- Profile Management: User registration and profile creation for different roles
- Transaction Tracking: Complete visibility of herb batches through the supply chain
- Modern Design: Built with Tailwind CSS and shadcn/ui components
- Responsive Layout: Optimized for desktop and mobile devices
- Interactive Charts: Data visualization using Recharts
- Form Validation: Robust form handling with React Hook Form and Zod
- Role-based Access: Different interfaces for Farmers, Processors, Labs, and Manufacturers
- Secure Authentication: Token-based authentication with context management
- Profile Creation: Dynamic forms based on user roles
npm run dev- Start development server with Turbopacknpm run build- Build production application with Turbopacknpm start- Start production servernpm run lint- Run ESLint for code qualitynpm run format- Format code with Prettiernpm run format:check- Check code formattingnpm run format:staged- Format staged files
- Next.js 15.5.3 - React framework with App Router
- React 19.1.0 - UI library
- TypeScript 5 - Type-safe JavaScript
- Tailwind CSS 4 - Utility-first CSS framework
- Radix UI - Headless UI components
- Lucide React - Icon library
- shadcn/ui - Pre-built component library
- React Hook Form - Performant form library
- Zod - TypeScript-first schema validation
- @hookform/resolvers - Form validation resolvers
- Recharts - React charting library
- Embla Carousel - Carousel component
- React Context - Built-in state management
- Next Themes - Theme management
- ESLint - Code linting
- Prettier - Code formatting
- Turbopack - Fast bundler for development
Create a .env.local file in the root directory:
NEXT_PUBLIC_API_URL=your_backend_api_urlThe project uses Tailwind CSS 4 with custom configurations for:
- Extended color palette
- Custom animations
- Responsive breakpoints
- Component-specific utilities
Key configurations in next.config.ts:
- Package import optimizations for better performance
- Console removal in production builds
- Image optimization with WebP and AVIF formats
- Follow TypeScript best practices
- Use functional components with hooks
- Implement proper error boundaries
- Follow the existing component structure
- Use shadcn/ui components as base
- Implement proper TypeScript interfaces
- Follow the established naming conventions
- Ensure responsive design principles
- Leverage Next.js Image optimization
- Implement proper code splitting
- Use React.memo for expensive components
- Optimize bundle size with dynamic imports
The frontend integrates with the HerbTrace backend API for:
- User authentication and profile management
- Supply chain transaction processing
- Real-time data updates
- File uploads and document management
API services are centralized in src/services/api.ts for maintainability.
npm run build
npm startEnsure all required environment variables are configured for production deployment.
- Enable compression for static assets
- Configure proper caching headers
- Monitor Core Web Vitals
- Implement proper error tracking
- Chrome 88+
- Firefox 85+
- Safari 14+
- Edge 88+
- Fork the repository
- Create a feature branch
- Implement changes following the coding standards
- Run tests and linting
- Submit a pull request with detailed description
- Input sanitization and validation
- Secure token storage
- CORS protection
- XSS prevention
- Secure authentication flows
The application implements comprehensive error handling:
- Global error boundaries
- API error handling
- Form validation errors
- Network error recovery
- User-friendly error messages