Clique AQUI para conferir o resultado final do site!
Tecnologias e Ferramentas utilizadas:
Status do Projeto:
Concluído ✔
Clique aqui para acessar repositório do Back-End do projeto Labeddit
- 1. Resumo do Projeto
- 2. Definição de Produto
- 3. Lista de Funcionalidades
- 4. Protótipo
- 5. Instalação
- 6. Inicialização
- 7. Tecnologias e Ferramentas Utilizadas
- 8. Requisitos do Projeto
- 9. Desenvolvedora
O Labbedit é um projeto full-stack de conclusão de curso do bootcamp da Labenu. O projeto consiste em uma rede social na qual é possível se cadastrar, fazer login, criar, editar e excluir posts e comentários. Além disso há a possibilidade curtir ou descurtir posts e comentários de outros usuários.
O projeto Labeddit possui quatro páginas:
Na página de login é possui digitar seu e-mail e sua senha (sendo possível mostrar e esconder como desejar) e entrar no sistema. Caso haja algum erro o usuário será notificado. Ainda nessa página é possivel ir até a página de cadastro caso ainda não tenha um e-mail cadastrado no sistema.
Nessa página o usuário pode criar sua conta fornecendo apenas um apelido, e-mail e senha. Sendo necessário concordar com os termos de política de privacidade. Caso haja algum erro o usuário será notificado. Ao realizar seu cadastro com sucesso o usuário é direcionada para feed.
Em feedpage o usuário vai encontrar uma caixa de texto para criar seu próprio post, com no mínimo um caracter, caso tente criar um post vazio será notificado sobre o erro. É nesta página que ficam todas as postagens de outros usuários nas quais é possível dar like ou dislike. E caso haja no feedpage um post do usuário que está logado ele é capaz de editar ou de excluir sua própria postagem. Há a possibilidade de fazer o Lougout clicando no botão superior direito. Ainda nessa página se o usuário desejar ver os comentários de um post é clicar na postagem que será redirecionada para a página de comentários.
Na página principal você pode dar like no post em questão e acompanhar os comentários sobre o mesmo, podendo dar like ou dislike como preferir. É possível também adicionar o seu próprio comentário e caso haja um comentário criado pelo usuário logado no momento ele tem acesso à funcionalidade de editar e deletar o comentário. Além disso, para melhorar a experiência do usuário a página possui um botão para retornar ao feedpage. Ou se preferir fazer o logout do sistema clicando no botão superior direito.
O Labeddit oferece diversas funcionalidades aos usuários, inclusive um CRUD completo de posts e comentários:
- Cadastro de usuário
- Login de usuário
- Logout de usuário
- Criação de post
- Edição de post
- Deleção de post
- Criação de comentário
- Edição de comentário
- Deleção de comentário
- Curtir comentário
- Descurtir comentário
- Curtir posts
- Descurtir posts
O Design de app mobile first foi fornecido pela Labenu, se preferir acesso direto pelo Figma clique aqui, ou então acompanhe as imagens abaixo:
Ter instalado:
- Node.js e o pacote npm
Caso não tenha instalado:
-
Faça o download do Node nesse link da versão LTS, instale na sua máquina e verifique a instalação com o comando:
node -v
-
E para verificar a versão do npm:
npm -v
-
Se rodando os dois últimos comandos obteve a versão do node e do npm, acesse a raiz do projeto e então rode o seguinte comando:
npm install
-
Para rodar o projeto localmente rode o seguinte comando:
npm run start
🔝
O frontend do projeto labeddit foi construído com:
- Javascript
- React
- Axios
- Styled-Components
- Material UI
- Figma
- [✔️] Respeitar o layout do Figma
- [✔️] Uso do ReactJS
- [✔️] Site deployado
- [✔️] Documentação README
Este projeto foi desenvolvido por: