GOODFOOD Dashboard

A responsive food delivery dashboard built with Next.js and React, featuring a modern UI with interactive charts, metrics, and comprehensive testing.

🚀 Features

• Responsive Design: Fully responsive layout that adapts from desktop to tablet to mobile
• Interactive Charts: Bar charts, donut charts, circular progress, and line charts
• Food Delivery Metrics: Revenue tracking, order analytics, rating system, and popular items
• Modern UI: Clean, professional design with Tailwind CSS matching GOODFOOD branding
• Component Architecture: Reusable React components with chart visualizations
• Data Management: Mock data for food delivery metrics and analytics
• Testing: Comprehensive test suite for the twoSum algorithm

📋 Project Structure

dashboard_task_v2/
├── app/
│   ├── dashboard/
│   │   └── page.tsx          # Main dashboard page
│   ├── layout.tsx            # Root layout
│   ├── page.tsx              # Home page (redirects to dashboard)
│   └── globals.css          # Global styles
├── components/
│   ├── Header.js            # GOODFOOD header with search and notifications
│   ├── Sidebar.js           # Responsive sidebar with MENU and OTHERS sections
│   ├── BarChart.js          # Revenue bar chart component
│   ├── DonutChart.js        # Order time donut chart component
│   ├── CircularProgress.js  # Rating circular progress component
│   └── LineChart.js         # Order line chart component
├── data/
│   └── mock.js              # Mock data for food delivery metrics
├── utils/
│   └── twoSum.js            # Two Sum algorithm implementation
├── __tests__/
│   └── twoSum.test.js       # Comprehensive test suite
└── package.json

🧪 Testing

Run the test suite to verify the twoSum algorithm:

npm test

The test suite includes:

• ✅ Positive test cases (basic functionality, negative numbers, duplicates)
• ✅ Negative test cases (no solution, empty input, invalid data)
• ✅ Edge cases (non-numeric values, large numbers, multiple solutions)

🎨 Components Overview

Header Component

• GOODFOOD branding with purple logo
• Centralized search functionality
• User profile with "Delicious Burger" branding
• Notification bell with red indicator

Sidebar Component

• MENU section: Dashboard, Food Order, Manage Menu, Customer Review
• OTHERS section: Settings, Payment, Accounts, Help
• Mobile-friendly with overlay and smooth transitions
• Active state indicators with purple theme

Chart Components

• BarChart: Revenue visualization with dual data series
• DonutChart: Order time distribution with interactive segments
• CircularProgress: Rating system with multiple categories
• LineChart: Order trends with dual-line comparison

📱 Responsive Design

The dashboard is fully responsive with breakpoints:

• Desktop (1024px+): Full sidebar, multi-column layout
• Tablet (768px-1023px): Collapsible sidebar, adjusted grid
• Mobile (<768px): Hidden sidebar, single column, mobile menu

🔍 Interactive Features

1. Search Bar: Centralized search functionality in header
2. Chart Visualizations: Interactive bar charts, donut charts, and line graphs
3. Mobile Menu: Collapsible sidebar for mobile devices
4. View Report Buttons: Interactive buttons for detailed analytics
5. Hover Effects: Smooth transitions and interactive elements

🧮 Two Sum Algorithm

The twoSum function finds two numbers in an array that add up to a target value:

twoSum([2, 7, 11, 15], 9) // Returns [0, 1]

Features:

• O(n) time complexity using HashMap
• Input validation and error handling
• Handles edge cases (empty arrays, invalid inputs, non-numeric values)

📊 Mock Data

The dashboard includes realistic food delivery data:

• Revenue Data: 12 days of sales data with dual comparison
• Order Time Data: Morning, afternoon, and evening distribution
• Rating Data: Hygiene, packaging, and food taste ratings
• Most Ordered Food: Popular menu items with prices
• Order Data: 6 days of order trends with comparison lines

🚀 Deployment

The application is ready for deployment on platforms like Vercel:

npm run build
npm start

⏱️ Development Time

Total Time Taken: Approximately 60 minutes

Completed: October 2025

Repository: Ready for deployment

Breakdown:

• Project setup and structure: 5 minutes
• Component development: 25 minutes
• Chart visualizations: 20 minutes
• Responsive design implementation: 10 minutes

🎯 Key Achievements

✅ Pixel-accurate GOODFOOD dashboard design
✅ Interactive chart visualizations
✅ Comprehensive component architecture
✅ Robust testing with 15 test cases
✅ Clean, maintainable code structure
✅ Mobile-first responsive approach

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm test - Run test suite
• npm run lint - Run ESLint

📝 Notes

• Built with Next.js 16 and React 19
• Styled with Tailwind CSS
• Tested with Jest
• Fully responsive and accessible
• Production-ready code with proper error handling
• Custom SVG chart components

---