https://github.com/epiled/alfood
🍔 Site da Alfood com sistema de CMS, um CRUD completo para a gestão dos restaurantes e pratos 🍳
https://github.com/epiled/alfood
axios-react css-modules mui react sass typescript
Last synced: 2 months ago
JSON representation
🍔 Site da Alfood com sistema de CMS, um CRUD completo para a gestão dos restaurantes e pratos 🍳
- Host: GitHub
- URL: https://github.com/epiled/alfood
- Owner: Epiled
- License: mit
- Created: 2023-11-26T11:49:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-07T18:02:22.000Z (over 1 year ago)
- Last Synced: 2025-01-20T12:27:52.691Z (4 months ago)
- Topics: axios-react, css-modules, mui, react, sass, typescript
- Language: TypeScript
- Homepage:
- Size: 88.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🍲 Alfood
Projeto do curso React: integrando seu projeto React com APIs da Alura, curso ministrado pelo instrutor Marcos Vinicios da Silva Neves.
| :placard: Vitrine.Dev | |
| ------------- | --- |
| :sparkles: Nome | **Alfood**
| :label: Tecnologias | html, css, js, sass, node, react, typescript, css modules, axios, mui, docker, swagger
📃 Detalhes do projeto
Neste projeto, implementamos uma área de administração para a empresa Alfood com um sistema de CMS para gerenciar restaurantes e pratos. O sistema possui um CRUD completo e funcional.
Para os usuários, desenvolvemos um sistema de busca que facilita a localização de restaurantes de seu interesse, além de implementar um eficiente sistema de paginação.
Dentro do projeto, apresentamos duas versões dessas funcionalidades:
1. **Sistema de Busca e Paginação por Scroll Infinito:**
- Busca: Orientada pelo nome do restaurante.
- Paginação: Implementada de forma dinâmica, permitindo uma experiência contínua e intuitiva.
2. **Sistema de Busca e Paginação por Páginas:**
- Busca: Inclui um campo adicional para especificar a ordenação desejada.
- Paginação: Estruturada por páginas, oferecendo uma abordagem mais clássica e organizada.
Essas versões proporcionam diferentes experiências de uso, atendendo às preferências e necessidades dos usuários.
Utilizamos React com TypeScript para o desenvolvimento, garantindo um código de qualidade com a ajuda do ESLint. O estilo foi aplicado usando CSS Modules e Sass.
Dado o foco funcional do projeto, concentrando-se na compreensão do consumo de API em React por meio do Axios, optou-se por manter um design simples e intuitivo.
📑 Tabela de Conteúdos
* [Detalhes do projeto](#detalhes-do-projeto)
* [Tópicos Desenvolvidos](#topicos-curso)
* [Demonstração](#demonstracao)
- [Home](#home)
- [Restaurantes V1 Scroll Infinito](#restaurantes-v1)
- [Restaurantes V2 Paginação por Páginas](#restaurantes-v2)
- [Admin - Restaurantes](#admin-restaurantes)
- [Admin - Novo Restaurante](#admin-novo-restaurante)
- [Admin - Editar Restaurante](#admin-editar-restaurante)
- [Admin - Excluir Restaurante](#admin-excluir-restaurante)
- [Admin - Pratos](#admin-pratos)
- [Admin - Novo Prato](#admin-novo-prato)
- [Admin - Editar Prato](#admin-editar-prato)
- [Admin - Excluir Prato](#admin-excluir-prato)
- [Documentação Swagger](#documentacao-swagger)
* [Pré-Requisito](#pre-requisito)
* [Instalação](#instalacao)
* [Como usar](#como-usar)
* [Tecnologias](#tecnologias)
* [Autor](#autor)
👩🏫 Tópicos desenvolvidos
* Desenvolva a comunicação entre uma aplicação React e uma API REST
* Implemente hooks para buscar dados em uma API
* Utilize o axios para realizar requisições HTTP
* Avalie as informações da resposta da API
* Integre o frontend ao backend
* Descreva o funcionamento de uma API a partir do Swagger
👀 Demonstração
Home
https://github.com/Epiled/alfood/assets/55258483/dc16d154-1054-43d5-a0ce-221b6ec93910
Restaurantes V1 Scroll Infinito
https://github.com/Epiled/alfood/assets/55258483/e23a96bc-ec81-48d2-8015-3c42d160248a
Restaurantes V2 Paginação por Páginas
https://github.com/Epiled/alfood/assets/55258483/01d6f129-2159-48a1-b1cd-e3fd0806ebf2
Admin - Restaurantes
https://github.com/Epiled/alfood/assets/55258483/52a1f502-82f4-4b2e-8352-797f61312c94
Admin - Novo Restaurante
https://github.com/Epiled/alfood/assets/55258483/bebc8533-9c59-4077-9c82-b78b3e5d0f28
Admin - Editar Restaurante
https://github.com/Epiled/alfood/assets/55258483/f3bd2e0c-bcd0-4ced-bbe9-324d20655f42
Admin - Excluir Restaurante
https://github.com/Epiled/alfood/assets/55258483/ff5545b1-6a5c-43ac-ad19-73e5a46f4c94
Admin - Pratos
https://github.com/Epiled/alfood/assets/55258483/19f067b8-3288-4976-ba0b-8ce3d4372477
Admin - Novo Prato
https://github.com/Epiled/alfood/assets/55258483/41b29a0a-2048-42df-81c8-0960e8b22f22
Admin - Editar Prato
https://github.com/Epiled/alfood/assets/55258483/f7a43bdc-fffc-4d42-8819-fb03c572b234
Admin - Excluir Prato
https://github.com/Epiled/alfood/assets/55258483/961ee7d2-c797-4145-8043-8811e6e0ffb8
Documentação Swagger
https://github.com/Epiled/alfood/assets/55258483/e497d0ac-4c4a-4a00-a7f3-161a96806f3f
🚨 Pré-requisito
- Node
- Docker
⚙ Instalação
```
1. git clone https://github.com/Epiled/alfood.git
```
Site e suas dependências
```
1. cd alfood-site
2. npm install
```
API Docker
Inicie o Dockerc antes de executar os comandos no terminal
```
1. cd restaurantes_api_docker
2. docker-compose build
```
👩🏫 Como usar
Inciando o site
```
1. Abra o diretório alfood-site no terminal
2. npm start
3. Acesse a url http://localhost:3000/
```
Inciando o site
```
1. Abra o aplicativo Docker Desktop
2. Abra o diretório restaurantes_api_docker no terminal
3. docker-compose up
4. Acesse a url http://localhost:8000/
```
A documentação completa do Swagger, que explica em detalhes o funcionamento e o uso da API, está disponível na URL gerada.
🛠 Tecnologias
As seguintes tecnologias foram usadas na construção deste projeto:
👨💻 Autor
Felipe De Andrade
Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!
[](https://www.linkedin.com/in/fademendonca/)
[](mailto:[email protected])
[](https://www.instagram.com/felipe.deam/)
[](https://codepen.io/epiled)