Aplicação web para envio de vídeos de skate e recebimento de narrações profissionais.
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
- Shadcn/ui
- Google Sheets API
- Sonner (Toast notifications)
```bash npm install ```
- Acesse o Google Cloud Console
- Crie um novo projeto
- Ative a Google Sheets API
- Crie uma Service Account:
- Vá em "IAM & Admin" > "Service Accounts"
- Clique em "Create Service Account"
- Dê um nome e clique em "Create"
- Não precisa adicionar roles, clique em "Continue" e depois "Done"
- Crie uma chave JSON:
- Clique na service account criada
- Vá na aba "Keys"
- Clique em "Add Key" > "Create new key"
- Escolha JSON e clique em "Create"
- O arquivo será baixado automaticamente
- Crie uma nova planilha no Google Sheets
- Renomeie a primeira aba para "Sheet1" (ou ajuste no código)
- Adicione os cabeçalhos na primeira linha:
- A1: timestamp
- B1: name
- C1: address
- D1: instagram
- E1: link
- Compartilhe a planilha com o email da service account (encontrado no arquivo JSON baixado)
- Clique em "Compartilhar"
- Cole o email da service account (ex: nome@projeto.iam.gserviceaccount.com)
- Dê permissão de "Editor"
- Copie o ID da planilha da URL:
- URL: https://docs.google.com/spreadsheets/d/SPREADSHEET_ID/edit
- Copie apenas o SPREADSHEET_ID
Crie um arquivo `.env.local` na raiz do projeto:
```env SPREADSHEET_ID=seu_spreadsheet_id_aqui GOOGLE_SERVICE_ACCOUNT_EMAIL=seu-email@projeto.iam.gserviceaccount.com GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nSua chave privada aqui\n-----END PRIVATE KEY-----\n" ```
Importante: A chave privada deve estar entre aspas duplas e manter os \n para quebras de linha.
```bash npm run dev ```
Acesse http://localhost:3000
- `/app` - Páginas e rotas da aplicação
- `/page.tsx` - Landing page
- `/send-video/page.tsx` - Página de envio de vídeo
- `/terms/page.tsx` - Página de termos de uso
- `/api/submit/route.ts` - API para envio ao Google Sheets
- `/components` - Componentes React
- `/video-submission-form.tsx` - Formulário de envio
- `/ui` - Componentes UI do Shadcn
- Landing page com informações do projeto
- Formulário de envio com validação
- Integração com API do IBGE para estados e cidades brasileiras
- Opção de localização internacional
- Envio de dados para Google Sheets
- Notificações toast para feedback do usuário
- Design responsivo e moderno
Para fazer deploy na Vercel:
- Faça push do código para o GitHub
- Importe o projeto na Vercel
- Adicione as variáveis de ambiente no painel da Vercel
- Deploy! ```