Technical Assignment | Frontend Developer
Overview
We have an exciting opportunity for you to showcase your front-end development
skills. We invite you to build an engaging landing page for a Food Menu App using
React. This assignment aims to assess your technical abilities and creativity in design
and user experience.
Let's dive into the details! ⏩
The Task
Your main goal is to create a Food Menu Webpage! 🍔🍕
Your task is to create a landing page with the following sections:
● Filters section
● Food items section
● Header with the Logo and Search Bar
● Footer just to balance the bottom of the web page
To make it even more interesting, we're using the Food API available at
https://www.themealdb.com/api.php. Plus, we'd like you to mimic the design, colors,
and theme of https://www.swiggy.com/ for a cohesive look.
Ensure that the application is fully responsive and compatible across various screen
sizes.
Key Components:
● Header Section:
○ Please note, that the search bar does not need to be functional, only the
design needs to be achieved.
Privileged and confidential © Brainstorm Force
● Filters Section:
○ Draw inspiration for the style and structure of the Filter Section from the
reference image.
○ Upon clicking the “Filter” tag, display a dropdown.
○ You only have to implement “Filter By Area” (See API docs for relevant
endpoints). The dropdown should populate a list of Areas along with
HTML Radio boxes. Users can select any Area, and clicking “Apply”
should dynamically update the Food Items Section with matching Food
Items from that Area.
○ Sort By - Consider implementing Sorting Functionality, allowing users to
Sort Food Items Alphabetically.
● Food Items Section (Data Grid):
○ By default, the Food Items Section should display all Indian food items
(refer to the API docs). Note that, despite the actual website displaying
restaurants, we will focus on showcasing food items within the scope of
Privileged and confidential © Brainstorm Force
this assignment. The primary emphasis lies on the style, structure, and
functionality rather than the specific data.
○ Each food item card should include an image, name, and ratings (ratings
can be generated randomly). Clicking on a food item should open a Modal
with additional details about the selected item. (See API docs for
relevant endpoints).
○ Clicking on a food item from the Food Items Section should trigger the
opening of a Modal that provides additional details about the selected
food item. Feel free to be creative in designing the Modal, but ensure
that the colors and theme remain consistent with the overall aesthetics.
○ Incorporate Pagination, maintaining consistency with the overall colors
and theme.
● Footer Section:
● API Reference: https://www.themealdb.com/api.php
Tools & Technology
Use the following tools & technology to build the app:
● Must have: React
● Good to have: Tailwind CSS, State Context API, Redux, Jest
● Must avoid: jQuery
● Try to use as few libraries as possible
Privileged and confidential © Brainstorm Force
How You'll Be Evaluated
● Design (UI / UX / Responsiveness, Colors & Theme) - 20 Marks.
● Functionality (Filters, Sorting, Pagination) - 30 Marks.
● Proper use of React (Hooks, Component Hierarchy) - 20 Marks.
● Tests (Passing JEST Tests) - 15 Marks.
● Code Quality & Presentation (Formatting, Comments, Commits, README,
Video, Deployed Link) - 15 Marks.
Submission Instructions
1. Upload your work on GitHub.
2. Keep the GitHub repository private and share it with the following
collaborators:
a. bsf-zanev
b. patilvikasj
c. neerajmasai
d. BabuTechBsf
3. Name your repository: <Your Name> - Frontend Developer.
4. Use clear commit messages & PR descriptions.
5. Include a video URL in the PR description demonstrating your app's
functionality.
6. Share your PR/Branch link by replying to our email.
Privileged and confidential © Brainstorm Force
Important:
● This dummy assignment can take roughly 3 - 4 hours to complete.
● Changing the repository name after inviting collaborators will automatically
cancel the invitation. Therefore, please ensure that you invite collaborators
after completing all other steps and as a last step.
Wondering why to put effort into this assignment?
If you achieve a score of 75 or higher, we would like to express our appreciation for
your time and efforts by gifting you a premium Brainstorm Force branded T-shirt.
Hopefully, it inspires you to give your best shot.
Does it look like a fun assignment? All the best 👍🚀
Privileged and confidential © Brainstorm Force
