We would like you to build a “mini app” using the https://rickandmortyapi.com/ REST API, (please do not use the JavaScript library available). The app should consist of a “Character Listing” page and a single “Character Information” page. The challenge comes in two parts:
Create a custom rest API to pre-filter all required data needed for the frontend. The required data includes getting all Alive, Rick characters along with one or more of their associated data types Origin, Location and or Episode data.
The interfaces in the codebase will show you what the data structure should look like, if you need to extend them, feel free!
Build a simple UI to list all Alive Rick characters using the basic wireframes provided. The character tiles should click through to their own character page, again using the wireframes for the “single character” page with the relevant information shown.
- Your chosen method for fetching and aggregating data.
- Chosen folder structure
- The layout should be based on the wireframes provided.
- Final work (whether complete or part complete) should be submitted in a git repository. (ideally we would like to see a commit history of some sort). With a README.md file, so we can run the app locally and test it ourselves.
- DO NOT use the Rick and Morty JavaScript library. We want to see how you architect aggregating data server side to pass it to the frontend.
- The site should be built using HTML, CSS and JavaScript (TypeScript), and as far as styling is concerned: SCSS, Pre/Post CSS, CSS Modules, and CSS-in-JS are all encouraged.
- The site should be built using responsive techniques.
- YOU MUST use the boilerplate provided.
(Not a requirement but if you think it will help us assess your skill level and passion). If you have the time, here are some suggestions to enhance the app:
- Include Alive Morty characters (it is Rick and Morty at the end of the day - 😆)
- Use path aliases
- Introduce a build pipeline using Github CI / Circle CI or other CI tools.
- Responsive images
- Unit tests
- Performance optimisation (add a cache layer)