Giter VIP home page Giter VIP logo

pokemon-frontend's Introduction

Pokemon test

Hello. This is the Immfly frontend code test. While cloning this repository, you will get the base project. If you have enough frontend skills, you will be able to run it locally. First time, you should see this webpage:

Features to implement

Style the main list

You have to style the main list like in this image: Notice that when user hovers a pokemon, its background becomes gray.

Pokemon detail page

Add the possibility to click on a pokemon and go to the detail page, like in this image:

Notice that the pokemon detail url is different. It is /pokemon/:name. In the charizard example is /pokemon/charizard.

Api endpoint

The api endpoint to get the pokemon detail information is https://pokeapi.co/api/v2/pokemon/:name.

For example:

  • Charizard: https://pokeapi.co/api/v2/pokemon/charizard
  • Bulbasaur: https://pokeapi.co/api/v2/pokemon/bulbasaur

Demo

You can watch/download the video showing how the app finally should work: demo.

We want to see

  • React knowledge
  • Css skills
  • ECMAScript6 skills
  • Clean code
  • How you code

You should

  • Use redux (the project is already working with it).
  • Use flex in the css style.
  • Keep responsiveness. As the video shows, the pokemon list should adapt to the screen size and show three pokemons per row on large width screen size, two pokemon per row on medium width screen size and one pokemon per row on mobile width sizes. (You have a file named mixins.scss, in which you can use the existing medias in order to configure the responsiveness).

Bonus

  • Add tests.
  • Use the existing color palette (palette.scss), font-sizes (font-sizes.scss), media queries (mixins.scss) and padding sizes (variables.scss).
  • Follow existing linter. This project follows the StandardJS code style. There is a script task on the package.json named standard (npm run standard) that fixes automatically your code style faults.

You should not

  • Install another package.
  • Use bootstrap.
  • Do dirty things, like send via props a lot of data.

Once you finish the test, throw a Pull Request to the master branch on this repository.

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.