Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-07T18:02:22.000Z (12 months ago)
- Last Synced: 2024-01-07T19:22:06.951Z (12 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)