https://github.com/projeto-clientflow/clientflow_react
ClientFlow: Segundo Projeto Integrador desenvolvido durante o Bootcamp Fullstack Java da Generation Brasil.
https://github.com/projeto-clientflow/clientflow_react
css css3 generation-brasil html html5 javascript react reactjs tailwind tailwind-css tailwindcss typescript typescript-react vercel vercel-deployment
Last synced: 11 months ago
JSON representation
ClientFlow: Segundo Projeto Integrador desenvolvido durante o Bootcamp Fullstack Java da Generation Brasil.
- Host: GitHub
- URL: https://github.com/projeto-clientflow/clientflow_react
- Owner: Projeto-ClientFlow
- Created: 2025-04-22T12:16:14.000Z (about 1 year ago)
- Default Branch: feature/merge-inicial
- Last Pushed: 2025-05-02T18:48:05.000Z (about 1 year ago)
- Last Synced: 2025-05-21T10:16:45.528Z (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: TypeScript
- Homepage: https://client-flow-react-seven.vercel.app
- Size: 704 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Projeto ClientFlow
## Sistema de CRM (Customer Relationship Management)
Clique e acesse a demo do ClientFlow no Youtube!
[.png?updatedAt=1746211173500)](https://youtu.be/HInqPNLu2u8)
O **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.
> **Confira a aplicação em funcionamento pode ser acessada por meio do seguinte link:** [Site ClientFlow](https://client-flow-react-seven.vercel.app/)
> **Já o back-end deste projeto pode ser encontrado no seguinte link:** [ClientFlow](https://github.com/Projeto-ClientFlow/ClientFlow)
******
******
## 📖 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
```
clientflow/
├── public/
│ ├── assets/
│ │ └── fonts/
│ │ └── react.svg
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── barrapesquisa/
│ │ │ └── BarraPesquisa.tsx
│ │ ├── categories/
│ │ │ ├── atualizarcategorias/
│ │ │ │ └── AtualizarCategorias.tsx
│ │ │ ├── cadastrarcategorias/
│ │ │ │ └── CadastrarCategorias.tsx
│ │ │ ├── cardcategorias/
│ │ │ │ └── CardCategorias.tsx
│ │ │ ├── deletarcategorias/
│ │ │ │ └── DeletarCategorias.tsx
│ │ │ └── listacategorias/
│ │ │ └── ListaCategorias.tsx
│ │ ├── footer/
│ │ │ └── Footer.tsx
│ │ ├── menu/
│ │ │ └── Menu.tsx
│ │ └── navbar/
│ │ └── Navbar.tsx
│ ├── models/
│ │ ├── Card.ts
│ │ ├── Categories.ts
│ │ ├── Produto.ts
│ │ └── Tema.ts
│ ├── pages/
│ │ ├── home/
│ │ │ └── Home.tsx
│ │ ├── produto/
│ │ │ ├── cardproduto/
│ │ │ │ └── CardProduto.tsx
│ │ │ ├── AtualizarProduto.tsx
│ │ │ ├── CadastrarProduto.tsx
│ │ │ ├── DeletarProduto.tsx
│ │ │ └── ListarProduto.tsx
│ │ ├── sobre_nos/
│ │ │ └── SobreNos.tsx
│ │ └── tema/
│ │ ├── AtualizarTema.tsx
│ │ ├── CadastrarTema.tsx
│ │ ├── DeletarTema.tsx
│ │ └── ListarTema.tsx
│ ├── services/
│ │ └── Services.ts
│ ├── App.tsx
│ └── index.css
├── index.html
├── tailwind.config.js
├── package.json
├── postcss.config.js
└── vite.config.js
```
## 📂 Código Desenvolvido
- **`App.tsx`**: Componente raiz que define a estrutura e roteamento da aplicação.
- **`Home.tsx`**: Página principal da aplicação, onde os componentes são organizados e renderizados.
- **`index.css`**: Arquivo de estilização global com configurações base do Tailwind CSS.
- **`tailwind.config.js`**: Arquivo de configuração do Tailwind CSS.
- **`vite.config.js`**: Configuração do Vite como bundler da aplicação.
- **`Navbar.tsx`** e **`Footer.tsx`**: Componentes fixos de navegação e rodapé, reutilizados em todas as páginas.
- **`Menu.tsx`** e **`BarraPesquisa.tsx`**: Componentes de navegação e busca, que otimizam a usabilidade do sistema.
- **`CardCategorias.tsx`**, **`CadastrarCategorias.tsx`**, **`AtualizarCategorias.tsx`**, **`DeletarCategorias.tsx`**, **`ListaCategorias.tsx`**: Conjunto de componentes responsáveis pelas operações de CRUD de categorias.
- **`CardProduto.tsx`**, **`CadastrarProduto.tsx`**, **`AtualizarProduto.tsx`**, **`DeletarProduto.tsx`**, **`ListarProduto.tsx`**: Componentes do CRUD de produtos com foco em reatividade e responsividade.
- **`CadastrarTema.tsx`**, **`AtualizarTema.tsx`**, **`DeletarTema.tsx`**, **`ListarTema.tsx`**: Telas dedicadas à gestão de temas, seguindo o mesmo padrão modular e reutilizável.
- **`SobreNos.tsx`**: Página institucional com informações sobre o projeto e equipe.
- **`Services.ts`**: Centralização das chamadas HTTP com Axios, facilitando a manutenção e reutilização.
- **`Card.ts`**, **`Categories.ts`**, **`Produto.ts`**, **`Tema.ts`**: Modelos tipados com TypeScript que representam as entidades da aplicação.
- **`vite.config.js`**: Configuração do Vite como bundler para otimização do desenvolvimento.
- **`tailwind.config.js`**: Arquivo de configuração do Tailwind CSS para personalização de estilos e temas.
---
## 🛠️ 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)
