Este projeto refere-se ao desenvolvimento do front-end da rede social fictícia Bubble, criada como parte do curso Web Dev Full-Stack da Códigos do Amanhã (Resilia | Ebanx). O back-end foi desenvolvido na etapa anterior e agora, nesta fase, nosso foco é construir uma interface interativa e amigável para os usuários 🚀.
- Sobre o Projeto 🌟
- Apresentação 🖼
- Páginas do Projeto 🖥
- Tecnologias Utilizadas 💻
- Integração com o Back-End 🔄
- Instalação e Execução 🛠
- Estrutura do Projeto 🗂
- Contribuidores 👥
- Contribuição 🙌
- Licença 📄
Apresentamos a Bubble 🫧, uma inovadora rede social que está reformulando a maneira como nos conectamos no ambiente digital! Nossa missão no projeto atual é criar um front-end robusto que possa interagir de maneira eficaz com a API desenvolvida anteriormente. Ele consome todos os endpoints criados para a API, proporcionando aos usuários uma experiência completa de rede social.
Mergulhe conosco na nossa jornada de criação, desde a ideia inicial até a execução, por meio da nossa apresentação detalhada disponível no Canva.
- LandingPage: Página inicial (Home) com informações sobre a Bubble.
- Cadastro: Página para criação de novas contas.
- Login: Página de login.
- Feed: Página principal da rede social, onde os posts são exibidos e criados.
- RedefinirSenha: Página para redefinição de senha.
O front-end é totalmente integrado ao back-end, que pode ser encontrado em: https://github.com/Renato-Miranda/socialMedia-API. Todas as rotas da API estão sendo consumidas pelo front-end, proporcionando a funcionalidade completa da aplicação.
- Clone este repositório:
git clone https://github.com/Joa1zin/socialMedia-Bubble- Navegue até o diretório do projeto:
cd socialMedia-Bubble- Instale as dependências:
npm install- Execute o projeto:
npm run devAgora, você pode acessar o projeto na porta local no seu navegador, identificada no terminal 🌍.
A estrutura de diretórios do projeto foi organizada da seguinte forma:
- src/ - Contém o código-fonte do projeto.
- assets/ - Ícones e outros recursos gráficos.
- components/ - Componentes reutilizáveis como botões, campos de texto, modais, entre outros.
- pages/ - As páginas do aplicativo, como a página de login, feed, cadastro e landing page.
- services/ - Scripts para interagir com a API.
- style/ - Estilos globais e temas.
- utils/ - Funções utilitárias.
- main.jsx - O ponto de entrada do aplicativo.
- routes.jsx - As rotas do aplicativo.
- public/ - Contém arquivos públicos como imagens e SVGs.
- css/ - Folhas de estilo.
- vite.config.js - Configuração do Vite. E demais arquivos de configuração.
Veja o mapa completo da Estrutura do Projeto:
📦 nome_do_projeto
┣ 📜 .eslintrc.cjs
┣ 📜 .gitignore
┣ 📜 index.html
┣ 📜 package-lock.json
┣ 📜 package.json
┣ 📜 README.md
┣ 📜 vite.config.js
┣ 📂 public
│ ┣ 📜 adicionar.svg
│ ┣ 📜 bg-cadastro.png
│ ┣ 📜 bubble-rec-senha.png
│ ┣ 📜 curtidas.svg
│ ┣ 📜 foto-ana-luiza.png
│ ┣ 📜 icons8-close.svg
│ ┣ 📜 icons8-lixeira.svg
│ ┣ 📜 login-bg.png
│ ┣ 📜 logo-bubble-b.svg
│ ┣ 📜 logo-bubble-w.svg
│ ┣ 📜 lp-bg-shape-x.png
│ ┣ 📜 lp-cadastre.png
│ ┣ 📜 menu-hamburguer-grande.svg
│ ┗ 📜 white-logo-x-bubble.svg
┣ 📂 src
│ ┣ 📜 main.jsx
│ ┣ 📜 routes.jsx
│ ┣ 📂 assets
│ │ ┗ 📂 icons
│ │ ┗ 📜 menu-hamburguer.svg
│ ┣ 📂 components
│ │ ┣ 📂 common
│ │ │ ┣ 📂 Button
│ │ │ │ ┣ 📜 Button.jsx
│ │ │ │ ┗ 📜 Button.style.jsx
│ │ │ ┣ 📂 Footer
│ │ │ │ ┣ 📜 Footer.jsx
│ │ │ │ ┗ 📜 footer.style.jsx
│ │ │ ┣ 📂 Header
│ │ │ │ ┣ 📜 Header.jsx
│ │ │ ┣ 📂 Input
│ │ │ │ ┣ 📜 Input.jsx
│ │ │ ┣ 📂 Modal
│ │ │ │ ┣ 📜 Modal.jsx
│ │ │ ┣ 📂 TextField
│ │ │ ┣ 📜 TextField.jsx
│ │ │ ┗ 📜 TextField.style.jsx
│ │ ┣ 📂 layout
│ │ │ ┣ 📜 Layout.jsx
│ │ │ ┗ 📜 Layout.style.jsx
│ │ ┗ 📂 view
│ │ ┣ 📂 Cadastro
│ │ │ ┣ 📜 CriarConta.jsx
│ │ ┣ 📂 Feed
│ │ │ ┣ 📂 OrdenarPosts
│ │ │ │ ┣ 📜 OrdenarPosts.jsx
│ │ │ ┣ 📂 Posts
│ │ │ │ ┣ 📜 Posts.jsx
│ │ │ ┣ 📂 UsuarioHeader
│ │ │ ┣ 📜 UsuarioHeader.jsx
│ │ ┣ 📂 LandingPage
│ │ │ ┣ 📂 Ferramentas
│ │ │ │ ┣ 📜 Ferramentas.jsx
│ │ │ │ ┗ 📜 ferramentas.style.jsx
│ │ │ ┣ 📂 FiquePorDentro
│ │ │ │ ┣ 📜 FiquePorDentro.jsx
│ │ │ │ ┗ 📜 fique-por-dentro.style.jsx
│ │ │ ┣ 📂 PaginaInicial
│ │ │ │ ┣ 📜 PaginaInicial.jsx
│ │ │ │ ┗ 📜 pagina-inicial.style.jsx
│ │ │ ┣ 📂 PorqueBolha
│ │ │ ┣ 📜 PorqueBolha.jsx
│ │ │ ┗ 📜 porque-bolha.style.jsx
│ │ ┣ 📂 Login
│ │ │ ┣ 📜 PaginaLogin.jsx
│ │ │ ┗ 📜 pagina-login.style.jsx
│ │ ┗ 📂 RecuperarSenha
│ │ ┣ 📜 Recuperacao.jsx
│ ┣ 📂 pages
│ │ ┣ 📂 Cadastro
│ │ │ ┣ 📜 Cadastro.jsx
│ │ ┣ 📂 Feed
│ │ │ ┣ 📜 Feed.jsx
│ │ ┣ 📂 LandingPage
│ │ │ ┣ 📜 LandingPage.jsx
│ │ │ ┗ 📜 landing-page.style.jsx
│ │ ┣ 📂 LoginPage
│ │ │ ┣ 📜 LoginPage.jsx
│ │ │ ┗ 📜 login-page.style.jsx
│ │ ┗ 📂 RedefinirSenha
│ │ ┣ 📜 RedefinirSenha.jsx
│ ┣ 📂 services
│ │ ┣ 📜 postApi.js
│ │ ┗ 📜 usuarioApi.js
│ ┣ 📂 style
│ │ ┣ 📜 GlobalStyle.js
│ │ ┗ 📜 theme.js
│ ┗ 📂 utils
└ 📂 css
┗ 📜 style.css
 |
 |
|---|---|
| Iohan Torres GitHub |
João Victor Machado GitHub |
 |
 |
| Renato Miranda GitHub |
Victor Martins GitHub |
Sinta-se à vontade para contribuir com o projeto. Qualquer feedback ou pull request será muito bem-vindo.
Este projeto está sob a licença MIT.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent