Teste Técnico Frontend
Wiredcraft
Ajudamos as maiores marcas do mundo a criar soluções de software e hardware que impactam milhões de pessoas
Sobre o Teste
Para o desafio técnico "Frontend", as tecnologias que deverão ser utilizadas são: React, React-router (opcional), Redux ou MobX para gerenciamento de estado, SASS ou Less para CSS. O desafio consiste em construir uma página da web simples seguindo um design que utiliza o layout "Masonry Layout" e possui requisitos como carregar uma lista de URLs de imagens de uma API JSON, aplicar o layout "Masonry Layout", fornecer uma entrada de pesquisa para filtrar as imagens pelo atributo "name" e fazer a página responsiva. Também há requisitos avançados, como implementar "lazy-loading".
Instruções do Teste
Frontend
Context
We need to build a simple webpage following a design like the following screenshot, which features the "Masonry Layout". See the Figma link for the design.
Requirements
- It should load a list of picture URLs from a JSON API. Please use the JSON file below as a sample, and build a simple API to serve it.
- It should apply Masonry Layout. See the link for the definition and feature list.
- It should provide a search input, and allow the users to search images with the "name" attribute. The search input should work as a filter and automatically filters with the user input.
{% file src="../.gitbook/assets/data.json.zip" caption="Data Source JSON file" %}
or download the data.json directly from this repo.
Tech stack
- Use React, and optionally React-router.
- Use a state management tool. We often use Redux or MobX.
- Use SASS or Less for CSS.
- We are open to other 3rd-party tools but please limit the use - it's a test for you to demonstrate your skill after all.
Advanced requirements
Here are some further challenges for you to demonstrate your skills. You can safely skip them if you are not applying as a senior.
- Make it responsive.
- Feature "Lazy-loading".