Gorestaurant
🥣 App web/mobile de cardápio para restaurante que permite criar, atualizar e remover pratos, além de fazer pedidos 🍽️
Install / Use
/learn @lucasbarzan/GorestaurantREADME
Tabela de conteúdos
- Sobre o projeto
- Funcionalidades
- Layout
- Como executar o projeto
- Tecnologias
- Como contribuir no projeto
- Autor
- Licença
💻 Sobre o projeto <a name="sobre-o-projeto"></a>
🥣 O GoRestaurant é um app de cardápio para restaurante com interface para web que permite a criação, remoção e atualização de pratos de comida, e interface mobile que permite a realização de pedidos e escolha de pratos favoritos.
Projeto desenvolvido durante o bootcamp GoStack oferecido pela Rocketseat.
⚙️ Funcionalidades <a name="funcionalidades"></a>
- [x] Restaurantes podem utilizar a plataforma web para:
- [x] Cadastrar novos pratos
- [x] Editar pratos
- [x] Listar os pratos
- [x] Remover pratos
- [x] Alterar a disponibilidade dos pratos
- [x] Os usuários tem acesso ao app mobile, onde podem:
- [x] Listar os pratos de comida e categorias
- [x] Filtrar pratos de comida por busca ou por categorias
- [x] Listar seus pratos favoritos
- [x] Realizar um pedido
🎨 Layout <a name="layout"></a>
O layout da aplicação está disponível no Figma:
<a href="https://www.figma.com/file/CASrVpJP7e0kAPOULOzmXQ/GoRestaurant"> <img alt="Layout web no Figma" src="https://img.shields.io/badge/Acessar%20Web%20-Figma-%2304D361"> </a> <a href="https://www.figma.com/file/QOjjPrujxbwrzzXAGzSzHG/GoRestaurant-Mobile?node-id=0%3A1"> <img alt="Layout mobile no Figma" src="https://img.shields.io/badge/Acessar%20Mobile%20-Figma-%2304D361"> </a>Web <a name="layout-web"></a>
<p align="center" style="display: flex; align-items: flex-start; justify-content: center;"> <img alt="Screenshot web 1" src="./assets/web-dashboard.svg" height="230px"> <img alt="Screenshot web 2" src="./assets/web-prato.svg" width="400px"> </p>Mobile <a name="layout-mobile"></a>
<p align="center" style="display: flex; align-items: flex-start; justify-content: center;"> <img alt="Screenshot mobile 1" src="./assets/mobile-splash.svg" width="200px"> <img alt="Screenshot mobile 2" src="./assets/mobile-home.svg" width="200px"> <img alt="Screenshot mobile 3" src="./assets/mobile-orders.svg" width="200px"> <img alt="Screenshot mobile 4" src="./assets/mobile-favorites.svg" width="200px"> </p>🚀 Como executar o projeto <a name="como-executar-o-projeto"></a>
Este projeto é divido em duas partes:
- Frontend Web (pasta web)
- Frontend Mobile (pasta mobile)
💡 Tanto o Frontend Web quanto o Mobile utilizam uma fake API que roda na porta 3333
Pré-requisitos <a name="pre-requisitos"></a>
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.
🎲 Rodando a fake API <a name="rodando-o-backend"></a>
# Clone este repositório
$ git clone git@github.com:lucasbarzan/gorestaurant.git
# Acesse a pasta do projeto no terminal/cmd
$ cd gorestaurant
# Vá para a pasta do frontend
$ cd web
# Instale as dependências
$ npm install
# Execute o script da fake API
$ npm run json-server server.json -p 3333
# O servidor inciará na porta:3333 - acesse http://localhost:3333
🧭 Rodando a aplicação web (Frontend) <a name="rodando-a-aplicacao-web-frontend"></a>
# Clone este repositório
$ git clone git@github.com:lucasbarzan/gorestaurant.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd gorestaurant
# Vá para a pasta do frontend
$ cd web
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run start
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000
📱 Rodando a aplicação mobile (Frontend) <a name="rodando-a-aplicacao-mobile"></a>
Siga as instruções deste link para configurar o ambiente de desenvolvimento mobile em React Native e poder rodar a aplicação na sua máquina.
🛠 Tecnologias <a name="tecnologias"></a>
As seguintes ferramentas foram usadas na construção do projeto:
Website (React + TypeScript) <a name="tecnologias-website"></a>
Veja o arquivo package.json
Mobile (React Native + TypeScript) <a name="tecnologias-mobile"></a>
- React Native Gesture Handler
- React Native Screens
- React Native Vector Icons
- React Native Safe Area Context
- Styled Components
- Axios
Veja o arquivo package.json
Utilitários <a name="utilitarios"></a>
- Protótipo: Figma
- Editor: Visual Studio Code
- Teste de API: Insomnia
- Fontes: Poppins
💪 Como contribuir no projeto <a name="como-contribuir"></a>
- Faça um fork do projeto.
- Crie uma nova branch com as suas alterações:
git checkout -b my-feature - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "feature: My new feature" - Envie as suas alterações:
git push origin my-feature
🦸 Autor <a name="autor"></a>
<a href="https://github.com/lucasbarzan/"> <img src="https://avatars2.githubusercontent.com/u/25365429?s=460&u=ac94c8da0e69db2558f031d01dbca5c60aa19b77&v=4" width="100px" alt="Lucas Barzan" /> <br /> <sub><b>Lucas Barzan</b></sub></a> <br />📝 Licença <a name="licenca"></a>
Este projeto esta sob a licença MIT.
Feito com ❤️ por Lucas Barzan 👋🏽 Entre em contato!
