/codeburger-interface

Primary LanguageJavaScript

Projeto CodeBurger

šŸ‘‰Sobre

Projeto de uma hamburgueria voltada para gestĆ£o delivery, utilizando tecnologias modernas como React para proporcionar uma experiĆŖncia de usuĆ”rio excepcional. O objetivo Ć© criar uma plataforma de pedidos online que seja intuitiva, eficiente e visualmente atraente, permitindo aos clientes personalizar seus pedidos de forma prĆ”tica e rĆ”pida, com uma combinaĆ§Ć£o de tecnologia avanƧada, design inteligente e foco na experiĆŖncia do usuĆ”rio.

šŸ‘‰Funcionalidades do Projeto

Tela de Login e Cadastro de usuƔrio

Tela de login

Tela de cadastro

Home
  • Design Atrativo: Interface moderna e amigĆ”vel com imagens dos produtos, VisualizaĆ§Ć£o por categorias e ofertas
  • Menu DinĆ¢mico: Lista completa dos hambĆŗrgueres, acompanhamentos e bebidas, com descriƧƵes.
  • Ofertas e PromoƧƵes: SeĆ§Ć£o destacada para promoƧƵes atuais e combos especiais Tela de Home
Carrinho
  • Gerenciamento Simples: Adicionar, remover e modificar itens no carrinho de forma fĆ”cil.
  • CĆ”lculo AutomĆ”tico: AtualizaĆ§Ć£o automĆ”tica do subtotal, taxas de entrega e valor total.

Tela de cadastroCarrinho

Painel do Admin
  • GestĆ£o de Produtos: Ferramentas para adicionar ou editar itens do menu.
  • Controle de Pedidos: VisualizaĆ§Ć£o e gerenciamento de pedidos recebidos, em andamento e finalizados. Tela de Admin

Tela de lista produtos

šŸ‘‰Tecnologias / Funcionalidades - Breve DescriĆ§Ć£o

  • Frontend:

    • React: Biblioteca JavaScript para criaĆ§Ć£o da interface de usuĆ”rio.
    • Styled-components: EstilizaĆ§Ć£o de componentes de forma modular.
    • Axios: RequisiƧƵes HTTP para integraĆ§Ć£o com o backend.
    • React Hook Form: Biblioteca para gerenciamento de formulĆ”rios em aplicaƧƵes React.
    • Yup: Biblioteca de validaĆ§Ć£o e transformaĆ§Ć£o de schemas de objetos JavaScript.
    • React Toastify: Biblioteca para exibir notificaƧƵes no estilo toast em aplicaƧƵes React.
    • React Elastic Carousel: Biblioteca para criaĆ§Ć£o de carrossĆ©is responsivos e flexĆ­veis.
    • MUI (Material-UI): biblioteca de componentes de interface
    • React Select: Biblioteca para criar menus dropdown e caixas de seleĆ§Ć£o.

  • Backend:

    • Node.js: Ambiente de execuĆ§Ć£o JavaScript para construĆ§Ć£o do servidor.
    • Yarn: Gerenciador de pacotes.
    • Express: Framework para criaĆ§Ć£o de APIs.
    • PadrĆ£o MVC: Estrutura de organizaĆ§Ć£o do cĆ³digo.
    • Docker: Plataforma para criaĆ§Ć£o de contĆŖineres.
    • Sequelize: ORM para manipulaĆ§Ć£o de bancos de dados SQL.
    • Yup: ValidaĆ§Ć£o de esquemas de objetos.
    • Multer: Upload e gerenciamento de imagens com Multer.
    • UUID: GeraĆ§Ć£o de identificadores Ćŗnicos.
    • MongoDB / PostgreSQL : UtilizaĆ§Ć£o dos dois bancos de dados para diferentes necessidades.
    • Mongoose: Modelagem de dados para MongoDB.
    • CORS: middleware que permite controlar quais recursos podem ser acessados de diferentes domĆ­nios, sendo importante para aplicaƧƵes web que interagem com APIs.

  • AutenticaĆ§Ć£o e SeguranƧa:

    • JWT (JSON Web Tokens): AutenticaĆ§Ć£o segura dos usuĆ”rios.
    • BCrypt: Hashing de senhas para proteĆ§Ć£o de dados sensĆ­veis.

  • ImplantaĆ§Ć£o:

    • Railway: servidor Backend.
    • Vercel: Plataformas de hospedagem para o frontend. Visite o Codeburger