Luk4x/dev-burger-order-log-interface

🍔 CodeBurger Interface - A web application that registers and manages orders for a hamburger shop | ReactJS, Bootstrap, Styled-Components...

🇺🇸 English

🇧🇷 Português

🍔 CodeBurger Project Interface

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

📹 Apresentação em Vídeo do Projeto

codeburgerv1.mp4

Caso o vídeo apresente algum erro, recarregue a página!
Acesse o projeto online AQUI

🚀 Tecnologias utilizadas

• ReactJS
• React Router
• Styled-Components
• Bootstrap / React-Bootstrap
• BoxIcons
• Axios
• Javascript
• HTML
• CSS
• ViteJS
• Yarn

📝 Sobre

Assistir o vídeo acima e/ou acessar o projeto online ajudará na compreensão da explicação!

Esse projeto é a Interface Mobile-First do CodeBurger, uma aplicação Web que realiza o cadastro e a gerência de pedidos de uma hamburgueria. Os pedidos ficam armazenados em sua API que desenvolvi essencialmente com ExpressJS.

📄 Páginas

O projeto é composto por 2 componentes de páginas, sendo eles:

• Home: Além de ser a página inicial do CodeBurger, ela responsável por realizar o cadastro dos pedidos validados pelas verificações na API.
• Orders: Essa página é responsável por listar os pedidos já cadastrados na API, e também informa seus respectivos status (com um tempo de preparação aleatório entre 5 à 40 segundos) e preço (gerado a partir da quantidade de caracteres do pedido + um valor aleatório entre 1 à 50).

📑 Demais Componentes

Fora os componentes de Rotas (Routes), estilos globais (GlobalStyles) e Root (main), o projeto conta com mais 5 componentes que são reaproveitados em ambas as páginas, sendo eles:

• Socials: Esse componente é relativo ao botão que lista minhas redes sociais.
• MainContainer: Esse componente é relativo ao container que abriga as informações dos pedidos.
• Image: Esse componente é relativo às imagens de Logo e Embalagem do CodeBurger.
• Button: Esse componente é relativo aos botões de Pedir e Voltar.
• Title: Esse componente é relativo aos títulos do MainContainer.

📖 Clonando o Projeto

Para clonar e executar este projeto em seu computador, você precisará do Git, Node.js v16.13.2 ou superior e Yarn previamente instalados.
Você também precisará da API do projeto rodando, portanto, antes de continuar por aqui, vá ao Repositório da API e faça os passos sobre como cloná-la e executá-la primeiro!
Feito esses dois passos, no terminal:

# Clone esse repositório com:
> git clone https://github.com/Luk4x/dev-burger-order-log-interface.git

# Entre no repositório com:
> cd dev-burger-order-log-interface

# Instale as dependências com:
> yarn install

# Execute o projeto com:
> yarn dev

# Feito isso, você já poderá acessar o projeto pelo link que aparecerá no terminal! (algo como http://localhost:3000/ ou http://127.0.0.1:5173/)

🤝 Contato dos Contribuintes

Vitrine.Dev 🪟 Lucas Maciel 🪧 Vitrine.Dev Lucas Maciel ✨ Nome 🍔 CodeBurger Interface 🏷️ Tecnologias reactjs, bootstrap, styled-components, axios, javascript, react router, boxicons, vitejs, css, html, yarn 📷 Img

Voltar ao Topo