{"id":49573685,"url":"https://github.com/pitercoding/next-crud","last_synced_at":"2026-05-03T15:39:32.891Z","repository":{"id":325712805,"uuid":"1102084085","full_name":"pitercoding/next-crud","owner":"pitercoding","description":"[PT-BR] CRUD de clientes com Next.js, Tailwind CSS e Firebase Firestore. [EN] Customer CRUD with Next.js, Tailwind CSS, and Firebase Firestore.","archived":false,"fork":false,"pushed_at":"2026-01-07T19:31:04.000Z","size":385,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-03T15:39:11.653Z","etag":null,"topics":["aplicacao-web","cadastro-clientes","clientes","crud","firebase","firestore","formulario","frontend","hooks","nextjs","react","tabela","tailwind-css","typescript"],"latest_commit_sha":null,"homepage":"https://next-crud-firebasedb.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/pitercoding.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-22T19:39:20.000Z","updated_at":"2026-01-07T19:30:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/pitercoding/next-crud","commit_stats":null,"previous_names":["pitercoding/next-crud"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pitercoding/next-crud","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pitercoding%2Fnext-crud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pitercoding%2Fnext-crud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pitercoding%2Fnext-crud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pitercoding%2Fnext-crud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pitercoding","download_url":"https://codeload.github.com/pitercoding/next-crud/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pitercoding%2Fnext-crud/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32575114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: 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":["aplicacao-web","cadastro-clientes","clientes","crud","firebase","firestore","formulario","frontend","hooks","nextjs","react","tabela","tailwind-css","typescript"],"created_at":"2026-05-03T15:39:32.164Z","updated_at":"2026-05-03T15:39:32.878Z","avatar_url":"https://github.com/pitercoding.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e⚛️🔥 Next.js CRUD com Firebase (PT-BR)\u003c/h1\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  🌎 \u003cstrong\u003eLanguages:\u003c/strong\u003e\u003cbr\u003e\r\n  \u003ca href=\"README.md\"\u003e🇧🇷 Português\u003c/a\u003e |\r\n  \u003ca href=\"README.en.md\"\u003e🇺🇸 English\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\nEste é um projeto de **Cadastro de Clientes** desenvolvido com **Next.js**, **Tailwind CSS** e **Firebase Firestore**.  \r\n\r\nO sistema permite **cadastrar, editar, excluir e listar clientes**, com persistência dos dados no **Firestore**.\r\n\r\nFoi totalmente modernizado, utilizando **hooks personalizados**, **componentes reutilizáveis** e **layout responsivo**, garantindo boa experiência em desktop e mobile.\r\n\r\n[Acesse Aqui](next-crud-firebasedb.vercel.app)\r\n\r\n---\r\n\r\n## 🎯 Motivação do Projeto\r\n\r\nO projeto foi criado como estudo prático para:\r\n\r\n- Aprender integração do **Next.js** com **Firebase v9**.\r\n- Implementar **CRUD completo** (Create, Read, Update, Delete) com Firestore.\r\n- Utilizar **React Hooks** personalizados para lógica de estado e visibilidade.\r\n- Criar uma interface **responsiva** e limpa com **Tailwind CSS**.\r\n- Organizar um projeto Next.js com boa arquitetura de pastas.\r\n\r\n## 🖥️ Funcionalidades Implementadas\r\n\r\n- **Cadastro de Clientes**\r\n  - Adicionar clientes com nome e idade.\r\n  - Editar clientes existentes.\r\n  - Excluir clientes.\r\n  \u003cbr\u003e\r\n  \u003cimg src=\"https://github.com/user-attachments/assets/6d38ce8d-6992-417a-8c73-961f363ef4f1\" width=\"600\" /\u003e\r\n  \u003cimg src=\"https://github.com/user-attachments/assets/83e227d3-4f1d-47f7-b515-aa7aa06936a2\" width=\"600\" /\u003e\r\n  \u003cimg src=\"https://github.com/user-attachments/assets/e75edaf6-fe2d-495f-a5bc-109c69e3bbbe\" width=\"600\" /\u003e\r\n\r\n- **Lista de Clientes**\r\n  - Exibição de clientes em tabela.\r\n  - Barra de rolagem automática quando há muitos dados ou telas pequenas.\r\n  \u003cbr\u003e  \r\n  \u003cimg src=\"https://github.com/user-attachments/assets/a280f87c-484e-4d41-8edc-78d38197e7e4\" width=\"400\" /\u003e\r\n\r\n- **Layout Responsivo**\r\n  - Layout adaptado para diferentes tamanhos de tela.\r\n  - Botões, formulários e tabelas estilizados com Tailwind CSS.\r\n- **Persistência com Firebase**\r\n  - Armazena todos os dados no **Firestore**.\r\n  - Configuração segura de variáveis de ambiente (não versionadas) em `.env.local`.\r\n  \u003cbr\u003e\r\n  \u003cimg src=\"https://github.com/user-attachments/assets/4bb27109-c9d3-458f-b41c-81bcff870e9a\" width=\"600\" /\u003e\r\n\r\n- **Componentes Reutilizáveis**\r\n  - `Botao.tsx`, `Entrada.tsx`, `Formulario.tsx`, `Tabela.tsx`, `Layout.tsx`, `Titulo.tsx`, `Icones.tsx`.\r\n  \u003cbr\u003e\r\n  \u003cimg src=\"https://github.com/user-attachments/assets/fcf7099a-fa99-4e3d-87b5-846e44875f4e\" width=\"300\" /\u003e\r\n\r\n- **Hooks Personalizados**\r\n  - `useClientes.ts` → lógica de CRUD e estado de clientes.\r\n  - `useTabelaOuForm.ts` → controle de visibilidade entre tabela e formulário.\r\n  \u003cbr\u003e\r\n```ts\r\n export default function useClientes() {\r\n   const repo = new ColecaoCliente();\r\n   const { tabelaVisivel, exibirTabela, exibirFormulario } = useTabelaOuForm();\r\n\r\n   const [cliente, setCliente] = useState\u003cCliente\u003e(Cliente.vazio());\r\n   const [clientes, setClientes] = useState\u003cCliente[]\u003e([]);\r\n\r\n   useEffect(obterTodos, []);\r\n\r\n   function obterTodos() {\r\n     repo.obterTodos().then(clientes =\u003e {\r\n       setClientes(clientes);\r\n       exibirTabela();\r\n     });\r\n   }\r\n\r\n   function salvarCliente(cliente: Cliente) {\r\n     repo.salvar(cliente).then(obterTodos);\r\n   }\r\n\r\n   function excluirCliente(cliente: Cliente) {\r\n     repo.excluir(cliente).then(obterTodos);\r\n   }\r\n\r\n   function selecionarCliente(cliente: Cliente) {\r\n     setCliente(cliente);\r\n     exibirFormulario();\r\n   }\r\n\r\n   return {\r\n     cliente,\r\n     clientes,\r\n     tabelaVisivel,\r\n     novoCliente: () =\u003e { setCliente(Cliente.vazio()); exibirFormulario(); },\r\n     salvarCliente,\r\n     excluirCliente,\r\n     selecionarCliente,\r\n     exibirTabela,\r\n   };\r\n }\r\n ```\r\n\r\n## 📦 Estrutura do Projeto\r\n\r\n```bash\r\nnext-crud/\r\n├── public/\r\n│   └── (favicon)\r\n│\r\n├── src/\r\n│   ├── app/\r\n│   │   ├── globals.css          # Estilos globais e Tailwind\r\n│   │   ├── layout.tsx           # Layout global\r\n│   │   └── page.tsx             # Página principal\r\n│   │\r\n│   ├── backend-firebase/\r\n│   │   ├── config.ts            # Configuração do Firebase\r\n│   │   └── db/\r\n│   │       └── ColecaoCliente.ts\r\n│   │\r\n│   ├── components/\r\n│   │   ├── Botao.tsx\r\n│   │   ├── Entrada.tsx\r\n│   │   ├── Formulario.tsx\r\n│   │   ├── Icones.tsx\r\n│   │   ├── Layout.tsx\r\n│   │   ├── Tabela.tsx\r\n│   │   └── Titulo.tsx\r\n│   │\r\n│   ├── core/\r\n│   │   ├── Cliente.ts\r\n│   │   └── ClienteRepositorio.ts\r\n│   │\r\n│   └── hooks/\r\n│       ├── useClientes.ts\r\n│       └── useTabelaOuForm.ts\r\n│\r\n├── .env.local                   # Variáveis de ambiente (API Key, Auth Domain, Project ID)\r\n├── package.json\r\n├── tailwind.config.js\r\n├── postcss.config.mjs\r\n├── tsconfig.json\r\n└── README.md\r\n```\r\n\r\n## ⚡ Tecnologias Utilizadas\r\n\r\n- **Next.js 16** – Framework React moderno.\r\n- **React 19** – Biblioteca de componentes.\r\n- **Firebase v12** – Firestore para persistência de dados.\r\n- **Tailwind CSS 4** – Estilização responsiva e moderna.\r\n- **TypeScript 5** – Tipagem estática.\r\n- **PostCSS** – Pré-processamento de CSS.\r\n\r\n## 🔧 Como Rodar o Projeto\r\n```bash\r\n# Clone o repositório\r\ngit clone https://github.com/pitercoding/next-crud.git\r\n\r\n# Entre na pasta do projeto\r\ncd next-crud\r\n\r\n# Instale as dependências\r\nnpm install\r\n\r\n# Crie o arquivo .env.local com suas credenciais do Firebase\r\n# Exemplo:\r\n# NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key\r\n# NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain\r\n# NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id\r\n\r\n# Inicie o servidor de desenvolvimento\r\nnpm run dev\r\n\r\n# Abra no navegador\r\nhttp://localhost:3000\r\n\r\n```\r\n## 💡 Melhorias Futuras\r\n\r\n- Implementar **autenticação de usuários** com Firebase Auth.\r\n- Adicionar **busca e filtros** avançados na tabela de clientes.\r\n- Criar **dashboard com estatísticas** de clientes.\r\n- Implementar **testes unitários e de integração**.\r\n- Melhorar **acessibilidade** e **performance** em mobile.\r\n\r\n## 🤝 Contribuições\r\n\r\nContribuições são bem-vindas!\r\n- Faça um fork do projeto.\r\n- Crie uma branch para sua feature (`git checkout -b minha-feature`).\r\n- Commit suas alterações (`git commit -am 'Adicionando nova feature'`).\r\n- Envie para a branch principal (`git push origin minha-feature`).\r\n- Abra um Pull Request.\r\n\r\n## 📜 Licença\r\nEste projeto está licenciado sob a **licença MIT**.\r\n\r\n## 🧑‍💻 Autor\r\n\r\n**Piter Gomes** — Aluno de Ciências da Computação (5º Semestre) \u0026 Desenvolvedor Full-Stack\r\n\r\n📧 [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/)\r\n\r\n\r\n\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpitercoding%2Fnext-crud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpitercoding%2Fnext-crud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpitercoding%2Fnext-crud/lists"}