{"id":26127403,"url":"https://github.com/gmartins-dev/food-delivery","last_synced_at":"2025-03-10T18:08:10.857Z","repository":{"id":281217867,"uuid":"939571655","full_name":"gmartins-dev/food-delivery","owner":"gmartins-dev","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-07T17:02:00.000Z","size":669,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-07T17:24:12.993Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://food-delivery-sigma-beryl.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gmartins-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-26T18:52:36.000Z","updated_at":"2025-03-07T17:02:03.000Z","dependencies_parsed_at":"2025-03-07T17:34:17.738Z","dependency_job_id":null,"html_url":"https://github.com/gmartins-dev/food-delivery","commit_stats":null,"previous_names":["gmartins-dev/food-delivery"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmartins-dev%2Ffood-delivery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmartins-dev%2Ffood-delivery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmartins-dev%2Ffood-delivery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmartins-dev%2Ffood-delivery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gmartins-dev","download_url":"https://codeload.github.com/gmartins-dev/food-delivery/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242900063,"owners_count":20203704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-10T18:08:10.212Z","updated_at":"2025-03-10T18:08:10.834Z","avatar_url":"https://github.com/gmartins-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Food Delivery App\n\nA modern web application that allows users to search for restaurants that deliver to their area using the Just Eat API based on their outcode (first part of a UK postcode) and also filter restaurants by cuisine type.\n\nThis application follows the **PIE Design System** - Just Eat Takeaway.com's global design system for interfaces and experiences, ensuring consistency with the Just Eat brand.\n\n## Live Demo\n\nCheck out the live demo of the Food Delivery application:\n\n🚀 [Click here to see the live demo](https://food-delivery-sigma-beryl.vercel.app/)\n\n## Key features\n\n- 🍽️ Search for restaurants by outcode (first part of UK postcode)\n- 🍕 Filter restaurants by cuisine type\n- 🌗 Dark and light mode support\n- 📱 Responsive design for mobile, tablet, and desktop\n- 🧩 PIE Design System integration\n- ♿ Accessible UI components\n- ⚡ Fast and optimized performance\n- 📄 Pagination with 10 restaurants per page\n- 💫 Loading states with skeleton UI\n- 🔄 Error handling with retry mechanism\n- 🎯 Type-safe API integrationtry mechanism\n\n\n## Tech Stack\n\n- **Framework**: Next.js 14 (App Router)\n- **UI Library**: React\n- **Styling**: Tailwind CSS\n- **Design System**: PIE Design System (Just Eat's Design System)\n- **State Management**: React Hooks\n- **HTTP Client**: Native fetch API\n- **Form Handling**: Native React form handling\n- **Theming**: Custom theme implementation with localStorage\n\n## PIE Design System Integration\n\nThis application has been built following Just Eat Takeaway.com's PIE Design System guidelines:\n\n- **Design Tokens**: Colors, typography, spacing, and elevation follow PIE standards\n- **Component Patterns**: UI components designed according to PIE specifications\n- **Accessibility**: Follows PIE accessibility standards\n- **Responsiveness**: Layouts adapt to different screen sizes following PIE guidelines\n- **Brand Identity**: Maintains Just Eat visual identity throughout the application\n\nLearn more about PIE Design System at [https://www.pie.design/](https://www.pie.design/)\n\n## Architecture Overview\n\nThe application follows a component-based architecture with a clear separation of concerns:\n\n- **API Layer**: Handles communication with the Just Eat API, including error handling and rate limiting\n- **UI Components**: Components built with Tailwind CSS following PIE Design System\n- **Page Components**: Composing UI components and managing state\n- **Business Logic**: Filtering, sorting, and processing restaurant data\n- **Theme Management**: Supporting dark and light modes with system preference detection\n\n## Project Structure\n\n```\nsrc/\n├── app/                  # Next.js App Router\n│   ├── layout.tsx        # Root layout with providers\n│   └── page.tsx          # Main restaurant search page\n├── components/           # Reusable components\n│   ├── layout/           # Layout components\n│   ├── restaurant/       # Restaurant-specific components\n│   └── ui/               # UI components (PIE Design System)\n├── lib/                  # Utility functions and API service\n│   ├── api.ts            # Just Eat API service\n│   ├── pie-tokens.ts     # PIE Design System tokens\n│   └── utils.ts          # Utility functions\n└── types/                # TypeScript type definitions\n```\n\n## API Integration\n\nThe application integrates with the Just Eat API to fetch restaurant data. Key features of the integration include:\n\n- Proper error handling for API failures\n- Rate limiting protection with exponential backoff for 429 responses\n- Type-safe API responses\n- Mock data support for development and testing\n\n## Running Locally\n\nTo run the project locally, follow these steps:\n\n```bash\n# Clone the repository\ngit clone https://github.com/yourusername/food-delivery.git\ncd food-delivery\n\n# Install dependencies\nnpm install\n\n# Start the development server\nnpm run dev\n```\n\nThe application will be available at http://localhost:3000\n\n\n## API Integration Notes\n\nThis application interacts with the Just Eat API, which has certain limitations:\n\n1. **CORS Issues**: The API may not allow direct browser requests due to CORS restrictions. For a production application, you might need to set up a proxy server.\n\n2. **Rate Limiting**: The API implements rate limiting. The application handles 429 responses with exponential backoff.\n\n## Future Improvements\n\n- Add unit tests with Jest/React Testing Library\n- Implement server-side rendering for better SEO\n- Add more filtering options (delivery time, rating, etc.)\n- Implement pagination for large result sets\n- Add geolocation support to automatically detect user's location\n- Improve API error handling with more detailed messages\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Architecture Decisions\n\n### Choice of Framework and Libraries\n\nI chose **Next.js** with **React** as the primary framework for this application because:\n\n1. **Performance**: Next.js provides excellent performance optimization out of the box.\n2. **Developer Experience**: React's component model allows for a clean, modular codebase.\n3. **Scalability**: The application could easily grow to include more features like restaurant details, orders, etc.\n4. **SSR/SSG Capability**: While not implemented in this version, Next.js offers the option to server-render pages, which could improve SEO and initial load performance.\n\nFor styling, **Tailwind CSS** was chosen because:\n1. **Utility-first approach**: Enables rapid UI development without leaving HTML\n2. **Consistency**: Built-in constraints help maintain a consistent design system\n3. **Performance**: Only generates CSS for used styles, resulting in minimal CSS\n\n### Component Structure\n\nThe application is structured into reusable components following these principles:\n\n1. **Separation of Concerns**: UI components (buttons, cards) are separated from business logic components (restaurant lists, filters)\n2. **Composition over Inheritance**: Smaller components are composed to create more complex UI elements\n3. **Container/Presentational Pattern**: Data fetching and business logic are separated from presentation components\n\nKey components include:\n- `SearchForm`: Handles outcode input and validation\n- `RestaurantGrid`: Displays the list of restaurants\n- `RestaurantCard`: Individual restaurant display\n- `CuisineFilter`: Filtering functionality by cuisine\n\n### API Integration Approach\n\nThe API integration follows these best practices:\n\n1. **Error Handling**: Comprehensive error handling for various failure scenarios (network, 404, 429, etc.)\n2. **Rate Limiting Protection**: Exponential backoff strategy for 429 responses\n3. **Mock Data Support**: Fallback to mock data when API is unavailable\n4. **Type Safety**: TypeScript interfaces ensure correct data structure handling\n\n### Testing Approach\n\nThe testing strategy for this application would include:\n\n1. **Unit Tests**: Testing individual components and functions in isolation\n   - API service functions\n   - Utility functions for filtering and data transformation\n   - Form validation logic\n\n2. **Component Tests**: Testing UI components with React Testing Library\n   - Form submission behavior\n   - Filtering functionality\n   - Restaurant card rendering\n\n3. **Integration Tests**: Testing the integration between components\n   - Search form submission leading to restaurant data display\n   - Filter selection affecting the restaurant list\n\n4. **E2E Tests**: Full user flow testing with Cypress or similar\n   - Complete user journey from search to filtering\n\n## Suggested API Improvements\n\nBased on working with the Just Eat API, here are some suggested improvements:\n\n1. **Pagination Support**: The API returns all restaurants at once, which could be problematic for areas with many restaurants. Pagination would improve performance.\n\n2. **Filtering Options**: Server-side filtering would be more efficient than client-side filtering, especially for large datasets.\n\n3. **Consistent Data Structure**: Some restaurant data appears inconsistent (missing fields, different format for similar data).\n\n4. **CORS Support**: The API doesn't support direct browser requests, which complicates frontend integration.\n\n5. **Rate Limiting Documentation**: Clear documentation on rate limits and retry strategies would be helpful.\n\n6. **Schema Documentation**: Comprehensive OpenAPI/Swagger documentation would make integration easier.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmartins-dev%2Ffood-delivery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgmartins-dev%2Ffood-delivery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmartins-dev%2Ffood-delivery/lists"}