Este é um projeto boilerplate para o desafio Frontend GreenThumb.
O objetivo deste projeto é criar uma aplicação web que consuma a API de produtos fictícios GreenThumb e permita filtrar os produtos por categoria. Além disso, o projeto deve ser responsivo e seguir o design do Figma proposto para Desktop e Mobile.
Todas as imagens e ícones utilizados no projeto estão disponíveis na pasta assets
.
Fique à vontade para utilizar qualquer biblioteca que desejar.
Acesse o design do projeto no Figma: GreenThumb Frontend Challenge
A API de produtos fictícios GreenThumb está disponível em:
https://front-br-challenges.web.app/api/v2/green-thumb/
A API aceita os seguintes parâmetros:
sun
:no
,low
ouhigh
water
:rarely
,regularly
oudaily
pets
:true
oufalse
Exemplo de requisição:
curl https://front-br-challenges.web.app/api/v2/green-thumb/?sun=high&water=regularly&pets=false
Exemplo de resposta:
[
{
"id": 1,
"name": "Euphorbia eritrea",
"sun": "high",
"water": "rarely",
"url": "https://storage.googleapis.com/front-br-challenges.appspot.com/green-thumb-v2/plants/euphorbia-eritrea.png",
"price": 25,
"toxicity": false,
"staff_favorite": true
},
{
"id": 2,
"name": "Succulent Bowl",
"sun": "high",
"water": "rarely",
"url": "https://storage.googleapis.com/front-br-challenges.appspot.com/green-thumb-v2/plants/succulent-bowl.png",
"price": 30,
"toxicity": false,
"staff_favorite": false
},
...
]
- Conhecimento de React
- Conhecimento de CSS (Fidelidade ao design)
- Conhecimento de responsividade
- Conhecimento de consumo de API
Você pode se destacar se utilizar:
- Boa organização de pastas e arquivos no projeto (arquivos de estilos, testes, consultas à API, etc)
- Boas práticas de desenvolvimento
- Utilização de TypeScript (tipagem de componentes (props), objetos provenientes da API, etc)
- Utilização de bibliotecas de estilização (styled-components ou emotion, etc)
- Testes usando Jest ou React Testing Library
- Uso de variável de ambiente para a configuração da API
- Faça um fork deste repositório
- Rode
yarn
para instalar as dependências - Rode
yarn dev
para iniciar o projeto - Acesse
http://localhost:5173
para ver o projeto rodando (ou a porta que o Vite mostrar no terminal)