Scribd
Upload
11 views

Frontend Engineering Assignment

The assignment requires creating a NextJS+Redux page that allows users to search for planets using a specified API. The search page must include input for text search, multi-select filters for color, shape, and size, and the ability to share filtered results. Best practices such as clean code, responsiveness, and proper documentation in a GitHub repository are emphasized for submission.

Uploaded by

Soumya Ranjan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Frontend Engineering Assignment

The assignment requires creating a NextJS+Redux page that allows users to search for planets using a specified API. The search page must include input for text search, multi-select filters for color, shape, and size, and the ability to share filtered results. Best practices such as clean code, responsiveness, and proper documentation in a GitHub repository are emphasized for submission.

Uploaded by

Soumya Ranjan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Take home Assignment

Create a NextJS+Redux page as described below:

Initial Setup:

- Use base url - https://api-planets.vercel.app/ for backend.


- Use any boilerplate, CLI to start the nextjs codebase.
- Do not skip redux. Redux implementation is mandatory.

Guidelines for submission:

- Create a private repo on github, add abhishek-almabase as a collaborator.


- Please commit often and with good commit messages. This will allow us to see how
you've approached the problem. Don't worry about changing things often.
- Don’t hesitate to ask questions if you’re uncertain about the task or if anything is unclear.
- Follow best-practices and standards. Prettify the code. Lint the code.

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.

Available API endpoints:


Following API endpoints are available to use:

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

5. Text search API: https://api-planets.vercel.app/planets?q=text

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

All the best!!

You might also like