{"id":28280369,"url":"https://github.com/projeto-clientflow/foodly_react","last_synced_at":"2026-01-27T10:33:55.058Z","repository":{"id":289693918,"uuid":"972053785","full_name":"Projeto-ClientFlow/Foodly_React","owner":"Projeto-ClientFlow","description":"Foodly: Terceiro Projeto Integrador desenvolvido durante o Bootcamp Fullstack Java da Generation Brasil.","archived":false,"fork":false,"pushed_at":"2025-06-03T18:08:21.000Z","size":4945,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-16T21:44:44.866Z","etag":null,"topics":["css","css3","generation-brasil","html","html5","javascript","react","reactjs","tailwind","tailwind-css","tailwindcss","typescript","typescript-react","vercel","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://foodly-react-five.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Projeto-ClientFlow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-04-24T13:16:05.000Z","updated_at":"2025-05-05T11:36:20.000Z","dependencies_parsed_at":"2025-04-24T15:42:08.810Z","dependency_job_id":"b720fdf9-a6f0-4a1c-88bd-3f4b31bbd68d","html_url":"https://github.com/Projeto-ClientFlow/Foodly_React","commit_stats":null,"previous_names":["projeto-clientflow/foodly_react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Projeto-ClientFlow/Foodly_React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Projeto-ClientFlow%2FFoodly_React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Projeto-ClientFlow%2FFoodly_React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Projeto-ClientFlow%2FFoodly_React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Projeto-ClientFlow%2FFoodly_React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Projeto-ClientFlow","download_url":"https://codeload.github.com/Projeto-ClientFlow/Foodly_React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Projeto-ClientFlow%2FFoodly_React/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28812012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T07:41:26.337Z","status":"ssl_error","status_checked_at":"2026-01-27T07:41:08.776Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["css","css3","generation-brasil","html","html5","javascript","react","reactjs","tailwind","tailwind-css","tailwindcss","typescript","typescript-react","vercel","vercel-deployment"],"created_at":"2025-05-21T10:16:45.141Z","updated_at":"2026-01-27T10:33:55.032Z","avatar_url":"https://github.com/Projeto-ClientFlow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align='center' id='topo'/\u003e\n\n# Projeto Foodly\n## Sistema de Delivery de Alimentos\n\nClique e acesse a demo do Foodly no Youtube!\n\n[![Assista à demo do ClientFlow!](https://ik.imagekit.io/willa/Design%20sem%20nome%20(5).png?updatedAt=1746213311039)](https://youtu.be/u6SN97x-9gQ)\n\n\n\u003c/div\u003e\n\nO **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.\n\n\u003e **Confira a aplicação em funcionamento pode ser acessada por meio do seguinte link:** [Site Foodly](https://foodly-react-five.vercel.app/)\n\n\u003e **Já o back-end deste projeto pode ser encontrado no seguinte link:** [Foodly](https://github.com/Projeto-ClientFlow/Foodly)\n\n******\n\n\u003cdiv align='center'/\u003e\n\n  ![React](https://a11ybadges.com/badge?logo=react)\n  ![Tailwind](https://a11ybadges.com/badge?logo=tailwindcss)\n  ![Vite](https://a11ybadges.com/badge?logo=vite)\n  ![TypeScript](https://a11ybadges.com/badge?logo=typescript)\n  ![JavaScript](https://a11ybadges.com/badge?logo=javascript)\n  ![HTML](https://a11ybadges.com/badge?logo=html5)\n  ![CSS](https://a11ybadges.com/badge?logo=css3)\n  ![Vercel](https://a11ybadges.com/badge?logo=vercel)\n\n\u003c/div\u003e\n\n******\n\n## 📖 Tabela de Conteúdo\n- [💡 Conhecimentos Mobilizados](#conhecimentosMobilizados)\n- [🏗️ Estrutura do Projeto](#estruturaDoProjeto)\n- [📂 Código Desenvolvido](#codigoDesenvolvido)\n- [🛠️ Tecnologias Utilizadas](#tecnologiasUtilizadas)\n- [🤝 Desenvolvedoras do Projeto](#devas)\n\n---\n\n\u003cdiv id='conhecimentosMobilizados'/\u003e \n\n## 💡 Conhecimentos Mobilizados\n\n- **Axios**: Consumo de APIs REST de forma eficiente, com tratamento de respostas assíncronas.\n- **React**: Criação de componentes reutilizáveis e responsivos para a construção da interface.\n- **Tailwind CSS**: Estilização da aplicação com classes utilitárias, garantindo agilidade e responsividade.\n- **TypeScript**: Aplicação da tipagem estática para maior segurança, legibilidade e escalabilidade do código.\n- **Vite**: Ferramenta de build para aplicações React, proporcionando um ambiente de desenvolvimento ágil.\n- **Componentização**: Separação de responsabilidades com componentes reutilizáveis e de fácil manutenção.\n- **Vercel**: Plataforma utilizada para o deploy da aplicação, permitindo acesso rápido e gratuito à versão em produção.\n- **React Router DOM**: Gerenciamento de rotas de maneira declarativa, permitindo navegação fluida entre páginas da aplicação.\n\n---\n\n\u003cdiv id='estruturaDoProjeto'/\u003e \n\n## 🏗️ Estrutura do Projeto\n\n```\nfoodly/\n├── public/\n│   ├── assets/\n│   │   ├── fonts/\n│   │   └── react.svg\n│   └── index.html\n├── src/\n│   ├── assets/\n│   ├── components/\n│   │   ├── barradepesquisa/\n│   │   │   └── BarraDePesquisa.tsx\n│   │   ├── categories/\n│   │   │   ├── atualizarcategoria/\n│   │   │   │   ├── AtualizarCategoria.tsx\n│   │   │   │   └── AtualizarCategoria.css\n│   │   │   ├── cadastrarcategoria/\n│   │   │   │   ├── CadastrarCategoria.tsx\n│   │   │   │   └── CadastrarCategoria.css\n│   │   │   ├── cardcategoria/\n│   │   │   │   └── CardCategoria.tsx\n│   │   │   ├── deletarcategoria/\n│   │   │   │   └── DeletarCategoria.tsx\n│   │   │   └── listacategoria/\n│   │   │       └── ListaCategoria.tsx\n│   │   ├── footer/\n│   │   │   └── Footer.tsx\n│   │   ├── navbar/\n│   │   │   └── Navbar.tsx\n│   │   ├── paginanaoencontrada/\n│   │   │   └── NaoEncontrado.tsx\n│   │   └── produtos/\n│   │       ├── atualizarproduto/\n│   │       │   ├── AtualizarProduto.tsx\n│   │       │   └── AtualizarProduto.css\n│   │       ├── cadastrarproduto/\n│   │       │   ├── CadastrarProduto.tsx\n│   │       │   └── CadastrarProduto.css\n│   │       ├── cardproduto/\n│   │       │   └── CardProduto.tsx\n│   │       ├── deletarproduto/\n│   │       │   └── DeletarProduto.tsx\n│   │       ├── listaprodutos/\n│   │       │   └── ListaProdutos.tsx\n│   │       └── modalproduto/\n│   │           ├── ModalProduto.tsx\n│   │           └── ModalProduto.css\n│   ├── contexts/\n│   │   └── AuthContext.tsx\n│   ├── models/\n│   │   ├── Card.ts\n│   │   ├── Categoria.ts\n│   │   ├── Produto.ts\n│   │   ├── Usuario.ts\n│   │   └── UsuarioLogin.ts\n│   ├── pages/\n│   │   ├── cadastro/\n│   │   │   ├── Cadastro.tsx\n│   │   │   └── Cadastro.css\n│   │   ├── home/\n│   │   │   └── Home.tsx\n│   │   ├── login/\n│   │   │   ├── Login.tsx\n│   │   │   └── Login.css\n│   │   ├── perfil/\n│   │   │   ├── atualizarperfil/\n│   │   │   │   └── AtualizarPerfil.tsx\n│   │   │   ├── deletarperfil/\n│   │   │   │   └── DeletarPerfil.tsx\n│   │   │   └── Perfil.tsx\n│   │   └── sobre_nos/\n│   │       └── SobreNos.tsx\n│   ├── services/\n│   │   └── Service.ts\n│   ├── utils/\n│   │   └── ToastAlerta.ts\n│   ├── App.tsx\n│   ├── App.css\n│   ├── index.css\n│   └── main.tsx\n├── .gitignore\n├── README.md\n├── eslint.config.js\n├── index.html\n├── package.json\n├── tsconfig.app.json\n├── tsconfig.json\n├── tsconfig.node.json\n├── vite.config.ts\n└── yarn.lock\n```\n\n\u003cdiv id='codigoDesenvolvido'/\u003e\n\n## 📂 Código Desenvolvido\n\n- **`App.tsx`**: Componente raiz da aplicação, responsável por definir as rotas e renderizar os principais elementos de interface.\n- **`main.tsx`**: Ponto de entrada da aplicação, onde o React é inicializado e o componente App é injetado no DOM.\n- **`index.css`** e **`App.css`**: Arquivos de estilização global da aplicação, com configurações personalizadas e utilitários baseados em Tailwind CSS.\n- **`vite.config.ts`**: Configuração do Vite como bundler, otimizando a performance e o ambiente de desenvolvimento.\n- **`Navbar.tsx`** e **`Footer.tsx`**: Componentes fixos e reutilizáveis de cabeçalho e rodapé, presentes em todas as páginas da aplicação.\n- **`BarraDePesquisa.tsx`**: Componente funcional de busca, que melhora a usabilidade permitindo ao usuário encontrar produtos com mais agilidade.\n- **`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.\n- **`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.\n- **`Home.tsx`**: Página inicial com destaque para os produtos e categorias.\n- **`Login.tsx`** e **`Cadastro.tsx`**: Telas de autenticação e registro de usuários.\n- **`Perfil.tsx`**, **`AtualizarPerfil.tsx`**, **`DeletarPerfil.tsx`**: Funcionalidades relacionadas à visualização e gerenciamento do perfil do usuário.\n- **`SobreNos.tsx`**: Página institucional com informações sobre o projeto.\n- **`NaoEncontrado.tsx`**: Página de erro 404 personalizada.\n- **`AuthContext.tsx`**: Contexto global para gerenciamento de autenticação e estado do usuário, utilizando a Context API do React.\n- **`ToastAlerta.ts`**: Função utilitária para exibir mensagens de alerta e feedback ao usuário utilizando notificações.\n- **`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.\n- **`Service.ts`**: Centralização das requisições HTTP feitas com Axios, promovendo reaproveitamento de código e melhor organização das chamadas à API.\n\n---\n\n\u003cdiv id='tecnologiasUtilizadas'/\u003e \n\n## 🛠️ Tecnologias Utilizadas\n\n- **Linguagem**: JavaScript (ES6+) e TypeScript\n- **Framework**: React\n- **Roteamento**: React Router DOM\n- **Estilização**: Tailwind CSS\n- **Ferramenta de Build**: Vite\n- **Gerenciador de Pacotes**: npx\n- **Consumo de API**: Axios\n- **Hospedagem**: Vercel\n  \n---\n\n\u003cdiv id='devas'/\u003e \n  \n## 🤝 Desenvolvedoras do Projeto\n\nEste projeto foi possível graças às contribuições das seguintes desenvolvedoras:\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://www.linkedin.com/in/elianempontes/\" title=\"Linkedin da Eliane Medeiros\"\u003e\n          \u003cimg src=\"https://media.licdn.com/dms/image/v2/D4D03AQGppzwuto4Skw/profile-displayphoto-shrink_400_400/B4DZOzMU5sHUAg-/0/1733878173890?e=1747267200\u0026v=beta\u0026t=dYk2XBvZ6Be-J99J4sp9kljf2TF3ZZ5YZ8lEu72U7oA\" width=\"100px;\" alt=\"Foto da Eliane Medeiros\"/\u003e\u003cbr\u003e\n          \u003csub\u003e\n            \u003cb\u003eEliane Medeiros\u003c/b\u003e\n          \u003c/sub\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://www.linkedin.com/in/larissa-mata-a32a5a104/\" title=\"Linkedin da Larissa Mata\"\u003e\n          \u003cimg src=\"https://media.licdn.com/dms/image/v2/D4D03AQH8ZGW05SThzA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1698075416577?e=1747267200\u0026v=beta\u0026t=MZQra9MZhtWWZqrZx6Re7loE6-KZIhHj9kj5Rbxe_Ds\" width=\"100px;\" alt=\"Foto da Larissa Mata\"/\u003e\u003cbr\u003e\n          \u003csub\u003e\n            \u003cb\u003eLarissa Mata\u003c/b\u003e\n          \u003c/sub\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/MariPimentelCarmo\" title=\"GitHub da Mariana Carmo\"\u003e\n          \u003cimg src=\"https://avatars.githubusercontent.com/u/99743029?v=4\" width=\"100px;\" alt=\"Foto da Mariana Carmo\"/\u003e\u003cbr\u003e\n          \u003csub\u003e\n            \u003cb\u003eMariana Carmo\u003c/b\u003e\n          \u003c/sub\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/willaevangelista\" title=\"GitHub da Willa Evangelista\"\u003e\n          \u003cimg src=\"https://avatars.githubusercontent.com/u/84138876?v=4\" width=\"100px;\" alt=\"Foto da Willa Evangelista\"/\u003e\u003cbr\u003e\n          \u003csub\u003e\n            \u003cb\u003eWilla Evangelista\u003c/b\u003e\n          \u003c/sub\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n\u003cdiv align='right'\u003e\n  \n  [Voltar ao topo ⬆️](#topo)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojeto-clientflow%2Ffoodly_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprojeto-clientflow%2Ffoodly_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojeto-clientflow%2Ffoodly_react/lists"}