Teste Técnico Frontend
join.com
A join auxilia para que você crie anúncios de emprego cativantes, obtenha candidatos gratuitamente, divulgue em várias plataformas, como LinkedIn, Indeed, XING e muitas outras, e gerencie seus candidatos de forma eficaz!
Teste técnico desatualizado
Um ou mais links de referência deste teste técnico podem não estar funcionando. Use-o apenas como referência.
Sobre o Teste
Este desafio técnico de desenvolvimento consiste em criar uma aplicação React que exiba uma lista de casos de roubo de bicicletas relatados para a área de Berlim. A aplicação deve permitir a paginação dos casos de roubo, exibir o número total de casos, filtrar os casos por título parcial e por intervalo de datas, exibir um estado de carregamento, um estado de erro e um estado vazio quando não há resultados. É necessário fazer requisições para a API do Bikewise para obter o conteúdo em JSON e exibi-lo na interface. Algumas tecnologias sugeridas são React, Jest + react-testing-library / enzyme para testes, TypeScript, CSSinJS (como styled-components ou styled-system) e um linter de código. O layout das páginas pode ser baseado nos wireframes fornecidos.
Instruções do Teste
Stolen Bike Index - JOIN Coding Challenge - Frontend (React)
Context
Stolen bikes are a typical problem in Berlin. The Police want to be more efficient in resolving stolen bike cases. They decided to build a software that can automate their processes — the software that you're going to develop.
This app needs to display the list of reported bike thefts based on the Bikewise API https://www.bikewise.org/documentation/api_v2.
Product Requirements
As a police officer:
- I want to see a list of reported bike thefts for the Berlin area.
- I want to see the first 10 bike theft cases, with the ability to - paginate (10 cases per page).
- I want to see a total number of bike theft cases.
- For each reported bike theft I want to see:
- Case title
- Case description
- Date of the theft
- Date of when the case was reported
- Location of the theft
- Picture of the bike, if available
- I want to filter reported bike thefts by partial case title.
- I want to filter reported bike thefts by date range.
- I want to see a loading state until the list is available.
- I want to see an error state if the list is unavailable.
- I want to see an empty state if there are no results.
Your Mission
Create the React application that satisfies all must-have requirements above, plus any nice-to-have requirements you wish to include.
For that, you’ll need to make requests to a publicly-available API https://www.bikewise.org/documentation/api_v2 to get JSON content and print it on view.
The API is known to have some limitations. If you are not able to implement a particular requirement, please provide a description of what and why you could not implements.
For the layout of each page, please refer to the provided wireframes:
Also, you can take inspiration from these resources:
You can use any boilerplate/approach you prefer (nextjs, create react app, ...), but try to keep it simple. We encourage you to use your favorite tools and packages to build a solid React application.
You can assume that you do not have to support legacy browsers. Feel free to use modern features such as fetch or flexbox.
Host the website on the service of your choice (zeit, Heroku, AWS, GCloud, ...)
Tech Requirements
- React
- Tests: Jest + react-testing-library / enzyme
- Code Linter
- Typescript is a plus
- CSSinJS is a plus: styled-components, styled-system, ...
Instructions
- Fork this repo
- The challenge is on!
- Build a performant, clean and well-structured solution
- Commit early and often. We want to be able to check your progress
- Make the app public. Deploy it using the service of your choice
- Create a pull request
- Please complete your working solution within 7 days of receiving this challenge, and be sure to notify us when it is ready for review.
License
We have licensed this project under the MIT license so that you may use this for a portfolio piece (or anything else!).