https://github.com/projeto-clientflow/foodly_react
Foodly: Terceiro Projeto Integrador desenvolvido durante o Bootcamp Fullstack Java da Generation Brasil.
https://github.com/projeto-clientflow/foodly_react
css css3 generation-brasil html html5 javascript react reactjs tailwind tailwind-css tailwindcss typescript typescript-react vercel vercel-deployment
Last synced: 5 months ago
JSON representation
Foodly: Terceiro Projeto Integrador desenvolvido durante o Bootcamp Fullstack Java da Generation Brasil.
- Host: GitHub
- URL: https://github.com/projeto-clientflow/foodly_react
- Owner: Projeto-ClientFlow
- Created: 2025-04-24T13:16:05.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-03T18:08:21.000Z (about 1 year ago)
- Last Synced: 2025-06-16T21:44:44.866Z (about 1 year ago)
- Topics: css, css3, generation-brasil, html, html5, javascript, react, reactjs, tailwind, tailwind-css, tailwindcss, typescript, typescript-react, vercel, vercel-deployment
- Language: JavaScript
- Homepage: https://foodly-react-five.vercel.app
- Size: 4.72 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Projeto Foodly
## Sistema de Delivery de Alimentos
Clique e acesse a demo do Foodly no Youtube!
[.png?updatedAt=1746213311039)](https://youtu.be/u6SN97x-9gQ)
O **Foodly** é um sistema de delivery desenvolvido com foco em agilidade e experiência do usuário. A aplicação possui uma interface moderna construída com **React**, **Tailwind CSS** e **TypeScript** no front-end, integrada a uma API robusta desenvolvida em **Java** com **Spring Boot** no back-end.
> **Confira a aplicação em funcionamento pode ser acessada por meio do seguinte link:** [Site Foodly](https://foodly-react-five.vercel.app/)
> **Já o back-end deste projeto pode ser encontrado no seguinte link:** [Foodly](https://github.com/Projeto-ClientFlow/Foodly)
******
******
## 📖 Tabela de Conteúdo
- [💡 Conhecimentos Mobilizados](#conhecimentosMobilizados)
- [🏗️ Estrutura do Projeto](#estruturaDoProjeto)
- [📂 Código Desenvolvido](#codigoDesenvolvido)
- [🛠️ Tecnologias Utilizadas](#tecnologiasUtilizadas)
- [🤝 Desenvolvedoras do Projeto](#devas)
---
## 💡 Conhecimentos Mobilizados
- **Axios**: Consumo de APIs REST de forma eficiente, com tratamento de respostas assíncronas.
- **React**: Criação de componentes reutilizáveis e responsivos para a construção da interface.
- **Tailwind CSS**: Estilização da aplicação com classes utilitárias, garantindo agilidade e responsividade.
- **TypeScript**: Aplicação da tipagem estática para maior segurança, legibilidade e escalabilidade do código.
- **Vite**: Ferramenta de build para aplicações React, proporcionando um ambiente de desenvolvimento ágil.
- **Componentização**: Separação de responsabilidades com componentes reutilizáveis e de fácil manutenção.
- **Vercel**: Plataforma utilizada para o deploy da aplicação, permitindo acesso rápido e gratuito à versão em produção.
- **React Router DOM**: Gerenciamento de rotas de maneira declarativa, permitindo navegação fluida entre páginas da aplicação.
---
## 🏗️ Estrutura do Projeto
```
foodly/
├── public/
│ ├── assets/
│ │ ├── fonts/
│ │ └── react.svg
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── barradepesquisa/
│ │ │ └── BarraDePesquisa.tsx
│ │ ├── categories/
│ │ │ ├── atualizarcategoria/
│ │ │ │ ├── AtualizarCategoria.tsx
│ │ │ │ └── AtualizarCategoria.css
│ │ │ ├── cadastrarcategoria/
│ │ │ │ ├── CadastrarCategoria.tsx
│ │ │ │ └── CadastrarCategoria.css
│ │ │ ├── cardcategoria/
│ │ │ │ └── CardCategoria.tsx
│ │ │ ├── deletarcategoria/
│ │ │ │ └── DeletarCategoria.tsx
│ │ │ └── listacategoria/
│ │ │ └── ListaCategoria.tsx
│ │ ├── footer/
│ │ │ └── Footer.tsx
│ │ ├── navbar/
│ │ │ └── Navbar.tsx
│ │ ├── paginanaoencontrada/
│ │ │ └── NaoEncontrado.tsx
│ │ └── produtos/
│ │ ├── atualizarproduto/
│ │ │ ├── AtualizarProduto.tsx
│ │ │ └── AtualizarProduto.css
│ │ ├── cadastrarproduto/
│ │ │ ├── CadastrarProduto.tsx
│ │ │ └── CadastrarProduto.css
│ │ ├── cardproduto/
│ │ │ └── CardProduto.tsx
│ │ ├── deletarproduto/
│ │ │ └── DeletarProduto.tsx
│ │ ├── listaprodutos/
│ │ │ └── ListaProdutos.tsx
│ │ └── modalproduto/
│ │ ├── ModalProduto.tsx
│ │ └── ModalProduto.css
│ ├── contexts/
│ │ └── AuthContext.tsx
│ ├── models/
│ │ ├── Card.ts
│ │ ├── Categoria.ts
│ │ ├── Produto.ts
│ │ ├── Usuario.ts
│ │ └── UsuarioLogin.ts
│ ├── pages/
│ │ ├── cadastro/
│ │ │ ├── Cadastro.tsx
│ │ │ └── Cadastro.css
│ │ ├── home/
│ │ │ └── Home.tsx
│ │ ├── login/
│ │ │ ├── Login.tsx
│ │ │ └── Login.css
│ │ ├── perfil/
│ │ │ ├── atualizarperfil/
│ │ │ │ └── AtualizarPerfil.tsx
│ │ │ ├── deletarperfil/
│ │ │ │ └── DeletarPerfil.tsx
│ │ │ └── Perfil.tsx
│ │ └── sobre_nos/
│ │ └── SobreNos.tsx
│ ├── services/
│ │ └── Service.ts
│ ├── utils/
│ │ └── ToastAlerta.ts
│ ├── App.tsx
│ ├── App.css
│ ├── index.css
│ └── main.tsx
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
```
## 📂 Código Desenvolvido
- **`App.tsx`**: Componente raiz da aplicação, responsável por definir as rotas e renderizar os principais elementos de interface.
- **`main.tsx`**: Ponto de entrada da aplicação, onde o React é inicializado e o componente App é injetado no DOM.
- **`index.css`** e **`App.css`**: Arquivos de estilização global da aplicação, com configurações personalizadas e utilitários baseados em Tailwind CSS.
- **`vite.config.ts`**: Configuração do Vite como bundler, otimizando a performance e o ambiente de desenvolvimento.
- **`Navbar.tsx`** e **`Footer.tsx`**: Componentes fixos e reutilizáveis de cabeçalho e rodapé, presentes em todas as páginas da aplicação.
- **`BarraDePesquisa.tsx`**: Componente funcional de busca, que melhora a usabilidade permitindo ao usuário encontrar produtos com mais agilidade.
- **`CardCategoria.tsx`**, **`CadastrarCategoria.tsx`**, **`AtualizarCategoria.tsx`**, **`DeletarCategoria.tsx`**, **`ListaCategoria.tsx`**: Conjunto de componentes responsáveis pelas operações de CRUD de categorias, implementando boas práticas de modularidade.
- **`CardProduto.tsx`**, **`CadastrarProduto.tsx`**, **`AtualizarProduto.tsx`**, **`DeletarProduto.tsx`**, **`ListaProdutos.tsx`**, **`ModalProduto.tsx`**: Componentes voltados ao gerenciamento de produtos, com foco em interatividade, reatividade e responsividade.
- **`Home.tsx`**: Página inicial com destaque para os produtos e categorias.
- **`Login.tsx`** e **`Cadastro.tsx`**: Telas de autenticação e registro de usuários.
- **`Perfil.tsx`**, **`AtualizarPerfil.tsx`**, **`DeletarPerfil.tsx`**: Funcionalidades relacionadas à visualização e gerenciamento do perfil do usuário.
- **`SobreNos.tsx`**: Página institucional com informações sobre o projeto.
- **`NaoEncontrado.tsx`**: Página de erro 404 personalizada.
- **`AuthContext.tsx`**: Contexto global para gerenciamento de autenticação e estado do usuário, utilizando a Context API do React.
- **`ToastAlerta.ts`**: Função utilitária para exibir mensagens de alerta e feedback ao usuário utilizando notificações.
- **`Categoria.ts, **`Produto.ts`**, **`Usuario.ts`**, **`UsuarioLogin.ts`**, **`Card.ts`**: Interfaces TypeScript que representam as entidades da aplicação, garantindo tipagem estática e segurança durante o desenvolvimento.
- **`Service.ts`**: Centralização das requisições HTTP feitas com Axios, promovendo reaproveitamento de código e melhor organização das chamadas à API.
---
## 🛠️ Tecnologias Utilizadas
- **Linguagem**: JavaScript (ES6+) e TypeScript
- **Framework**: React
- **Roteamento**: React Router DOM
- **Estilização**: Tailwind CSS
- **Ferramenta de Build**: Vite
- **Gerenciador de Pacotes**: npx
- **Consumo de API**: Axios
- **Hospedagem**: Vercel
---
## 🤝 Desenvolvedoras do Projeto
Este projeto foi possível graças às contribuições das seguintes desenvolvedoras:
[Voltar ao topo ⬆️](#topo)
