Um aplicativo para fazer uma integração com o REST Countries API para extrair dados dos países e exibi-los na aplicação.
Esta é uma solução para o desafio da API REST de países com alternância de tema de cores no Frontend Mentor. Os desafios do Frontend Mentor ajudam você a melhorar suas habilidades de codificação através da construção de projetos realistas.
- URL no Frontend Mentor: https://rest-countries-api-eriveltonsilva.vercel.app/
- URL do site em produção: https://www.frontendmentor.io/solutions/rest-countries-api-with-color-theme-switcher-MlQpJKmR--
O usuários devem ser capazes de:
-
Ver todos os países da API na página inicial.
-
Pesquisar um país usando um campo
input. -
Filtrar países por região.
-
Clicar em um país para ver informações mais detalhadas em uma página separada.
-
Clicar nos países de fronteira na página de detalhes.
-
Alternar o esquema de cores entre o modo claro e escuro.
- Botão para ver mais países, limitando 16 países na página home.
Para rodar o repositório na sua máquina, será necessário clonar o mesmo e dar os respectivos comandos para iniciar um servidor do projeto através do Vite:
npm installnpm run devTambém é recomendado a instalação das seguintes extensões para a organização e padronização do projeto:
-
ES7+ React/Redux/React-Native snippets (opcional)
-
Todo Tree (opcional)
| Folders | Folders | Description |
|---|---|---|
src/ |
||
assets/ |
Serve para armazenar imagens (imagens leves, se forem pesadas sempre prefira hospedar em uma CDN), ícones, etc. | |
components/ |
Componentes reutilizáveis da aplicação. Componentes que são unidades para sua aplicação, um button, um dropdown, um modal, etc. | |
hooks/ |
Essa pasta é utilizada para armazenar hooks que são genéricos, têm interação com hooks do React (useState, useEffect) e normalmente reutilizáveis e qualquer projeto, exemplos: useScreenSize, useLocalStorage, useSessionStorage, useUserActive. | |
layout/ |
Essa pasta é utilizada para os layouts. | |
pages/ |
As pages são as páginas que usam vários componentes. É essa a página que o usuário vai ver. | |
services/ |
Aqui ficam as configurações de HTTP clientes, normalmente utilizando axios. | |
store/ |
Ficam as definições de state managers, context api, zustand, redux. | |
utils/ |
Funções utilitárias como formatCurrency, formatPhone, convertTimezone, parsePhone (javascript puro). |
Esta estrutura de pasta foi inspirada na estrutura de João Bibiano, que se encontra no seguinte repositório:
https://github.com/joaobibiano/react-js-project-structure-lesson/blob/main/README.md .
 Erivelton Silva |
 Luiz Honorato |
 Dercio JdS |
 Pedro Alberto |
 Manuel Ventura |
 Fernando Ximenes |
main -» branch em produção
dev -» branch para desenvolvimento
Branches locais devem seguir o padrão: <iniciais_do_colaborador/identificador_da_task/título_da_task>
Exemplo:
WA/TASK-130/Página_de_Detalhes
Cada alteração deve ser feita a partir de PR's.
Devs devem fazer o checkout da branch dev e criar uma PR para a mesma (branch dev).
Após a PR ser aprovada, o criador da PR deverá fazer o merge (squash and merge) e deletar a sua branch.
Ficou convencionado que não seguiremos padrão, apenas que os commits devem ser em português.
✔️ Projeto finalizado 🚀🎉🎉