🇺🇸 English

🇧🇷 Português

🍔 CodeBurger v2

Vídeo   |    Tecnologias   |    Sobre   |    Páginas   |    Rotas   |    Clone   |    Contato

📹 Apresentação em Vídeo do Projeto

Clique para conferir o vídeo de apresentação no Youtube!

🚀 Tecnologias Utilizadas

Abaixo estão as 19 principais tecnologias utilizadas no desenvolvimento do projeto

Vite.js	React.js	React Hook Form	Styled Components	Yup
React Toastify	Axios	React Elastic Carousel	React Router DOM	Material UI
Sequelize ORM	PostgreSQL	Mongoose ODM	MongoDB	Express.js
Insomnia	Multer	Javascript	CSS3	HTML5

📝 Sobre

Assistir o vídeo acima ajudará na compreensão da explicação!

A aplicação se consiste num projeto FullStack de uma plataforma web para uma hamburgueria.

Como Cliente, você pode criar uma conta (ou entrar caso você já tenha uma), ver os produtos cadastrados e fazer pedidos. Não tem acesso a funcionalidade e páginas de administradores.
Como Administrador, além de poder fazer tudo o que um usuário pode, ele pode gerenciar a plataforma: adicionando, removendo ou editando pedidos e acessar o histórico de pedidos e controlar o status de cada pedido.

📄 Páginas (Frontend)

• pages/SignUp (/cadastrar): Por essa página o usuário pode criar uma conta;
• pages/Login (/entrar): Por essa página o usuário pode entrar na sua conta;
• pages/Home (/): Página que o usuário é redirecionado após criar ou entrar na sua conta. Basicamente, nela o usuário pode ver as categorias de produtos e ir para a página de /produtos já com a categoria clicada selecionada, e também pode ver os produtos em oferta e facilmente fazer um pedido ao ir para a página de /carrinho com o produto clicado já adicionado no carrinho;
• pages/Products (/produtos): Nessa página o usuário pode ver todos os produtos cadastrados na plataforma, filtrá-los por categoria, e adicioná-los ao carrinho de compras caso queira;
• pages/Cart (/carrinho): Nessa página o usuário pode ver informações pertinentes sobre a compra, como todos os produtos que estão em seu carrinho, o preço total e a taxa da compra, e também pode aumentar a quantidade de algum produto, e realizar o pedido caso queira;
• pages/Admin (/gestao): Nessa página, o administrador pode gerenciar a plataforma, adicionando, removendo ou editando pedidos e acessar o histórico de pedidos e controlar o status de cada pedido;

Todas as páginas possuem suas devidas validações e tratamento de possíveis erros.
A lógica utilizada na rotas privadas foi: /cadastrar e /entrar estão disponíveis apenas para usuários que não estão logados, as demais estão disponíveis apenas para usuários logados, e a /gestao está disponível apenas para administradores.
Desenvolvi do zero os componentes que são usados em quase todas as páginas, exceto a /gestao, onde optei por utilizar o MUI.

📄 Rotas (Backend)

• controllers/UserController (POST: /users): Espera receber os dados necessários para a criação de um usuário (name, email, password, admin), cria um usuário e retorna o novo usuário criado;
• controllers/SessionController (POST: /sessions): Espera receber os dados necessários para a realização do login do usuário (email, password), e retorna as informações do usuário (e um token);
• controllers/ProductController:
  • (POST: /products): Espera receber os dados necessários para a criação de um produto (name, price, category_id, offer, file)), cria um produto, e retorna o novo produto criado, e a lista atualizada com todos os produtos;
  • (PUT: /products/:id): Espera receber os dados necessários para a edição de um produto (name, price, category_id, offer, file), edita o produto de id recebido, e retorna o produto atualizado, e a lista atualizada com todos os produtos;
  • (DELETE: /products/:id): Espera receber o id do produto a ser delete, deleta tal produto, e retorna o produto deletado;
  • (GET: /products): Retorna a lista de produtos cadastrados;
• controllers/CategoryController:
  • (POST: /categories): Espera receber os dados necessários para a criação de uma categoria (name, file), cria uma categoria, e retorna a nova categoria criada;
  • (PUT: /categories/:id): Espera receber os dados necessários para a edição de uma categoria (name, file), edita a categoria de id recebido, e retorna a categoria atualizada;
  • (GET: /categories): Retorna a lista de categorias cadastradas;
• controllers/OrderController:
  • (POST: /orders): Espera receber os dados necessários para a criação de um pedido (uma lista de objetos com id, quantity), formata a lista de objetos, populando cada objeto com os dados do produto de cada id, cria o pedido, contendo os produtos comprados, o usuário que comprou e o status inicial de order-placed, e retorna o pedido;
  • (PUT: /orders/:id): Espera receber o novo status do pedido, atualiza o pedido de id recebido, e retorna o pedido atualizado;
  • (GET: /orders): Retorna a lista de pedidos realizados;

Todas as rotas possuem suas devidas validações e tratamento de possíveis erros.
Um middleware para auxiliar na autenticação é usado em quase todas as rotas, exceto na /users e /sessions.

📖 Clonando o Projeto

Para clonar e executar este projeto em seu computador, você precisará do Git e Node.js v20.10.0 ou superior previamente instalados.
Feito isso, no terminal:

# Clone esse repositório com:
> git clone https://github.com/Luk4x/codeburger-v2.git

# Entre no repositório com:
> cd codeburger-v2

# Estando agora na raiz do projeto, crie um arquivo `.env`, seguindo o `.env.example` de cada projeto como base.

# Execute o Backend em outro terminal:
> cd backend
> yarn install
> yarn dev

# Execute o Frontend em um terminal:
> cd frontend
> yarn install
> yarn dev

# Feito isso, você já poderá estar acessando o projeto em: http://localhost:5173/

📞 Contato dos Contribuintes

Vitrine.Dev 🪟 Lucas Maciel 🪧 Vitrine.Dev Lucas Maciel ✨ Nome 🍔 CodeBurger v2 🏷️ Tecnologias vite.js, react.js, react hook form, styled-components, yup, react-toastify, axios, react-elastic-carousel, react-router-dom, material ui, sequelize orm, mongoose odm, postgres sql, mongo db, express.js, insomnia, multer, javascript, css, html 📷 Img

Voltar ao Topo