{"id":19806970,"url":"https://github.com/matheuszpicoli/burger-place","last_synced_at":"2026-04-30T16:33:14.732Z","repository":{"id":240108198,"uuid":"801328432","full_name":"matheuszpicoli/burger-place","owner":"matheuszpicoli","description":"MP Burger é uma hamburgueria virtual em React com pedidos armazenados no JSON-Server. Funciona das 18h às 23h, com categorias como entradas, lanches e sobremesas. Utiliza Tailwind CSS para estilo e React Router DOM para navegação. Execute o projeto com Node.js após iniciar o servidor JSON. Leia README.md para mais detalhes.","archived":false,"fork":false,"pushed_at":"2024-06-06T11:46:16.000Z","size":8437,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-06T17:51:10.458Z","etag":null,"topics":["json-server","react","reacticons","tailwind"],"latest_commit_sha":null,"homepage":"https://mp-burguer-place.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matheuszpicoli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-16T02:50:59.000Z","updated_at":"2024-09-17T16:43:49.000Z","dependencies_parsed_at":"2024-11-12T13:00:59.151Z","dependency_job_id":null,"html_url":"https://github.com/matheuszpicoli/burger-place","commit_stats":null,"previous_names":["matheuszpicoli/burguer-place","matheuszpicoli/burger-place"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/matheuszpicoli/burger-place","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheuszpicoli%2Fburger-place","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheuszpicoli%2Fburger-place/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheuszpicoli%2Fburger-place/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheuszpicoli%2Fburger-place/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matheuszpicoli","download_url":"https://codeload.github.com/matheuszpicoli/burger-place/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheuszpicoli%2Fburger-place/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32470879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["json-server","react","reacticons","tailwind"],"created_at":"2024-11-12T09:09:07.099Z","updated_at":"2026-04-30T16:33:14.717Z","avatar_url":"https://github.com/matheuszpicoli.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MP Burger 🍔\n\n### Link do projeto rodando na Vercel:\n\n🔗 | [Clique aqui para ver o projeto em execução](https://mp-burguer-place.vercel.app/)\n\n## 🚨 Sobre\n\n- **MP Burger** é uma hamburgueria desenvolvida em React e um servidor JSON-Server para armazenar pedidos quando houver um no carrinho. Não foi criado nenhum servidor altamente profissional, a intenção era apenas armazenar as requisições em algum lugar, sem que eu me preocupasse em criar um schema e armazená-las dentro de um banco de dados.\n\n- A lanchonete fictícia **abre às 18h horário de Brasília** e **fecha às 23h**, fora desse período **não** é possível fazer nenhum pedido, pois o estabelecimento está fechado. Neste projeto foram gerados um CNPJ e um endereço, ambos aleatórios, para a hamburgueria.\n\n- Não tenho ideia do preço dos alimentos, todos os valores foram gerados com preço e quantidade que vieram da minha cabeça, as imagens dos lanches, pratos, bebidas e sobremesas foram geradas com inteligência artificial (IA).\n\n\u003cdiv align=\"center\"\u003e\n\n![MPBurger](./documentation/documentationPhoto1.png)\n\n\u003c/div\u003e\n\n---\n\n### Categorias\nTemos diversas categorias de alimentos, incluindo: \n\"**Entradas**\", \"**Padrões**\", \"**Chicken**\", \"**Artesanais**\", \"**Porções**\", \"**Bebidas**\" e \"**Sobremesas**\".\n\n**01. Entradas**\n\n- Pequenas porções, como se fosse mesmo uma entrada de restaurante. Pense neles como uma “opção” para incluir na refeição.\n\n**02. Padrões**\n\n- Lanche padrão que todo mundo conhece, o famoso X Bacon, X Salada, X Presunto, entre outros...\n\n**03. Chicken**\n\n- Igual ao lanche padrão, porém, em vez de carne bovina é frango, esses lanches se chamam Galis alguma coisa, seja Galis Bacon, Galis Tudo, tanto faz.\n\n**04. Artesanais**\n\n- Nessas opções são demonstrados os hambúrgueres artesanais (ou gourmet), que consequentemente têm o preço mais elevado devido ao seu método especial de preparo e à alta seleção de seus ingredientes.\n\n**05. Porções**\n\n- Ao contrário das entradas, esta seção apresenta alguns pratos que podem ser servidos como refeição, já que a maioria costuma ser acompanhada de arroz, feijão e salada, entre outras opções.\n\n**06. Bebidas**\n\n- Autoexplicativo, aqui mostra as bebidas disponíveis para consumo na hamburgueria. Foi colocado um aviso na seleção de uma bebida alcoólica, alertando o usuário que o estabelecimento não vende esse tipo de bebida para menores de 18 anos.\n\n**07. Sobremesas**\n\n- Algumas opções de sobremesas. Foram adicionados apenas um pudim e um mousse de maracujá, pois a IA não conseguiu fazer um petit-gateau de jeito nenhum.\n\n\u003e**Observação:** ao clicar na categoria do menu de navegação que fica fixo na tela, você será levado para onde aquela categoria começa.\n\n---\n\n### Procurando por itens\n- No cabeçalho da aplicação, temos um campo de busca onde você pode pesquisar pelo nome dos itens. O filtro é **case insensitive**, ou seja, não considera letras minúsculas e maiúsculas, se você pesquisar por \"salada\" ou \"Salada\" ou mesmo \"SALADA\", não irá interferir, o filtro irá procurar por todos os itens que possuem “salada” no nome e irão mostrar na tela para o usuário, cabe a ele escolher qual opção mais lhe agrada.\n\n\u003cdiv align=\"center\"\u003e\n\n![Como pesquisar um item](./documentation/documentationPhoto2.png)\n\n\u003c/div\u003e\n\n---\n\n### Como fazer um pedido\n- Fazer um pedido é simples, basta clicar no que deseja pedir e aparecerá um modal com algumas opções. Cada item possui seu modal individual, com opções exclusivas apenas para aquele item. Todos os itens permitem que o usuário escreva uma observação se desejar, por exemplo: não há necessidade de fritar muito a cebola.\n\n- Alguns itens possuem valores adicionais que são deduzidos do valor final do seu pedido. Os valores que diminuem o valor final estão em vermelho, os que aumentam estão em verde e os que não alteram o valor estão escritos exatamente isso em cinza. O valor total do pedido é atualizado em tempo real e esse é o valor que vai para o seu carrinho ao finalizá-lo.\n\n- Cada campo preenchido fica armazenado no local storage, ou seja, mesmo que o usuário recarregue ou feche a página, o pedido que ele fez ao clicar em “**Adicionar ao carrinho**” (que só está disponível se o estabelecimento estiver aberto) permanece. Ao fazer isso, a página é recarregada e a opção “**Carrinho**” aparece para o usuário no canto inferior direito da tela, permitindo que o usuário continue fazendo mais pedidos ou não.\n\n\u003cdiv align=\"center\"\u003e\n\n![Como fazer um pedido](./documentation/documentationPhoto3.png)\n\n![Localização do carrinho](./documentation/documentationPhoto6.png)\n\n\u003c/div\u003e\n\n---\n\n### Finalizando o pedido\nNo \"**Carrinho**\", você terá dois campos: \"**Revise seu pedido**\" e \"**Complete seu pedido**\".\n\n\u003cdiv align=\"center\"\u003e\n\n![Carrinho](./documentation/documentationPhoto4.png)\n\n\u003c/div\u003e\n\n#### Revise seu pedido\n- Aqui aparecerão todos os itens que você adicionou, com tudo o que você encomendou, seus opcionais, o preço desses opcionais e seus comentários. O preço dos extras está em amarelo em “**Complementos**”, pode ser um valor positivo, negativo ou até mesmo não haver valor. O valor final a ser pago aparece em verde, logo abaixo do nome do pedido. É nesta aba que o usuário irá revisar seu pedido e retirar itens do carrinho se desejar.\n\n\u003cdiv align=\"center\"\u003e\n\n![Revise seu pedido](./documentation/documentationPhoto5.png)\n\n\u003c/div\u003e\n\n#### Complete seu pedido\n\n\u003cdiv align=\"center\"\u003e\n\n![Complete seu pedido](./documentation/documentationPhoto7.png)\n\n\u003c/div\u003e\n\n- Nesta aba existe um formulário para preencher com algumas informações, como: \"**Nome**\", \"**Endereço**\", \"**CEP**\", \"**Bairro**\", \"**Número**\", \"**Ponto de referência**\", \"**Complemento**\" e \"**Forma de pagamento**\". Ao lado do campo para preenchimento do endereço de entrega, há uma checkbox “**Vou buscar no local**”, ao marcá-la, todas as informações referentes à entrega serão desativadas, fazendo com que o usuário preencha apenas o nome e a forma de pagamento. Os campos obrigatórios estão marcados em vermelho e também possuem um asterisco vermelho, o campo CEP por exemplo, o usuário é obrigado a escrever o CEP no formato correto, quando esse evento acontecer o campo ficará verde, isso vale também para os demais campos do formulário. Depois que tudo acontecer, o carrinho é zerado e outro pedido pode ser feito novamente.\n\n\u003cdiv align=\"center\"\u003e\n\n\u003csmall\u003e\nSem a checbox marcada\n\u003c/small\u003e\n\n![Sem a checkbox marcada](./documentation/documentationPhoto8.png)\n\n\u003csmall\u003e\nCom a checbox marcada\n\u003c/small\u003e\n\n![Com a checkbox marcada](./documentation/documentationPhoto9.png)\n\n\u003c/div\u003e\n\n- Caso o usuário clique no botão “**Confirmar pedido**” localizado no final do formulário, antes de preencher os campos obrigatórios, aparecerá uma mensagem alertando o usuário que ainda existem campos a serem preenchidos, o usuário não poderá completar o pedido se ele não completar o que é obrigatório. Se ele tiver preenchido tudo e clicar no botão, o texto do botão mudará e ele será desativado, aparecerá uma mensagem informando que o pedido foi realizado com sucesso.\n\n\u003cdiv align=\"center\"\u003e\n\n\u003csmall\u003e\nMensagem de que está faltando algo\n\u003c/small\u003e\n\n![Mensagem de erro](./documentation/documentationPhoto10.png)\n\n\u003csmall\u003e\nMensagem de sucesso\n\u003c/small\u003e\n\n![Mensagem de sucesso](./documentation/documentationPhoto11.png)\n\n\n\u003c/div\u003e\n\n- Quando a checkbox é marcada, apenas o nome, forma de pagamento e pedido são enviados ao servidor. Se não estiver marcada, todos os itens do formulário serão enviados.\n\n- Aqui está um exemplo de como os dados chegam no servidor quando a checbox está desmarcada de acordo com o exemplo:\n```JSON\n{\n  \"orders\": [\n    {\n      \"id\": \"90a3\",\n      \"name\": \"Fulano\",\n      \"address\": \"Rua ABC\",\n      \"zipCode\": \"28922-529\",\n      \"neighborhood\": \"Alegre\",\n      \"number\": \"7.880\",\n      \"referencePoint\": \"Próximo a uma farmácia de esquina\",\n      \"complement\": \"house\",\n      \"formOfPayment\": \"money\",\n      \"order\": [\n        {\n          \"description\": \"X Tudo\",\n          \"price\": 35,\n          \"extras\": [\n            \"Peito de peru\",\n            \"Ovo\",\n            \"Sem gergelim\"\n          ]\n        }\n      ],\n      \"submittedAt\": \"02/06/2024, 12:30:17\"\n    }\n  ]\n}\n```\n\n## ⛏️ Ferramentas utilizadas\n\n- [React](https://react.dev/)\n- [React Icons](https://react-icons.github.io/react-icons/)\n- [React Router DOM](https://www.npmjs.com/package/react-router-dom)\n- [Node](https://nodejs.org/en)\n- [JSON-Server](https://www.npmjs.com/package/json-server)\n- [Tailwind CSS](https://tailwindcss.com/)\n\n## 💻 Como executar o projeto na minha máquina?\n\n- Clone ou baixe o ZIP do repositório.\n- Crie um arquivo chamado *__orders.json__* na raíz do projeto:\n\n```Shell\nPS C:\\burger echo. \u003e orders.json\n```\n\n- Dentro desse arquivo, escreva:\n\n```JSON\n{\n\t\"orders\": []\n}\n```\n\n- Na sequência, inicialize o servidor JSON com:\n```Shell\nPS C:\\burger json-server --watch orders.json --port 3001\n```\n\u003e **Observações:** caso o arquivo json não seja criado ou o servidor não seja inicializado, um erro irá aparecer na hora de confirmar o pedido.\n\n- Inicie o projeto com:\n```Shell\n# Você precisará do Node.js instalado em sua máquina para conseguir executar esse comando.\n\nPS C:\\burger npm run dev\n```\n\n- Após esse processo, você já estará conseguindo utilizar normalmente o projeto.\n\n\u003e **Observação:** a hamburgueria só funciona a partir das 18h e vai até às 23h, caso você queira que ela fique aberta direto para fazer os pedidos, basta mudar o valor da constante **isOpen** que pode ser encontrada em \"_src/exported/constants_\". Não apague ou comente essa constante.\n```JavaScript\n// Altere de:\nexport const isOpen = hours \u003e= openingTime \u0026\u0026 hours \u003c closingTime\n\n// Para:\nexport const isOpen = hours\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheuszpicoli%2Fburger-place","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatheuszpicoli%2Fburger-place","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheuszpicoli%2Fburger-place/lists"}