Projeto Pizzaria
Esse Projeto web e mobile tem como finalidade dar suporte ao caixa, cozinha e tambem aos garçons de uma pizzaria em tempo real(socket.io) e tem o front-end e o back-end feitos por mim.
Front-end: Criado com Next 13(web) e React Native(mobile), o front-end utiliza de algumas outras bibliotecas como react toastify para exibir alertas personalizados após realizar algumas ações, nookies para trabalhar com os cookies, jwt para descriptografia e axios para chamadas ao back-end, além do ja citado socket.io para comunicação em tempo real com servidor.
Back-end: O back-end em Node.js foi criado utilizando Express.js e Typescript, além de algumas bibliotecas como jwt e bcrypt para criptografia. O banco de dados optei por postgreSQL e a ORM Prisma.
Existe uma explicação simples sobre cada pagina nos cards abaixo, e uma explicação mais técnica após os cards.
No fim da pagina você confere o app mobile
Login
Entre com seu login ou crie uma conta no próprio site.
Novo pedido
Crie um novo pedido, já existem categorias e produtos cadastrados.
Caterogias / Produtos
Sinta-se a vontade para criar novos produtos ou categorias.
Dashboard
Veja os pedidos aparecer em tela, leia a descrição e conclua-os.
Explicação tecnica
Faz requisição ao back-end que checa as informações e deixa ou não efetuar o login e devolve um alerta personalizado com a informação que, se positiva, devolve um token. Possui tambem um sistema server-side que, antes da pagina ser renderizada, verifica se existe um token e se ele é valido, se positivo a pagina não é renderizada e o cliente é redirecionado para a pagina dashboard, mas, caso o cliente tenha forjado um token o back-end devolve um erro e o cliente redireciona o usuario de volta para a tela de login.
Tem basicamente o mesmo sistema server-side da pagina de login.
Essa é a tela principal do projeto, onde se encontra os pedidos, nela temos a atualização em tempo real, assim que um pedido é lançado na pagina 7(ou app mobile), ela tem os componentes atualizados(e nao a pagina em sí) e é adicionado o pedido em tela, nao necessitando refresh manual. Destinada aos usuarios da cozinha, aqui vc pode concluir o pedido que foi levado a mesa, o que vai atualizar todos os outros computadores retirando o pedido da pagina em tempo real.
Uma pagina de cadastro comum.
Checa no banco as categorias e as trazem na tela para seleciona-las e cadastrar os produtos em suas respectivas categorias, alem de ser possivel e obrigatório cadastrar uma imagem .png ou .jpg para o produto, que é salvo no banco de dados.
Aqui temos os seletores onde o garçom/atendente seleciona o produto e envia o pedido para a cozinha futuramente. Essa pagina tem seletores para categoria e produto e botoes de adicionar produto, remover produto, finalizar mesa ou excluir mesa, cada seletor e botao se mantem desativado até que o passo a passo correto é feito pelo garçom, o que torna o app muito indicativo
Projeto Mobile
Mesmo funcionamento da tela de login da web. Lembrando que aqui não temos opção de se cadastrar, para isso, se cadastre no aplicativo web ou entre com email e senha (email: Teste@teste.com, senha: 123)
Nessa tela você pode abrir o pedido, que ainda é um rascunho, que só sera enviado para cozinha quando confirmado. Dê aqui o numero da mesa a ser atendida.
Aqui temos os seletores onde o garçom/atendente anota o pedido e o envia para a cozinha futuramente. Essa pagina tem seletores para categoria e produto e botoes de adicionar produto, remover produto, finalizar mesa ou excluir mesa, cada seletor e botao se mantem desativado até que o passo a passo correto é feito pelo garçom, o que torna o app muito indicativo
Finalizando o pedido ele aparecera em tempo real na pagina dasboard do app web. Teste e veja !