DISCLAIMER: This is a completely imaginary scenario for the purposes of this code test. No information here is factual, and you should never make any financial decisions or market predictions based on any of this information.
SmileDirectClub has established a marketing partnership with Nintendo (again, imaginary), and we need to build a page for our website that displays some Pokemon. Our designers have already made the page designs, and Nintendo has provided their PokeApi for content. Users should be able to click on a Pokemon card and learn more about the respective Pokemon.
- Figma Designs: https://www.figma.com/file/ug7dyGZ0q28Gdqn6OOutBl/Front-End-Interview-Exercise?node-id=0%3A1
- NOTE: You must be logged in to Figma to inspect/view the design specs. You can sign up for a free account at https://www.figma.com/
- Data Source / API: https://pokeapi.co/
- NOTE: All of the data and images used in the cards should be pulled from this API
As a visitor to this fake SmileDirectClub website, I want to see three Pokemon cards that I can click on, so that I can find even more information about each Pokemon.
- Users can view the three Pokemon cards and accurrate info. - The Pokemon should match the ones used in the designs.
- Users can click to find more information about each Pokemon from each card.
Please do not feel the need to spend more than a few hours on this task. We are thankful for the time you are taking to interview for this position, and we understand that the time limit might mean things can't be completely perfect.
This is a bare-bones Nuxt environment for the purpose of the front end code exercise. It is intentional that there are no linters or extra code validations included (eslint, prettier, etc) for the sake of being able to focus on the exercise without opinionated compile errors. Feel free to add/include them if you prefer to have them while working. Inclusion of them will not have any affect on how we assess the exercise.
We care about observing clean, well-organized, and working code. How you get it there is up to you. Have fun!
- Nuxt: https://nuxtjs.org/
- CSS Framework already installed for HTML templating in this project: https://bulma.io/documentation/
- Vue Component library already installed in this project: https://buefy.org/documentation
- Node v14.17.0 - https://nodejs.org/en/
# install dependencies
$ npm i
# serve with hot reload at localhost:8000
$ npm run devFor detailed explanation on how things work, check out Nuxt.js docs.
When you are ready for us to view the exercise:
- Push your work to a public git repository of your choice that we can view remotely.
- Email the link to us. (If no specific email has been listed here, please email it to your SmileDirectClub talent acquisition point of contact)
- Prepare to walk us through your code and the decisions you made via screen share in your next interview.