Sobre

Ponte para o mercado

Ponte é um programa de iniciativa da Prosper Tech, cujo objetivo é debloquear o potencial de cada aluna(o) no universo do React.js.

Case Prático: Pizzaria

Trata-se de um sistema de pedido online para uma pizzaria utilizando React.js.

Este é um projeto que oferece a oportunidade de aplicar todos os conceitos desenvolvidos durante a trilha de aprendizado.

Requisitos do Case: Pizzaria

Autenticação e Formulário de Login:

  • - Implementar um formulário de login com cantos arredondados, utilizando as propriedades em CSS
  • - Adicionar uma sombra sutil aos botões de login para destacá-los.

Listagem de Pizzas:

  • - Exibir dinamicamente as opções de pizzas disponíveis, utilizando componentes React para representar cada item do cardápio
  • - Aplicar estilos utilizando Tailwind CSS para garantir uma apresentação moderna e responsiva.

Seleção de Pizzas

  • - Permitir aos usuários selecionar a quantidade desejada de cada pizza, utilizando componentes controlados e estados em React

Carrinho de compras:

  • - Implementar um carrinho de compras dinâmico que exibe as pizzas selecionadas, a quantidade e o total.

Finalização do pedido:

  • - Permitir aos usuários revisar o pedido, ajustar as quantidades e finalizar a compra.
  • - Utilizar o Next.js para otimizar o carregamento da página de confirmação do pedido, aproveitando as vantagens do SSR.

Autenticação com Redux:

  • - Introduzir o Redux para gerenciar o estado global da aplicação, incluindo informações sobre o usuário autenticado.

Responsividade:

  • - Garantir que a aplicação seja totalmente responsiva
  • - Implementar breakpoints para garantir uma experiência de usuário consistente em diferentes dispositivos.

Acessibilidade e Atributos ARIA:

  • - Integrar atributos ARIA para melhorar a acessibilidade da aplicação, tornandoa mais amigável para usuários com deficiência.

Controle de versão com Git:

  • - Configurar um repositório Git para o projeto, garantindo um histórico de alterações e facilitando a colaboração entre os membros da equipe

Construção do layout

Para a criação do layout da Prosperizza, utilizei como referência páginas de Pizzarias famosas e layouts encontrados no Dribbble.

Todo o protótipo foi desenvolvido no Figma. E as imagens foram geradas com a ajuda de IA.

O nome Prosperizza surgiu da ideia de unir a Prosper Tech e pizzaria. Todo o conceito deste projeto brinca com a ideia de uma pizzaria para devs.

Ferramentas e tecnologias utilizadas

  • - React
  • - Next.js 14
  • - MongoDB Atlas
  • - Mongoose
  • - Axios
  • - uuid
  • - ContextAPI
  • - TailwindCSS
  • - Phosphor icons
  • - Figma
  • - Git/ GitHub
  • - Vercel - Deploy

Código fonte

O código fonte do projeto está disponível no link abaixo:

GitHub