Take-Home Assessment

NextJS app fetching data from API, utilizing Server-Side-Rendering

live demo ↗

Report Bug  ·  Request Feature

👋 Introduction:

---

This project is part of a time-constrained frontend technical assessment for FlipDish. I dedicated approximately 5 to 6 hours to this assessment.

For this project, I prioritized leveraging Next.js for its server-side rendering capabilities, which are particularly beneficial for B2C companies.

Note

When reviewing;

• You can find open/known issues & potential future enhancements here

🔑 Assessment Requirements:

---

REQUIRED FEATURES:

React-based solution to render the menu in a browser:

✅ Renders full menu with the various categories as well as individual menu items

✅ Individual menu item's include: name, image, description & price ( if available... )

✅ Web app is fully Mobile/User-friendly and Responsive.

Understanding of Flipdish Menu Data Structure:

✅ Successful retrieval and handling of data from API endpoint.

✅ Standalone rendering of products with isMasterOptionSet set to true.

✅ Implementation ignores MenuSectionItem when isMasterOptionSet is true.

BONUS FEATURES:

✅ Polished UI design, resembling the Glovo food delivery mobile application.

✅ Implementation of simple unit and integration testing using Vitest and RTL.

✅ Integration of server-side rendering and data fetching.

(back to top)