https://github.com/devbrigante/webcarros
Plataforma web para cadastro e gestão de carros, com autenticação via Firebase, interface moderna em React + TypeScript e formulários inteligentes usando React Hook Form e Zod.
https://github.com/devbrigante/webcarros
hooks-api-react reponsive-web-design tailwindcss typescript
Last synced: 8 months ago
JSON representation
Plataforma web para cadastro e gestão de carros, com autenticação via Firebase, interface moderna em React + TypeScript e formulários inteligentes usando React Hook Form e Zod.
- Host: GitHub
- URL: https://github.com/devbrigante/webcarros
- Owner: DevBrigante
- License: mit
- Created: 2025-04-12T23:32:40.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-13T22:18:42.000Z (about 1 year ago)
- Last Synced: 2025-10-09T06:04:06.486Z (8 months ago)
- Topics: hooks-api-react, reponsive-web-design, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://web-carros-ten-khaki.vercel.app
- Size: 69.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚗 WebCarros
**WebCarros** é uma plataforma web moderna desenvolvida com **React + TypeScript**, que permite aos usuários cadastrar, visualizar e gerenciar carros de forma prática e intuitiva. O projeto foi estilizado com **TailwindCSS** e conta com autenticação e banco de dados usando **Firebase**.
## ✨ Funcionalidades
- Cadastro de usuários com **email e senha**
- Login com autenticação Firebase
- Dashboard com listagem de carros cadastrados
- Cadastro de novo carro com upload de imagens
- Detalhamento completo do carro
- Exclusão de carros
- Validações de formulário com **Zod + React Hook Form**
- Contexto global de autenticação com React Context API
- Feedbacks visuais com **toast notifications**
---
## 🚀 Tecnologias e Ferramentas
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [TailwindCSS](https://tailwindcss.com/)
- [Firebase Auth](https://firebase.google.com/products/auth)
- [Firebase Firestore](https://firebase.google.com/products/firestore)
- [React Hook Form](https://react-hook-form.com/)
- [Zod](https://github.com/colinhacks/zod)
- [Vite](https://vitejs.dev/)
- [React Router DOM](https://reactrouter.com/en/main)
---
## ⚙️ Como rodar o projeto
```bash
# Clone o repositório
git clone https://github.com/seu-usuario/webcarros.git
# Acesse a pasta
cd webcarros
# Instale as dependências
npm install
# Inicie o servidor de desenvolvimento
npm run dev
```
---
## 🔐 Configuração do Firebase
1. Crie um projeto no Firebase.
2. Habilite **Authentication** com método Email/Senha.
3. Crie um banco de dados **Firestore** com coleção chamada `cars`.
4. Adicione um arquivo `.env` com as chaves do seu Firebase:
```env
VITE_API_KEY=SUACHAVE
VITE_AUTH_DOMAIN=SEUDOMINIO
VITE_PROJECT_ID=SEUID
VITE_STORAGE_BUCKET=SEUBUCKET
VITE_MESSAGING_SENDER_ID=SEUID
VITE_APP_ID=SEUAPPID
```
---
## 🧪 Exemplos de Código
**Input com validação e integração com React Hook Form:**
```tsx
{error &&
{error}
}
```
**Login com Firebase:**
```tsx
const userCredential = await signInWithEmailAndPassword(auth, data.email, data.password);
```
**Cadastro com Firebase + updateProfile:**
```tsx
const userCredential = await createUserWithEmailAndPassword(auth, data.email, data.password);
await updateProfile(userCredential.user, { displayName: data.name });
```
---
## 💡 Aprendizados e Destaques
- Implementação de autenticação segura com **Firebase**
- Criação de formulário robusto com **validações em tempo real**
- Manipulação de **contexto global** com React para estado do usuário
- Upload e listagem dinâmica de imagens
- Separação limpa de responsabilidades entre **componentes**, **páginas** e **serviços**
---
## 📝 Licença
Este projeto está sob a licença MIT.