/Virtual-store

Neste projeto os usuário podem visualizar os produtos de uma loja virtual e ir adicionando ao carrinho.

Primary LanguageTypeScript

Índice

Visão geral

Descrição

Os usuários devem ser capazes de:

Neste projeto os usuário podem visualizar os produtos de uma loja virtual e ir adicionando ao carrinho. Da para visualizar os detalhes de cada produto separadamente, e na página do Carrinho é possível ir acrescentando ou diminuindo a quantidade de itens, o valor total do carrinho aparece na tela também.

Este projeto foi desenvolvido com a combinação poderosa do framework React e Next.js, aprimorados com o uso do Bootstrap para design responsivo e a adição de TypeScript para uma tipagem estática mais robusta.

Captura de tela

Meu processo

Para a construção do projeto, adotei a abordagem do método Dividir para Conquistar, o que me permitiu uma organização mais eficiente e um melhor controle de todos os processos e etapas envolvidas. Todas as tarefas foram devidamente registradas e acompanhadas através da plataforma Notion.

Notion

Link para acessar o site -

Virtual Store

Construído com

  • Next.js
  • TypeScript
  • Booststrap
  • React - Biblioteca JS

O que eu aprendi

  1. Integração do Bootstrap: para garantir uma experiência de usuário moderna e responsiva, utilizamos o framework Bootstrap para estilização e layout. Isso permitiu criar componentes visualmente atraentes de maneira eficiente, alinhados com as melhores práticas de design.
  2. TypeScript: como linguagem de programação principal para esse projeto. A vantagem do TypeScript é a adição de tipagem estática, o que auxilia na detecção antecipada de erros e na melhoria da legibilidade do código.
  3. Simulação de API: para aprimorar o entendimento sobre o processo de interação entre frontend e backend, implementei uma simulação de API. Isso permitiu realizar requisições e manipular dados, criando uma experiência semelhante à interação com um banco de dados real. Essa prática foi fundamental para desenvolver habilidades essenciais no tratamento de dados e comunicação entre diferentes partes do sistema.

Desenvolvimento contínuo

Desenvolver um novo projeto somente com TypeScript.

Recursos úteis

  • OneBitCode - Isso me ajudou, pois consegui aplicar o uso do Next.js.

Autor