Este é um projeto de uma aplicação web para busca de endereços por CEP, desenvolvido com React, Vite, Bootstrap e React-Bootstrap.
💻 Explore o Projeto: Buscador de Endereço
- Introdução
- Tecnologias Utilizadas
- Funcionalidades
- Instalação
- Uso
- Estrutura do Projeto
- Capturas de Tela
- Contribuição
- Autor
O projeto Buscador de Endereço permite que usuários insiram um CEP e obtenham informações detalhadas sobre o endereço correspondente. A aplicação também mantém um histórico de pesquisas, permitindo fácil acesso a pesquisas anteriores.
- React: Biblioteca JavaScript para construção de interfaces de usuário.
- Vite: Ferramenta de construção rápida para projetos web modernos.
- Bootstrap: Framework CSS para design responsivo e componentes estilizados.
- React-Bootstrap: Conjunto de componentes Bootstrap totalmente construídos com React.
- React-Bootstrap-Icons: Conjunto de ícones para React baseado no Bootstrap Icons.
- Busca de endereços por CEP.
- Exibição de informações detalhadas do endereço.
- Histórico de pesquisas com opção de remoção de itens.
- Interface responsiva que se adapta a diferentes tamanhos de tela.
-
Clone o repositório:
git clone https://github.com/Iago-Amorim/buscador_de_endereco_react.git cd buscador_de_endereco_react
-
Instale as dependências:
npm install
-
Inicie o servidor de desenvolvimento:
npm run dev
-
Abra o navegador e acesse:
http://localhost:5173
- Digite um CEP no campo de busca e clique no botão "Buscar" para obter as informações do endereço.
- O histórico de pesquisas é exibido na lateral da tela em dispositivos maiores, ou abaixo em dispositivos móveis.
- Clique em um item do histórico para ver os detalhes do endereço correspondente.
- Use o botão de lixeira para remover um item do histórico.
/src
|-- /api
| |-- viaCepApi.js # Função para buscar endereço por CEP usando a API ViaCep
|-- /components
| |-- CepSearch.jsx # Componente para busca de CEP
| |-- CepDisplay.jsx # Componente para exibir informações do endereço
| |-- SearchHistory.jsx # Componente para exibir histórico de pesquisas
| |-- Header.jsx # Componente de cabeçalho
| |-- Footer.jsx # Componente de rodapé
|-- App.jsx # Componente principal da aplicação
|-- main.jsx # Ponto de entrada da aplicação
- Faça um fork do projeto.
- Crie uma branch para sua feature (
git checkout -b feature/nova-feature
). - Commite suas mudanças (
git commit -m 'Adiciona nova feature'
). - Faça push para a branch (
git push origin feature/nova-feature
). - Abra um Pull Request.
- Iago Assunção Amorim