Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/marciojorgemelo/dev-restaurante

Monorepo de uma aplicação web e mobile, com backend para criação e acompanhamento de pedidos de um restaurante.
https://github.com/marciojorgemelo/dev-restaurante

axios bcrypt cloudinary cookies expo express neon-postgres next prisma react-navigation-stack sass

Last synced: 10 days ago
JSON representation

Monorepo de uma aplicação web e mobile, com backend para criação e acompanhamento de pedidos de um restaurante.

Awesome Lists containing this project

README 

          
# DevRestaurante



![project-image](readme_images/web/dashboard.png)



O **DevRestaurante** é uma aplicação de nível profissional para criação, gerenciamento e acompanhamento do cardápio e pedidos de um estabelecimento alimentício, como restaurantes, pizzarias ou outros. Desenvolvido no monorepo acima com _Next, Sass e TypeScript_ para a página web de acompanhamento de pedidos e gerenciamento do cardápio, _Expo, React-navigation e TypeScript_ para o aplicativo com criação de pedidos, a aplicação utiliza API padrão RESTFUL, utilizando de _Express, Prisma, Clodinary e Neon-postgres_ para gerenciamento dos dados e  _Bcrypt_ para criação e gerenciamento do token de autenticação.

## Sumário



1. [Visão Geral do Projeto](#visão-geral-do-projeto-funcionalidades-principais)

   - [Acompanhamento e gerenciamento em tempo real dos pedidos](#1-acompanhamento-e-gerenciamento-em-tempo-real-dos-pedidos)

   - [Gerenciamento do cardápio](#2-gerenciamento-do-cardápio)

   - [Registro de novos pedidos](#3-registro-de-novos-pedidos)

2. [Tecnologias Utilizadas](#tecnologias-utilizadas-linguagens-e-ferramentas)

3. [Estrutura do Projeto](#estrutura-do-projeto)

5. [Screenshots](#screenshots)

   - [Mobile](#mobile)

   - [Web](#web)

6. [Requisitos para Rodar o Projeto Localmente](#requisitos-para-rodar-o-projeto-localmente)

7. [Rodar o Projeto Localmente](#rodar-o-projeto-localmente)

8. [Autores](#autores)

9. [Licença](#licença)



## Visão Geral do Projeto (Funcionalidades Principais)



### 1. Acompanhamento e gerenciamento em tempo real dos pedidos:



- Na página web da aplicação você possui as seguintes opções quanto a isso:

  1. Acompanhamento de todos os pedidos enviados para preparo.

  2. Detalhamento desse pedido, como:

    1. Produtos do pedido

       - Imagem do produto

       - Nome

       - Quantidade de produtos

       - Valor

    2. Valor total do pedido da mesa

  3. Finalização de pedidos em aberto.



### 2. Gerenciamento do cardápio:



- Na página web da aplicação você possui, também, as seguintes ações para gerenciar o cardápio:

  1. Criação de novas categorias em seu cardápio.

  2. Adição de novos produtos podendo editar:

     - Categoria que faz parte

     - Nome do produto

     - Valor

     - Descrição



### 3. Registro de novos pedidos:



- No aplicativo da aplicação você possui as seguintes opções para criação e envio de pedidos para o preparo:

  1. Abertura da comanda da mesa.

  2. Adição de produtos no pedido da mesa, podendo optar por:

     - Categoria que deseja filtrar os produtos

     - O produto que será adicionado

     - Quantidade daquele produto

  3. Enviar o pedido para preparo.



## Tecnologias Utilizadas (Linguagens e ferramentas)



    

      

        

          Next logo

          


          

            Next.JS

          

        

      

      

        

          NodeJS logo

          


          

            NodeJS - Express

          

        

      

      

        

          Expo GO logo

          


          

            Expo GO

          

        

      

      

        

          Sass logo

          


          

            Sass

          

        

      

      

        

          TypeScript logo

          


          

            TypeScript

          

        

      

    



  

    

      

        Postgres logo


        

          Postgres

        

      

    

    

      

        logo git


        

          Prisma

        

      

    

    

      

        Cloudinary logo


        

          Cloudinary

        

      

    

    

      

        Neon logo


        

          Neon-Postgres

        

      

    

    

      

        logo git


        

          Git

        

      

    

  



## Estrutura do Projeto



O projeto é organizado em vários arquivos para melhor organização do código e separação de interesses:



- `/backend`: É a pasta responsável pelo backend da aplicação, onde relaciona-se as rotas com os serviços de banco de dados e armazenamento de imagens;

- `/frontend`: É a pasta responsável pelo frontend da aplicação, onde estruturamos as páginas e consumimos dados e funcionalidades com a API;

- `/mobile`: É a pasta responsável pelo aplicativo da aplicação, onde estruturamos as páginas e consumimos dados e funcionalidades com a API;

- `/readme_images`: É a pasta responsável pelas imagens abaixo para demonstração do design e funcionalidades da aplicação;



## Screenshots



### Mobile



![App mobile Screenshot](readme_images/mobile/login.png)

![App mobile Screenshot](readme_images/mobile/dashboard.png)

![App mobile Screenshot](readme_images/mobile/order_step1.png)

![App mobile Screenshot](readme_images/mobile/order_step2.png)

![App mobile Screenshot](readme_images/mobile/order_step3.png)

![App mobile Screenshot](readme_images/mobile/order_step4.png)

![App mobile Screenshot](readme_images/mobile/finishOrder.png)



### Web



![App desktop Screenshot](readme_images/web/login.png)

![App desktop Screenshot](readme_images/web/register.png)

![App desktop Screenshot](readme_images/web/dashboard.png)

![App desktop Screenshot](readme_images/web/category.png)

![App desktop Screenshot](readme_images/web/product.png)

![App desktop Screenshot](readme_images/web/orderModal.png)



## Requisitos para Rodar o Projeto Localmente



### Node.js e npm:



- Verifique se você tem o Node.js instalado. Caso contrário, faça o download e instale a versão mais recente do Node.js.

- O npm (Node Package Manager) é instalado automaticamente com o Node.js.



### Git:



- Certifique-se de ter o Git instalado em sua máquina. Se não tiver, você pode baixá-lo aqui.



### Editor de Texto ou IDE:



- Escolha um editor de texto ou uma IDE (Ambiente de Desenvolvimento Integrado) para trabalhar no código. Alguns exemplos populares incluem o Visual Studio Code, Sublime Text e Atom.



### Navegador Web:



- Você precisará de um navegador web para visualizar o aplicativo localmente. Recomendamos o uso do Google Chrome, Mozilla Firefox ou Microsoft Edge.



### Configuração dos sistemas externos:



- Necessita realizar toda a configuração do Prisma, Postgres e Cloudinary.



## Rodar o Projeto Localmente



**Clone o projeto**



```bash

  git clone https://github.com/MarcioJorgeMelo/dev-restaurante.git

```



**Vá para a pasta do projeto**



```bash

  cd dev-restaurante

```



**Abra o projeto no VSCode**



```bash

  code .

```



**Instale as dependências de cada aplicação**



```bash

  cd backend

```



```bash

  npm install # Instala as dependências (se ainda não tiver feito)

```



```bash

  npx prisma generate

```



```bash

  cd frontend

```



```bash

  npm install # Instala as dependências (se ainda não tiver feito)

```



```bash

  cd mobile

```



```bash

  npm install # Instala as dependências (se ainda não tiver feito)

```



**Rode os projetos**



```bash

  cd backend

```



```bash

  npm run dev

```



```bash

  cd frontend

```



```bash

  npm run dev

```



```bash

  cd mobile

```



```bash

  yarn start

```



## Autores



- [@MarcioJorgeMelo](https://github.com/MarcioJorgeMelo)



## Licença



- [MIT](https://choosealicense.com/licenses/mit/)