SocialMedia-Bubble: Front-End 🫧

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

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.

Apresentação

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.

Páginas do Projeto

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.

Tecnologias Utilizadas

Integração com o Back-End

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.

Instalação e Execuçã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 dev

Agora, você pode acessar o projeto na porta local no seu navegador, identificada no terminal 🌍.

Estrutura do Projeto

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