/projeto-de-conclusao_frontend_lets-dev

Projeto de Conclusão do Módulo Front-end - Let's Dev.

Primary LanguageTypeScriptMIT LicenseMIT

Projeto de Conclusão < Let's Dev >


✅ Projeto:

Aplicação com atividades desenvolvidas durante o módulo de Front-end do Curso Let's Dev, oferecido pela Paipe.co. 🚀


✅ Utilizando a Aplicação:

Executar os seguintes comandos na raíz do projeto:

npm install ou yarn install - Instala dependências necessárias do projeto.

npm start ou yarn start - Compila e disponibiliza arquivos em servidor web local.


✅ A Aplicação:

Páginas:

- Login:

Formulário de acesso, onde o dado do input nome do usuário é salvo no localStorage e atualiza o Contexto, onde o dado é compartilhado com outras páginas da aplicação.

Preview Login

- Home:

Página de boas-vindas, com header, descrição do participante e cards de acesso à outras páginas da aplicação.
Acessa dado nome via Contexto e exibe em tela. Disponibiliza botão para exclusão do dado no localStorage, que atualizará também o Contexto. Caso não seja encontrado registro, o botão não ficará disponível ao usuário.

Preview Home preview Home

- Formulário em HTML e CSS:

Primeiro formulário criado no módulo Front-end durante as aulas de introdução ao HTML e CSS e, posteriormente, adaptado ao ReactTs.
Repositório GitHub da versão HTML e CSS

Preview Formulário HTML e CSS preview Formulário

- Formulário 2.0:

Formulário funcional agora criado em ReactTs, HTML e CSS, com layout mais elaborado, onde os dados informados são coletados e retornam em um alert na tela.

Preview Formulário 2.0 preview Formulário 2.0

- Consumindo API's:

Página de exercício Consultando API viaCEP, onde é possível informar um número de CEP, os valores são salvos no Estado e o resultado da pesquisa é retornado em tela.
Também possuí elemento que acessa o nome do usuário via Contexto e retorna na tela.

Preview Consumindo API preview Consumindo API

- A PAIPE e os Paipers:

Página de apresentação do Let's Dev e Professores dos Módulos, descrição sobre a Paipe criadora do programa e links de redes sociais.

Preview A PAIPE e os Paipers preview A PAIPE. e os Paipers

✅ Tecnologias utilizadas:

React, TypeScript, HTML, CSS, Vite, API.