MERN Code Challenge

Your task is to create an elegant Star wars Fan Website with user profile.

APIs: https://swapi.dev/documentation

In the documentation, please find the menu panel titled with Resources on the left-hand side and utilize that to create the application.

Task

You need to create a server in NodeJs will fetch data from swapi.dev and send it to your frontend website. The Front-end website needs to be developed using ReactJs. Except for the login endpoint, the rest of the endpoints will need to access through the token that is returned after a successful login.

Steps

Write a React app(with proper folders) that utilizes APIs from your NodeJs server.

1. Create User Authentication mechanism (registration/login) on server. Store the user information in a MangoDB. Create Registration and Login apis.
2. Show the login page to ask the user for credentials. Once the user is validated, return a token from your NodeJs server which will be used for the rest of the API calls to your server.
3. Use redux for state management and Axios (or similar library) for fetching data from APIs.
4. Create a Login page and validate the user using the api created in the step 1.
5. Utilize the APIs and create a Home page with at least three categories/resources i.e People, Starships, and Planets (follow the instructions given under API to find out resource panel on swap.dev).
6. When the user clicks on a category, it will navigate to another page/panel which shows subitems in that category.
7. Display spinner/loader or placeholder component while the API request is ongoing.
8. Create a really elegant, good looking and responsive application that adopts to different screen resolutions. DO NOT submit the test with basic design else your test will be rejected immediately.
9. Write your own css to design the pages. DO NOT use any third party library for CSS.
10. Add images for each category and sub-items. Fetch the images from the NodeJs server and DO NOT add them on the frontend. You will fail the test if you did not add images or if the images are fetched locally.
11. Push the code to a public GitHub repo with a `README.md` that explains how to execute the app.
12. Deploy the app onto a Heroku, AWS instance, or equivalent.

As a sample, you can refer to https://www.starwars.com/films.

Warnings

1. Without images, you will fail the test immediately.
2. Focus on good coding practices.
3. Code quality needs to be good. Bad code quality might get rejected immediately.
4. Exceptions needs to be handled properly.
5. DO NOT add a default GITHUB readme file with template text.

Bonus🌟

1. Create as many reusable components as you can.
2. Dockerize the app.
3. Write realistic unit/end-to-end tests.