A responsive React application for browsing and ordering coffee beans, featuring a daily rotating Bean of the Day, real-time search and filtering, and a simple shopping cart with checkout.
# Prerequisites: Node.js 18+
# Install dependencies
npm install
# Run development server
npm run dev
# Run tests
npm test
# Build for production
npm run buildThe app will be available at http://localhost:5173
All requirements from Scenario 1 have been implemented:
- Responsive layout - Works on mobile, tablet, and desktop
- Bean catalog - Grid view showing all available coffee beans
- Bean detail pages - Individual pages for each bean with full information
- Bean of the Day - Highlighted daily feature that rotates automatically
- Search and filter - Filter by name, description, country, and roast type
- Order form - Customer checkout with validation
Beyond the core requirements, I added:
- Shopping cart - Add multiple beans, adjust quantities, persistent across sessions
- Price sorting - Sort beans by price (low to high, high to low)
- Toast notifications - User feedback for cart actions and order success
- Dark/light theme - Theme toggle with system preference detection
- Loading states - Skeleton loaders for better perceived performance
- Empty states - Clear messaging when cart is empty or no search results
- Filter chips - Visual indicators showing active filters
- Breadcrumb navigation - Helps users understand where they are
React 19 + TypeScript + Vite
- Fast development with hot module replacement
- TypeScript strict mode for type safety
- Modern tooling with minimal configuration
Zustand for State Management
- Lightweight alternative to Context API
- Prevents unnecessary re-renders through selector-based subscriptions
- Clean API for managing cart, filters, and orders
shadcn/ui + Tailwind CSS
- Pre-built accessible components (WCAG compliant)
- Fast styling with utility classes
Zod + React Hook Form
- Schema-based validation
- Type inference from validation schemas
- Form handling with clear error messages
Vitest for Testing
- Native Vite integration (fast test runs)
- Jest-compatible API
- Tests business logic, components, and validation schemas
Feature-based folder structure - Organized by domain (beans, cart, orders) for scalability and team collaboration
Service layer pattern - BeanService abstracts data access, making it easy to swap static JSON for a REST API later
Daily BOTD rotation - Uses localStorage with date checking to randomly select a different bean each day, excluding yesterday's selection
Cart persistence - Cart state saved to localStorage so users don't lose items on page refresh
Type safety throughout - No any types, proper interfaces for all data structures
Debounced search - Search input waits 300ms before filtering to reduce unnecessary computations
Memoized filtering - Filter results are computed only when beans or filters change
Multiple add-to-cart entry points - Users can add beans from the homepage, bean detail page, or directly from Bean of the Day
Visual feedback everywhere - Toast notifications confirm actions, loading skeletons show progress, cart badge updates in real-time
Smart empty states - Clear messaging when the cart is empty or search returns no results
Accessible design - Semantic HTML, ARIA labels, keyboard navigation, focus indicators
Mobile-first responsive - Grid layout adapts from 1 column on mobile to 3-4 columns on desktop
Filter chips - Active filters shown as removable chips for transparency and quick clearing
Error boundary - Catches React errors gracefully with a retry option instead of white screen
- Integration tests - Test full user journeys (browse → add to cart → checkout → confirmation)
- Performance monitoring - Add Web Vitals tracking and lazy load routes
- Quantity validation in cart - Prevent adding more items than a reasonable limit
- API integration - Connect to a real backend with proper error handling