Sobre • Imagens/Links • Linguagens e tecnologias utilizadas • Funcionalidades • Instalação • CI/CD • Testes • Módulos • Instrutores do Bootcamp Alura •
O projeto é uma versão do Instagram, criado com React, Next/js e styled-components. Desenvolvido durante o Bootcamp Front-End Avançado da Alura, o projeto é composto por 6 módulos principais, onde foram separados por etapas de aprendizado.
-
Na página inicial é possivel realizar o cadastro de um novo usuário. Você precisa preencher o formulário com: Nome: Login: Caso queira que seus dados do Github preencham seu perfil no Instalura, só colocar seu login do Github no login do form. Um gif será visualizado demonstrando o sucesso/erro do cadastro.
-
Na página de login, voce precisará passar as seguintes informaçoes: Login: Senha: senhasegura A senha sempre será a mesma, independente do usuário.
-
Na página de profile, caso tenha usado usado o login do Github, será possivel ver sua foto, número de seguidores/seguindo e a quantidade de posts que você realizou. Caso tenha entrado com um login único, será possivel ver uma foto padrão.
-
No menu do usuário, é possivel adicionar um post clicando no botão +. Então o modal é aberto e você poderá colocar a URL de uma imagem. Após seguir para o próximo passo é possivel escolher um dos filtros, para entao realizar a postagem, que poderá ser visualizada, tanto no perfil quanto no feed.
-
Na página no feed, é possivel visualizar todos os seus posts e dar like naqueles que mais gostou.
- Nos projetos da galera, localizados na página no feed, decidi colocar as pessoas que mais me ajudaram a construir esse projeto, além da equipe da Alura.
- Clonar repositorio
$ git clone https://github.com/carolandrade1/instalura.git && cd instalura
- Instalar dependencias
$ yarn install
- Rodar aplicativo
$ yarn dev
- Acesse http://localhost:3000/ e navegue pelo site
Example app with styled-components
Para configuração do projeto utilizei:
-
ESLint: utilizei o eslint com as configuraçõs do airbnb para automatizar a formatação de pequenos problemas como espaços em branco, ponto e vírgula, aspas e vírgulas finais.
-
Husky: foi utilizado para garantir a correção do ESLint com a configuração do pré-commit antes de finalizar o commit.
-
Conventional Commits: fornece um conjunto fácil de regras para a criação de um histórico de commits explícito.
Todos eles já estão instalado no Template base com Next e Styled Components.
Conjunto de processos com os quais se pretende validar um sistema ou aplicação, em momentos diferentes, para verificar seu correto funcionamento. Nesse projeto foram utilizadas as bibliotecas:
Para rodar os testes:
- Rodar testes unitários
$ yarn test
- Rodar testes Cypress
$ yarn test:integration:build
- Caso queira visualizar os testes do Cypress com o app
$ yarn test:integration:open
[x] Módulo 01: JAMStack e layout com React
[x] Módulo 02: State e Forms + boas práticas de Git e GitHub
[x] Módulo 03: Se aprofundando no NextJS
[x] Módulo 04: Testes com Cypress, Jest e React Testing Library
[x] Módulo 05: Área autenticada e gerenciador de conteúdo (CMS)
[x] Módulo 06: Storybook + TypeScript