Front-end interview exercise
A short exercise to work on, as a technical interview preparation
Instructions
In this project, you will find a small front-end application built with React and some other javascript libraries.
Unfortunately, this webapp is not totally integrated, and it's broken 🤕 !
Your mission, if you accept it 😎, will be to finish what's missing and make it works.
- First, you have to get ready for development. Fork the project on github, get the files on your computer, setup the environment, then start the development server. You should see the simple app, with a ranking list.
- The Ranking component is not fully integrated. With the ranking-design-specs.png (or ranking-design.sketch if you prefer to use the Sketch app) as the reference, add styles to the component.
- It seems there is a bug with the time frame selector in the right corner. Find the source of that bug, and solve it to make it work.
- Nice ! Now, we want to add a new feature to the ranking. Let's say we want to open a modal with user details when we click on a profile picture as shown in the demo.mp4 video. The Modal component has been prepared and is already in the App.js file, but right now, it doesn't show up with the clicked user datas. How would you do that ? Implement the changes in the App.js file. (No styling needed).
- Great job ! The app is ready. Commit and push the changes to your Github repo and when you're ready, create a pull request on the origin repository on Github so we can review your work before the meeting.
Project setup
This project was bootstrapped with Create React App, and so, it follows its structure and tools.
Below you will find some commands on how to perform common tasks.
# Intall dependencies
$ npm install
# Launch test sequence
$ npm t
# run the development server
$ npm start
# Create an optimized production build of the app
$ npm run build
If you need more information, you can find the complete version of Create React App guide here.
The project uses the styled-components module for the components styling. If you've never used this module, you may be confused when looking for css files (styling is done in normal javascript files). Remember that it is the same syntax than css, but augmented with some javascript super powers. Check the docs if lost.
Rules to remember
- It should take between 30 min to 2 hours to do it, depending on your approach and your knowledge. Don't make it bigger than what it is.
- Don't sweat it. If you're stuck, take notes of what you have so we can talk about it during the meeting and see how to solve it.
- Commenting your code to explain what you've done is always welcome.