{"id":28280366,"url":"https://github.com/projeto-clientflow/clientflow_react","last_synced_at":"2025-07-09T16:32:42.035Z","repository":{"id":289287490,"uuid":"970706159","full_name":"Projeto-ClientFlow/ClientFlow_react","owner":"Projeto-ClientFlow","description":"ClientFlow: Segundo Projeto Integrador desenvolvido durante o Bootcamp Fullstack Java da Generation Brasil.","archived":false,"fork":false,"pushed_at":"2025-05-02T18:48:05.000Z","size":721,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"feature/merge-inicial","last_synced_at":"2025-05-21T10:16:45.528Z","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://client-flow-react-seven.vercel.app","language":"TypeScript","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-22T12:16:14.000Z","updated_at":"2025-05-02T20:00:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"c7ad523e-b5fa-4799-a9b7-6e27e8bdf35d","html_url":"https://github.com/Projeto-ClientFlow/ClientFlow_react","commit_stats":null,"previous_names":["projeto-clientflow/clientflow_react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Projeto-ClientFlow/ClientFlow_react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Projeto-ClientFlow%2FClientFlow_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Projeto-ClientFlow%2FClientFlow_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Projeto-ClientFlow%2FClientFlow_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Projeto-ClientFlow%2FClientFlow_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Projeto-ClientFlow","download_url":"https://codeload.github.com/Projeto-ClientFlow/ClientFlow_react/tar.gz/refs/heads/feature/merge-inicial","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Projeto-ClientFlow%2FClientFlow_react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260244826,"owners_count":22980083,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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:44.578Z","updated_at":"2025-06-16T21:32:16.148Z","avatar_url":"https://github.com/Projeto-ClientFlow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align='center' id='topo'/\u003e\n\n# Projeto ClientFlow\n## Sistema de CRM (Customer Relationship Management)\n\nClique e acesse a demo do ClientFlow no Youtube!\n\n[![Assista à demo do ClientFlow!](https://ik.imagekit.io/willa/Design%20sem%20nome%20(4).png?updatedAt=1746211173500)](https://youtu.be/HInqPNLu2u8)\n\n\n\u003c/div\u003e\n\nO **ClientFlow** é um sistema de gerenciamento de clientes desenvolvido com foco em usabilidade e eficiência. 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 ClientFlow](https://client-flow-react-seven.vercel.app/)\n\n\u003e **Já o back-end deste projeto pode ser encontrado no seguinte link:** [ClientFlow](https://github.com/Projeto-ClientFlow/ClientFlow)\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```\nclientflow/\n├── public/\n│   ├── assets/\n│   │   └── fonts/\n│   │   └── react.svg\n│   └── index.html\n├── src/\n│   ├── assets/\n│   ├── components/\n│   │   ├── barrapesquisa/\n│   │   │   └── BarraPesquisa.tsx\n│   │   ├── categories/\n│   │   │   ├── atualizarcategorias/\n│   │   │   │   └── AtualizarCategorias.tsx\n│   │   │   ├── cadastrarcategorias/\n│   │   │   │   └── CadastrarCategorias.tsx\n│   │   │   ├── cardcategorias/\n│   │   │   │   └── CardCategorias.tsx\n│   │   │   ├── deletarcategorias/\n│   │   │   │   └── DeletarCategorias.tsx\n│   │   │   └── listacategorias/\n│   │   │       └── ListaCategorias.tsx\n│   │   ├── footer/\n│   │   │   └── Footer.tsx\n│   │   ├── menu/\n│   │   │   └── Menu.tsx\n│   │   └── navbar/\n│   │       └── Navbar.tsx\n│   ├── models/\n│   │   ├── Card.ts\n│   │   ├── Categories.ts\n│   │   ├── Produto.ts\n│   │   └── Tema.ts\n│   ├── pages/\n│   │   ├── home/\n│   │   │   └── Home.tsx\n│   │   ├── produto/\n│   │   │   ├── cardproduto/\n│   │   │   │   └── CardProduto.tsx\n│   │   │   ├── AtualizarProduto.tsx\n│   │   │   ├── CadastrarProduto.tsx\n│   │   │   ├── DeletarProduto.tsx\n│   │   │   └── ListarProduto.tsx\n│   │   ├── sobre_nos/\n│   │   │   └── SobreNos.tsx\n│   │   └── tema/\n│   │       ├── AtualizarTema.tsx\n│   │       ├── CadastrarTema.tsx\n│   │       ├── DeletarTema.tsx\n│   │       └── ListarTema.tsx\n│   ├── services/\n│   │   └── Services.ts\n│   ├── App.tsx\n│   └── index.css\n├── index.html\n├── tailwind.config.js\n├── package.json\n├── postcss.config.js\n└── vite.config.js\n```\n\n\u003cdiv id='codigoDesenvolvido'/\u003e\n\n## 📂 Código Desenvolvido\n\n- **`App.tsx`**: Componente raiz que define a estrutura e roteamento da aplicação.\n- **`Home.tsx`**: Página principal da aplicação, onde os componentes são organizados e renderizados.\n- **`index.css`**: Arquivo de estilização global com configurações base do Tailwind CSS. \n- **`tailwind.config.js`**: Arquivo de configuração do Tailwind CSS.\n- **`vite.config.js`**: Configuração do Vite como bundler da aplicação.\n- **`Navbar.tsx`** e **`Footer.tsx`**: Componentes fixos de navegação e rodapé, reutilizados em todas as páginas.\n- **`Menu.tsx`** e **`BarraPesquisa.tsx`**: Componentes de navegação e busca, que otimizam a usabilidade do sistema.\n- **`CardCategorias.tsx`**, **`CadastrarCategorias.tsx`**, **`AtualizarCategorias.tsx`**, **`DeletarCategorias.tsx`**, **`ListaCategorias.tsx`**: Conjunto de componentes responsáveis pelas operações de CRUD de categorias.\n- **`CardProduto.tsx`**, **`CadastrarProduto.tsx`**, **`AtualizarProduto.tsx`**, **`DeletarProduto.tsx`**, **`ListarProduto.tsx`**: Componentes do CRUD de produtos com foco em reatividade e responsividade.\n- **`CadastrarTema.tsx`**, **`AtualizarTema.tsx`**, **`DeletarTema.tsx`**, **`ListarTema.tsx`**: Telas dedicadas à gestão de temas, seguindo o mesmo padrão modular e reutilizável.\n- **`SobreNos.tsx`**: Página institucional com informações sobre o projeto e equipe.\n- **`Services.ts`**: Centralização das chamadas HTTP com Axios, facilitando a manutenção e reutilização.\n- **`Card.ts`**, **`Categories.ts`**, **`Produto.ts`**, **`Tema.ts`**: Modelos tipados com TypeScript que representam as entidades da aplicação.\n- **`vite.config.js`**: Configuração do Vite como bundler para otimização do desenvolvimento.\n- **`tailwind.config.js`**: Arquivo de configuração do Tailwind CSS para personalização de estilos e temas.\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%2Fclientflow_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprojeto-clientflow%2Fclientflow_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojeto-clientflow%2Fclientflow_react/lists"}