https://github.com/pitercoding/next-crud
[PT-BR] CRUD de clientes com Next.js, Tailwind CSS e Firebase Firestore. [EN] Customer CRUD with Next.js, Tailwind CSS, and Firebase Firestore.
https://github.com/pitercoding/next-crud
aplicacao-web cadastro-clientes clientes crud firebase firestore formulario frontend hooks nextjs react tabela tailwind-css typescript
Last synced: 10 days ago
JSON representation
[PT-BR] CRUD de clientes com Next.js, Tailwind CSS e Firebase Firestore. [EN] Customer CRUD with Next.js, Tailwind CSS, and Firebase Firestore.
- Host: GitHub
- URL: https://github.com/pitercoding/next-crud
- Owner: pitercoding
- Created: 2025-11-22T19:39:20.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-01-07T19:31:04.000Z (4 months ago)
- Last Synced: 2026-05-03T15:39:11.653Z (10 days ago)
- Topics: aplicacao-web, cadastro-clientes, clientes, crud, firebase, firestore, formulario, frontend, hooks, nextjs, react, tabela, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://next-crud-firebasedb.vercel.app/
- Size: 376 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
⚛️🔥 Next.js CRUD com Firebase (PT-BR)
🌎 Languages:
🇧🇷 Português |
🇺🇸 English
Este é um projeto de **Cadastro de Clientes** desenvolvido com **Next.js**, **Tailwind CSS** e **Firebase Firestore**.
O sistema permite **cadastrar, editar, excluir e listar clientes**, com persistência dos dados no **Firestore**.
Foi totalmente modernizado, utilizando **hooks personalizados**, **componentes reutilizáveis** e **layout responsivo**, garantindo boa experiência em desktop e mobile.
[Acesse Aqui](next-crud-firebasedb.vercel.app)
---
## 🎯 Motivação do Projeto
O projeto foi criado como estudo prático para:
- Aprender integração do **Next.js** com **Firebase v9**.
- Implementar **CRUD completo** (Create, Read, Update, Delete) com Firestore.
- Utilizar **React Hooks** personalizados para lógica de estado e visibilidade.
- Criar uma interface **responsiva** e limpa com **Tailwind CSS**.
- Organizar um projeto Next.js com boa arquitetura de pastas.
## 🖥️ Funcionalidades Implementadas
- **Cadastro de Clientes**
- Adicionar clientes com nome e idade.
- Editar clientes existentes.
- Excluir clientes.
- **Lista de Clientes**
- Exibição de clientes em tabela.
- Barra de rolagem automática quando há muitos dados ou telas pequenas.
- **Layout Responsivo**
- Layout adaptado para diferentes tamanhos de tela.
- Botões, formulários e tabelas estilizados com Tailwind CSS.
- **Persistência com Firebase**
- Armazena todos os dados no **Firestore**.
- Configuração segura de variáveis de ambiente (não versionadas) em `.env.local`.
- **Componentes Reutilizáveis**
- `Botao.tsx`, `Entrada.tsx`, `Formulario.tsx`, `Tabela.tsx`, `Layout.tsx`, `Titulo.tsx`, `Icones.tsx`.
- **Hooks Personalizados**
- `useClientes.ts` → lógica de CRUD e estado de clientes.
- `useTabelaOuForm.ts` → controle de visibilidade entre tabela e formulário.
```ts
export default function useClientes() {
const repo = new ColecaoCliente();
const { tabelaVisivel, exibirTabela, exibirFormulario } = useTabelaOuForm();
const [cliente, setCliente] = useState(Cliente.vazio());
const [clientes, setClientes] = useState([]);
useEffect(obterTodos, []);
function obterTodos() {
repo.obterTodos().then(clientes => {
setClientes(clientes);
exibirTabela();
});
}
function salvarCliente(cliente: Cliente) {
repo.salvar(cliente).then(obterTodos);
}
function excluirCliente(cliente: Cliente) {
repo.excluir(cliente).then(obterTodos);
}
function selecionarCliente(cliente: Cliente) {
setCliente(cliente);
exibirFormulario();
}
return {
cliente,
clientes,
tabelaVisivel,
novoCliente: () => { setCliente(Cliente.vazio()); exibirFormulario(); },
salvarCliente,
excluirCliente,
selecionarCliente,
exibirTabela,
};
}
```
## 📦 Estrutura do Projeto
```bash
next-crud/
├── public/
│ └── (favicon)
│
├── src/
│ ├── app/
│ │ ├── globals.css # Estilos globais e Tailwind
│ │ ├── layout.tsx # Layout global
│ │ └── page.tsx # Página principal
│ │
│ ├── backend-firebase/
│ │ ├── config.ts # Configuração do Firebase
│ │ └── db/
│ │ └── ColecaoCliente.ts
│ │
│ ├── components/
│ │ ├── Botao.tsx
│ │ ├── Entrada.tsx
│ │ ├── Formulario.tsx
│ │ ├── Icones.tsx
│ │ ├── Layout.tsx
│ │ ├── Tabela.tsx
│ │ └── Titulo.tsx
│ │
│ ├── core/
│ │ ├── Cliente.ts
│ │ └── ClienteRepositorio.ts
│ │
│ └── hooks/
│ ├── useClientes.ts
│ └── useTabelaOuForm.ts
│
├── .env.local # Variáveis de ambiente (API Key, Auth Domain, Project ID)
├── package.json
├── tailwind.config.js
├── postcss.config.mjs
├── tsconfig.json
└── README.md
```
## ⚡ Tecnologias Utilizadas
- **Next.js 16** – Framework React moderno.
- **React 19** – Biblioteca de componentes.
- **Firebase v12** – Firestore para persistência de dados.
- **Tailwind CSS 4** – Estilização responsiva e moderna.
- **TypeScript 5** – Tipagem estática.
- **PostCSS** – Pré-processamento de CSS.
## 🔧 Como Rodar o Projeto
```bash
# Clone o repositório
git clone https://github.com/pitercoding/next-crud.git
# Entre na pasta do projeto
cd next-crud
# Instale as dependências
npm install
# Crie o arquivo .env.local com suas credenciais do Firebase
# Exemplo:
# NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
# NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
# NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
# Inicie o servidor de desenvolvimento
npm run dev
# Abra no navegador
http://localhost:3000
```
## 💡 Melhorias Futuras
- Implementar **autenticação de usuários** com Firebase Auth.
- Adicionar **busca e filtros** avançados na tabela de clientes.
- Criar **dashboard com estatísticas** de clientes.
- Implementar **testes unitários e de integração**.
- Melhorar **acessibilidade** e **performance** em mobile.
## 🤝 Contribuições
Contribuições são bem-vindas!
- Faça um fork do projeto.
- Crie uma branch para sua feature (`git checkout -b minha-feature`).
- Commit suas alterações (`git commit -am 'Adicionando nova feature'`).
- Envie para a branch principal (`git push origin minha-feature`).
- Abra um Pull Request.
## 📜 Licença
Este projeto está licenciado sob a **licença MIT**.
## 🧑💻 Autor
**Piter Gomes** — Aluno de Ciências da Computação (5º Semestre) & Desenvolvedor Full-Stack
📧 [Email](mailto:piterg.bio@gmail.com) | 💼 [LinkedIn](https://www.linkedin.com/in/piter-gomes-4a39281a1/) | 💻 [GitHub](https://github.com/pitercoding) | 🌐 [Portfolio](https://portfolio-pitergomes.vercel.app/)