QR Code para acessar a aplicação ou clique aqui
Este projeto consiste em uma aplicação web de feed de postagens onde os usuários podem visualizar histórias sobre locais históricas do Rio de Janeiro e filtrá-los por título usando uma barra de pesquisa. Além disso, a interface inclui botões de navegação no rodapé e uma animação suave durante a busca, melhorando a experiência do usuário.
- React: Uma biblioteca de JavaScript para construir interfaces de usuário.
- Styled-Components: Permite a escrita de CSS em JavaScript para estilizar componentes React.
- React Transition Group: Utilizado para fazer transições e animações ao adicionar ou remover componentes do DOM.
- useState: Hook do React que permite adicionar o estado a componentes funcionais.
- Leaflet: Uma biblioteca de mapas de código aberto para fornecer mapas interativos.
- Exibição de postagens com informações e imagens relevantes.
- Filtragem de postagens por título usando uma barra de pesquisa.
- Animações suaves para transições de entrada e saída de postagens.
- Layout responsivo que se adapta a diferentes tamanhos de tela.
- Componente de "Não Encontrado" para feedback visual quando não há postagens correspondentes à pesquisa.
- Exibição de mapas interativos com a localização das histórias usando a biblioteca Leaflet.
Para rodar o projeto localmente, siga estas etapas:
- Clone o repositório para sua máquina local:
git clone https://github.com/fseda/nexus-app.git
- Entre no diretório do projeto:
cd nexus-app
- Instale as dependências do projeto:
npm install
- Execute a aplicação:
npm run start
A aplicação estará disponível em http://localhost:3000
no seu navegador.
A aplicação está estruturada da seguinte maneira:
components/
: Contém todos os componentes reutilizáveis comoFooterButton
,MenuComponent
,PostComponent
,SearchBar
eNotFound
.App.js
: O componente raiz da aplicação que orquestra todos os outros componentes.index.js
: O ponto de entrada para a aplicação React.App.css
: Arquivo CSS global para estilos gerais.
Link para o slide: https://docs.google.com/presentation/d/1AclrcGwHlvewiejt2qv2XXGU0VBQTR1f8QvO5CuMZZ8/edit?usp=sharing
Link para o trello: https://trello.com/b/cDoXwrzN/feed-passeio-carioca