GreenCart Logistics Frontend is a modern React-based dashboard application for managing delivery operations and simulating logistics performance. The application provides an intuitive interface for managing drivers, routes, orders, and running delivery simulations with real-time KPI tracking.
- Driver Management: Complete CRUD operations for driver profiles
- Delivery Simulation: Interactive simulation with performance metrics
- Real-time Dashboard: KPI cards, charts, and analytics
- Responsive Design: Mobile-first approach with modern UI components
- Data Visualization: Interactive charts for delivery and fuel cost analysis
- Framework: Next.js 14.2.25 (App Router)
- Runtime: React 19 with TypeScript
- Styling: Tailwind CSS v4 with PostCSS
- UI Components: Radix UI + shadcn/ui
- Charts: Recharts for data visualization
- Forms: React Hook Form with Zod validation
- Icons: Lucide React + Heroicons
- HTTP Client: Axios for API communication
- Package Manager: npm
- Linting: ESLint with Next.js configuration
- Type Checking: TypeScript with strict mode
- Build Tool: Next.js built-in bundler
- CSS Processing: PostCSS with Tailwind CSS
- Node.js 18+ installed
- npm or yarn package manager
- Backend server running (see backend README)
-
Clone the repository ```bash git clone cd greencart-logistics ```
-
Install dependencies ```bash npm install ```
-
Set up environment variables ```bash cp .env.example .env.local ```
-
Start development server ```bash npm run dev ```
-
Open application ``` http://localhost:3000 ```
```bash npm run build npm start ```
Create a .env.local file in the root directory:
```env
NEXT_PUBLIC_API_URL=http://localhost:5000/api NEXT_PUBLIC_API_TIMEOUT=10000
NEXT_PUBLIC_APP_NAME=GreenCart Logistics NEXT_PUBLIC_APP_VERSION=1.0.0
NEXT_PUBLIC_DEV_MODE=true NEXT_PUBLIC_DEBUG_MODE=false
NEXT_PUBLIC_CHART_ANIMATION=true NEXT_PUBLIC_CHART_THEME=light
NEXT_PUBLIC_DEFAULT_DRIVERS=5 NEXT_PUBLIC_DEFAULT_MAX_HOURS=8 NEXT_PUBLIC_DEFAULT_START_TIME=09:00 ```
-
Connect to Vercel ```bash npm install -g vercel vercel login vercel ```
-
Configure environment variables in Vercel dashboard
- Add all environment variables from
.env.local - Set
NEXT_PUBLIC_API_URLto your production backend URL
- Add all environment variables from
-
Deploy ```bash vercel --prod ```
-
Build Docker image ```bash docker build -t greencart-frontend . ```
-
Run container ```bash docker run -p 3000:3000
-e NEXT_PUBLIC_API_URL=http://your-backend-url/api
greencart-frontend ```
-
Build application ```bash npm run build ```
-
Copy build files to server ```bash scp -r .next/ out/ package.json your-server:/path/to/app/ ```
-
Install dependencies and start ```bash npm install --production npm start ```
client/ ├── node_modules/ ├── public/ ├── src/ │ ├── components/ │ │ ├── charts/ │ │ │ ├── DeliveryChart.js │ │ │ ├── FuelCostChart.js │ │ ├── ConfirmDialog.js │ │ ├── KPICard.js │ │ ├── Modal.js │ │ ├── Navbar.js │ │ ├── ProtectedRoute.js │ ├── context/ │ │ ├── AuthContext.js │ ├── pages/ │ ├── services/ │ │ ├── api.js │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ ├── setupTests.js ├── .env ├── .gitignore ├── package-lock.json ├── package.json ├── postcss.config.js ├── README.md ├── tailwind.config.js
- Layout: Card, Sheet, Dialog, Drawer
- Forms: Button, Input, Select, Checkbox, Switch
- Data Display: Table, Badge, Avatar, Progress
- Feedback: Alert, Toast, Loading Spinner
- Navigation: Tabs, Breadcrumb, Pagination
- Dashboard: Main dashboard with KPIs and charts
- DriverManager: CRUD operations for drivers
- SimulationPanel: Interactive simulation controls
- Charts: Delivery performance and fuel cost visualization
- KPICards: Real-time metrics display
```javascript
// services/api.js
export const driversAPI = {
getAll: () => axios.get('/drivers'),
create: (data) => axios.post('/drivers', data),
update: (id, data) => axios.put(/drivers/${id}, data),
delete: (id) => axios.delete(/drivers/${id})
};
export const simulationAPI = { run: (params) => axios.post('/simulation/run', params) }; ```
```javascript // Global error interceptor axios.interceptors.response.use( (response) => response, (error) => { toast.error(error.response?.data?.message || 'An error occurred'); return Promise.reject(error); } ); ```
- KPI Cards: Total profit, efficiency score, delivery metrics
- Charts: Interactive delivery performance and fuel cost analysis
- Real-time Updates: Live data refresh after simulations
- Driver List: Sortable table with search and filters
- Add/Edit Driver: Modal forms with validation
- Driver Details: Performance metrics and work history
- Bulk Operations: Multi-select actions
- Parameter Controls: Driver count, start time, max hours
- Results Display: Detailed breakdown of simulation results
- Performance Metrics: Efficiency scores and delivery analytics
- Cost Analysis: Fuel costs, penalties, and bonuses
- Delivery Charts: On-time vs late delivery performance
- Fuel Cost Charts: Breakdown of fuel expenses
- Performance Trends: Historical data visualization
- Interactive Elements: Hover effects and drill-down capabilities
```bash npm run dev # Start development server npm run build # Build for production npm run start # Start production server npm run lint # Run ESLint npm run type-check # Run TypeScript checks ```
- ESLint: Configured with Next.js and React best practices
- TypeScript: Strict mode enabled with path aliases
- Prettier: Code formatting (configure as needed)
- Husky: Git hooks for pre-commit checks (optional)
```bash
npm install --save-dev @testing-library/react @testing-library/jest-dom jest
npm test ```
- Next.js Image Optimization: Automatic image optimization
- Code Splitting: Automatic route-based code splitting
- Tree Shaking: Unused code elimination
- Bundle Analysis: Built-in bundle analyzer
- Lazy Loading: Components loaded on demand
- Memoization: React.memo for expensive components
- Virtual Scrolling: For large data tables
- Debounced Search: Optimized search functionality
```css /* globals.css - CSS Variables */ :root { --primary: 222.2 84% 4.9%; --secondary: 210 40% 96%; --accent: 210 40% 94%; --muted: 210 40% 96%; } ```
```javascript // Using Tailwind classes with shadcn/ui Custom Button ```
-
API Connection Failed ```bash
curl http://localhost:5000/api/health
```
-
Build Errors ```bash
rm -rf .next npm run build ```
-
TypeScript Errors ```bash
npm run type-check ```
-
Styling Issues ```bash
npm run dev ```
- Colors: Custom gradient palette with accessibility compliance
- Typography: Inter font family with responsive sizing
- Spacing: Consistent 8px grid system
- Components: Reusable component library with variants
- Fork the repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Make changes and test thoroughly
- Commit with conventional commits (
git commit -m 'feat: add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open Pull Request
- Follow ESLint configuration
- Use TypeScript for type safety
- Write meaningful component names
- Add JSDoc comments for complex functions
- Maintain responsive design principles