Frontend Engineering Assignment
Frontend Engineering Assignment
Initial Setup:
Search page:
1. Create a Search page to search planets. Use any React library like Material UI or Ant
design or any other library you are familiar with. (We have used Ant Design library in
the image below)
2. We can search planets by text. Show the search input at the top of the page. Pressing
enter should trigger the search. Searched text should persist in the input.
3. Show results in rows, show rows below the input. Each row has a title and description.
4. Show three filters. Every filter will be multi select
a. Filter for color
b. Filter for shape
c. Filter for size
5. Changing any filter option should auto refresh the results. Even if the search text is
empty, changing filters should update the results.
6. Filtered search results should be shareable. Create a flow such that users can share
the filtered results. If one user shares the search result with another user, the exact
same filters should be applied for another user, search text should be populated, correct
api requests should be made to fetch filtered results directly.
1. https://api-planets.vercel.app/planets
2. https://api-planets.vercel.app/shapes
3. https://api-planets.vercel.app/colors
4. https://api-planets.vercel.app/sizes
6. Filters API:
a. https://api-planets.vercel.app/planets?color=ID
b. https://api-planets.vercel.app/planets?shape=ID
c. https://api-planets.vercel.app/planets?size=ID
d. IDs can be multiple (In case of multiple IDs they need to be comma separated)
7. Filters and text query parameters are optional and all the options can be clubbed in a
single request:
https://api-planets.vercel.app/planets?q=text&color=ID&shape=
ID&size=ID
Don't miss the most important point of the assignment: Filtered search results should be
shareable
Technical plus points – following will earn you extra points:
● Keeping the data flow single directional, top to bottom.
● Ensuring that the UI is aesthetically pleasing
● Keeping code clean
● Using react hooks
● Making reusable components
● Deploying the code and commit the configuration in the code repository
● Making the page completely responsive.
Important Note:
- Add proper readme in the github repository so that it's easy for the reviewer to setup the
code and test out