Git Product home page Git Product logo

foodexplorer-frontend's Introduction

FoodExplorer

🔗 Clique aqui para visualizar a aplicação no ar.

preview

O FoodExplorer é um menu interativo de um restaurante fictício.

Trata-se de uma aplicação construída de ponta a ponta com front-end e back-end, utilizando as tecnologias aprendidas no programa Explorer da Rocketseat.

Possui duas personas: admin e usuário comum.

O admin é a pessoa responsável pelo restaurante. Pode criar, visualizar, editar e apagar um prato a qualquer momento. Cada prato contém uma imagem, um nome, uma categoria, uma breve descrição, os ingredientes e o seu preço. Ao clicar em adicionar prato, o admin recebe uma mensagem de sucesso e é redirecionado para a página principal.

O usuário pode visualizar todos os pratos cadastrados e, quando clica em um prato, é redirecionado para uma nova tela com informações mais detalhadas sobre ele.

Milhas extras:

  • O usuário pode marcar ou desmarcar um prato como favorito;
  • O usuário pode incluir itens no carrinho, e a quantidade é controlada pelos botões + e -;
  • Ao clicar em "finalizar pedido" na página de pedidos, o pedido é concluído e entra para o histórico com o status de "preparando";
  • O usuário pode ver seu histórico de pedido, com data, status e itens dos pedidos;
  • O admin pode visualizar e controlar o status de cada pedido (pendente, preparando ou entregue);
  • O layout possui versões dark & light.

🎨 Layout

O layout foi construindo seguindo o modelo abaixo:

🔗 Acessar modelo no Figma.

🛠 Tecnologias

  • HTML
  • CSS
  • JavaScript
  • React (front-end)
  • Node (back-end)

🚀 Como rodar a aplicação

1. Clone o repositório do projeto completo no seu computador:

$ git clone [email protected]:jessicaranft/FoodExplorer.git

2. Execute o back-end:

# Insira uma porta e gere um código hash para inserir no arquivo .env vazio:
  AUTH_SECRET=
  PORT=

# Navegue até o diretório do back-end:
$ cd api

# Instale as dependências necessárias:
$ npm install

# Inicie o servidor:
$ npm run dev

3. Execute o front-end:

# Navegue até o diretório do front-end:
$ cd frontend

# Instale as dependências necessárias:
$ npm install

# Inicie o servidor:
$ npm run dev

# Copie e cole o endereço fornecido no terminal na barra de endereço do seu navegador. O endereço usado na criação do projeto foi:

  http://localhost:5173/

💻 Visualize a aplicação no ar:

Clique neste link para acessar a aplicação no ar.

Você pode usar os dados abaixo para logar na conta de um usuário que já tem um histórico de pedidos e favoritos:

  e-mail: [email protected]
  senha: 123456

Ou use as credenciais abaixo para logar como administrador:

  e-mail: [email protected]
  senha: 12345

Fique à vontade também para criar seu próprio usuário comum e testar a aplicação fazendo novos pedidos.

📝 License

This project is under the license MIT.

Made with ❤️ by Jessica Ranft.

foodexplorer-frontend's People

Contributors

jessicaranft avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.