Giter Club home page Giter Club logo

fe-tech-test's Introduction

FE Tech Test

The Challenge

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:

Part 1

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!

Part 2

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.

Please ensure your work checks all the points below – it’s what we will be looking out for
  • 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.

Taking things further:

(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)

fe-tech-test's People

Contributors

mdunbavan avatar joelpierre avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.