Este repositório contém um sistema de CRM (Customer Relationship Management) desenvolvido utilizando React para o front-end e Firebase para o backend e autenticação.
CRMSystem.mp4
- Gerenciamento de Clientes: Implementação de operações CRUD para adicionar, editar e excluir informações de clientes de forma intuitiva e eficiente.
- Autenticação de Usuários: Autenticação de usuários com Firebase Authentication e controle de acesso à aplicação.
- Armazenamento e Consulta de Dados: Utiliza o Firestore para armazenar e consultar dados dos clientes de forma eficiente e em tempo real.
-
React: Foi utilizado no front-end para construir uma interface de usuário dinâmica e responsiva. Componentes como formulários de gerenciamento de clientes e tabelas de exibição de dados foram criados utilizando React Hooks, proporcionando uma navegação suave e uma experiência intuitiva para o usuário.
-
Firebase: No backend, integrou dois serviços principais: Cloud Firestore, para armazenar e recuperar informações de clientes em tempo real, e Firebase Authentication, que gerencia a autenticação de usuários de maneira segura e simplificada, permitindo o controle de acesso à aplicação.
-
Node.js: Utilizado em conjunto com o Firebase para gerenciar funções de back-end e garantir a integração contínua entre a base de dados e o front-end, permitindo atualizações em tempo real dos dados exibidos na interface do CRM.
-
JavaScript: Toda a lógica de interação do projeto, incluindo manipulação de dados e autenticação, foi implementada utilizando as melhores práticas para garantir performance e escalabilidade, com integração total entre o front-end e o back-end.
-
Bootstrap: Aplicado para estilizar a interface, criando layouts responsivos e componentes visuais como botões, formulários e modais, garantindo uma experiência de usuário moderna e amigável em dispositivos móveis e desktops.
-
CSS: As folhas de estilo personalizaram os componentes criados com Bootstrap, ajustando cores, espaçamentos e animações, aprimorando a usabilidade e a estética da aplicação.
-
HTML: Utilizado para estruturar a base da aplicação, definindo a semântica das páginas e os elementos fundamentais que compõem o layout do CRM, como seções de clientes, formulários de autenticação e painéis de controle.
-
O React foi fundamental como base da aplicação, proporcionando uma arquitetura eficiente para o desenvolvimento frontend.
-
React Hooks: utilizado para otimizar a lógica dos componentes, permitindo gerenciar estados complexos de forma mais intuitiva e eficiente, melhorando significativamente a performance da aplicação.
-
Context API: utilizado para gerenciar o estado global da aplicação de forma eficaz. Isso não apenas simplifica a propagação de dados entre componentes, mas também reforça a segurança ao proteger páginas contra acesso não autorizado, facilitando a implementação de autenticação e controle de acesso.
-
Cloud Firestore: banco de dados NoSQL para armazenar e consultar dados de clientes em tempo real de maneira escalável e eficiente.
-
Firebase Authentication: oferece um processo seguro e simplificado de autenticação de usuários, garantindo controle de acesso rigoroso às funcionalidades da aplicação.
- Clone o repositório:
git clone https://github.com/joschonarth/crm-system.git- Instale as dependências do Node Modules:
npm install- Configure as credenciais do Firebase: 🔥
- Crie um projeto no Firebase Console.
- Copie as credenciais do seu projeto Firebase para o arquivo de configuração no React (
src/app/config/firebase.js). - Em Firestore Database crie uma Collection de nome
clientes.
- Inicie o servidor de desenvolvimento:
npm start- Acesse o aplicativo:
Abra http://localhost:3000 no seu navegador.
