Resenha 📖

Diário de avaliações com autenticação real e banco de dados, construído com Next.js, TypeScript e Supabase.

🔗 Ver deploy ao vivo · Reportar bug

---

Sobre o projeto

Resenha é um diário pessoal de avaliações de filmes, séries e livros, com um feed público mostrando as resenhas mais recentes de todos os usuários. É o projeto mais completo do meu portfólio em termos de arquitetura: diferente dos demais, que usam localStorage, este tem autenticação real e banco de dados Postgres na nuvem via Supabase — os dados persistem entre dispositivos e são compartilhados publicamente de forma segura.

O objetivo foi ir além do CRUD client-side e construir algo próximo de um produto real: contas de usuário, dados relacionados entre tabelas, permissões por linha (Row Level Security) e rotas protegidas no servidor.

Preview

Funcionalidades

• Autenticação real — cadastro, login, logout e sessão persistente via Supabase Auth
• Feed público — resenhas de todos os usuários, ordenadas por data
• CRUD completo de resenhas: criar, ler, editar (inline, direto no card) e excluir
• Row Level Security — cada usuário só pode editar/excluir as próprias resenhas, garantido no próprio banco de dados, não só na interface
• Rotas protegidas no servidor — a página /perfil redireciona para o login antes mesmo de renderizar, caso o usuário não esteja autenticado
• Avaliação por estrelas e categorização por tipo (filme, série, livro)
• Totalmente responsivo

Tecnologias

Tecnologia	Uso
Next.js	Framework React, App Router, Server Components
TypeScript	Tipagem estática dos dados e do usuário
Tailwind CSS	Estilização utilitária
Supabase	Autenticação, banco de dados Postgres, Row Level Security
@supabase/ssr	Sincronização de sessão entre cliente e servidor via middleware
Vercel	Deploy e hospedagem

Rodando localmente

# Clone o repositório
git clone https://github.com/TiagoAlmeida13/resenha.git

# Entre na pasta do projeto
cd resenha

# Instale as dependências
npm install

Crie um arquivo .env.local na raiz do projeto com suas próprias credenciais do Supabase:

NEXT_PUBLIC_SUPABASE_URL=sua_url_aqui
NEXT_PUBLIC_SUPABASE_ANON_KEY=sua_chave_aqui

# Rode o servidor de desenvolvimento
npm run dev

Abra http://localhost:3000 no navegador para ver o resultado.

Estrutura do projeto

resenha/
├── app/
│   ├── components/
│   │   ├── Navbar.tsx           # Menu com estado de autenticação (Server Component)
│   │   ├── LogoutButton.tsx
│   │   └── ReviewCard.tsx        # Card de resenha do feed público
│   ├── entrar/
│   │   └── page.tsx              # Login e cadastro
│   ├── novo/
│   │   └── page.tsx              # Criação de resenha
│   ├── perfil/
│   │   ├── page.tsx              # Rota protegida, busca resenhas do usuário
│   │   └── MyReviewsList.tsx    # Lista com edição inline e exclusão
│   ├── lib/
│   │   ├── types.ts
│   │   └── supabase/
│   │       ├── client.ts         # Cliente Supabase para o navegador
│   │       └── server.ts         # Cliente Supabase para Server Components
│   ├── layout.tsx
│   ├── page.tsx                    # Feed público
│   └── globals.css
├── middleware.ts                  # Sincroniza sessão em todas as rotas
└── package.json

Autor

Tiago Machado Desenvolvedor Front-end

Portfólio · GitHub · tyygo@live.com

---

_{Projeto desenvolvido para fins de portfólio.}