/maryam-labe-food2

Primary LanguageJavaScriptMIT LicenseMIT

🚀 == Projeto Final de Front-End == 🚀

Logo   |   Sobre   |   Site   |   Tecnologias   |   Funcionalidades   |   Pendências   |   Imagens   |   Wireframe   |   Pré requisitos   |   Desenvolvedores  

Logo para fundo escuro Logo para fundo claro:
Logo branco Logo preto

📓 Sobre

Projeto final de Frontend desenvolvido em React JS pelos alunos do curso Fullstack Web (integral) da Labenu, Turma Maryam, grupo 2. No projeto desenvolvemos uma aplicação web baseada em um aplicativo de delivery de comida onde o design foi desenvolvido pela designer Camila Mizutani e utilizamos uma API própria contendo todas as funções necessárias.

🌎 Link do site

🔗 Future Eats

🛠 Tecnologias

Abaixo segue o que foi utilizado na criação deste projeto:

🔗 ReactJS - O ReactJS é uma biblioteca JavaScript declarativa, eficiente e flexível para criar interfaces com o usuário. Ele permite compor UIs complexas a partir de pequenos e isolados códigos chamados “componentes”.

🔗 Styled-Components - Styled-components é uma biblioteca para React e React Native que permite que você use estilos ao nível de componente na sua aplicação. Eles são escritos em uma mistura de JavaScript com CSS.

🔗 Material-UI - O Material-UI fornece um componente opcional CssBaseline. Ele corrige algumas inconsistências nos navegadores e dispositivos, ao mesmo tempo em que fornece redefinições ligeiramente mais opinativas para elementos HTML comuns.

🔗 React Axios - Axios é um cliente HTTP baseado em Promises para fazer requisições. Pode ser utilizado tanto no navegador quanto no Node. js ou qualquer serviço de API.

🔗 React-router-dom - O React Router é uma lib completa para controle de rotas que permite que você consiga configurar as rotas utilizando o formato JSX e também disponibiliza uma API para você configurar diretamente via Javascript.

🔗 React Hooks - Eles permitem que você use o state e outros recursos do React sem escrever uma classe.

🔗 API - API é um conjunto de definições e protocolos usado no desenvolvimento e na integração de software de aplicações. API é um acrônimo em inglês que significa interface de programação de aplicações.

🔗 Metodologias Ágeis - Kanban -Kanban é um sistema visual de gestão de trabalho, que busca conduzir cada tarefa por um fluxo predefinido de trabalho.

✔️ O que funciona

Telas

  • Tela inicial;
  • Login;
  • Cadastro de endereço;
  • Sign up;
  • Home page;
  • Pesquisa;
  • Carrinho;
  • Restaurantes;
  • Pedido em andamento;
  • Perfil;
  • Editar perfil;
  • Editar endereço.

Integração com API

  • Login;
  • Signup;
  • Add Address;
  • Get Full Address;
  • Get Profile;
  • Update Profile;
  • Get Restaurants;
  • Get Restaurant Detail;
  • Place Order;
  • Get Active Order;
  • Orders History.

🚧 Em desenvolvimento

  • Versão Desktop

📱 Imagens Mobile

  • Página de login, erro no usuário e erro na senha

login login erro no usuário login erro na senha

  • Página de cadastro

cadastro principal cadastro endereço

  • Home - Página de restaurantes

restaurantes

  • Página de busca por restaurantes e busca não encontrada

restaurante específico página de busca não encontrada

  • Página de cardápio do restaurante

cardapio

  • Página do carrinho vazio, com produtos, pedido confirmado(em andamento), já existe outro pedido em andamento, falta esolher a forma de pagamento

carrinho vazio com produtos pedido confirmado já existe outro pedido em andamento falta esolher a forma de pagamento

  • Página do perfil com histórico de Pedidos e edição de Cadastro

histórico de pedidos edição perfil edição cadastro

  • Erro de página não encontrada

página de erro

📱 Gif Mobile

YouCut_20211105_210942111.mp4

🧩 Wireframe

Wireframe

↩️ Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode

$ node -v
v12.19.0
$ npm -v
6.14.5

🏁 Rodando o projeto

# Clone este repositório
# HTTPS
$ git clone https://github.com/future4code/maryam-labe-food2.git

# SSH
$ git clone git@github.com:future4code/maryam-labe-food2.git

# CLI
$ gh repo clone future4code/maryam-labe-food2

# Acesse a pasta do projeto no terminal
$ cd ./maryam-labe-food2

# Instale as dependências
$ npm install
$ npm install axios
$ npm install react-router-dom
$ npm install styled-components
$ npm install @material-ui/core
$ npm install @material-ui/icons

# Para iniciar o projeto
$ npm run start

# O servidor inciará na porta:3000 - acesse <http://localhost:3000>

👷 Desenvolvedores

Imagem do perfil de Argleydson Leão
Argleydson Leão
Imagem do perfil de Maria Helena V. C. de Souza
Maria Helena V. C. de Souza
Imagem do perfil de Silvio Ribeiro Dias Jr.
Silvio Ribeiro Dias Jr.
Imagem do perfil de Tainá Soares
Tainá Soares
Imagem do perfil de Tainá Soares
Magdiel Silva

👥 Aguardamos o seu contato.

Voltar para o topo