🗄️ Projeto React.js 01

Descrição

Um aplicativo para fazer uma integração com o REST Countries API para extrair dados dos países e exibi-los na aplicação.

Table of contents

• Descrição

• Frontend Mentor

• Screenshot

• Links

• Funcionalidades

  • funcionalidades principais
  • funcionalidades extras

• Tecnologias Utilizadas

  • bibliotecas
  • outras

• Rodando O Projeto

• Extensões Do VS Code

• Estrutura De Pastas

• Colaboradores

• Git Flow

  • Branches
  • pull requests
  • commits

• Status Do Projeto

Frontend Mentor

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.

Screenshot

Links

• 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--

Funcionalidades

O usuários devem ser capazes de:

1. funcionalidades principais

• 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.

2. funcionalidades extras

• Botão para ver mais países, limitando 16 países na página home.

Tecnologias Utilizadas

1. bibliotecas

• React.js

• React Router Dom

• Axios

• React Icons

• React Loading

2. outras

• Sass

• Vite

• Storybook

Rodando O Projeto

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 install

npm run dev

Extensões Do VS Code

Também é recomendado a instalação das seguintes extensões para a organização e padronização do projeto:

• EditorConfig for VS Code

• Prettier - Code formatter

• ESLint

• ES7+ React/Redux/React-Native snippets (opcional)

• Todo Tree (opcional)

Estrutura De Pastas

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 .

Colaboradores

Erivelton Silva

Luiz Honorato

Dercio JdS

Pedro Alberto

Manuel Ventura

Fernando Ximenes

Git Flow

1. branches

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

2. pull requests

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.

3. commits

Ficou convencionado que não seguiremos padrão, apenas que os commits devem ser em português.

Status Do Projeto

✔️ Projeto finalizado 🚀🎉🎉