My Portfolio

Problema que o projeto resolve

Instituições com comunicação frequente precisam atualizar horários, notícias, páginas, histórias, banners e conteúdos da Home com agilidade. Em um site tradicional, cada mudança tende a depender de um desenvolvedor, o que torna a rotina mais lenta e dificulta manter a comunicação atualizada.

Este projeto resolve esse problema criando um ambiente em que conteúdo institucional e pastoral pode ser administrado por um painel próprio, com persistência em banco de dados, validação, autenticação e publicação no site público.

Para que serve

O sistema serve para centralizar a presença digital da Catedral:

Apresenta a identidade institucional para visitantes;
Organiza informações públicas como agenda, notícias, histórias e páginas;
Permite publicar conteúdo editorial sem mexer no código;
Oferece um painel administrativo para gestão do site;
Protege operações sensíveis com autenticação e controle de usuários.

Site público

O site público foi construído como uma experiência visual completa, com foco em acolhimento, conteúdo institucional e acesso rápido a informações importantes.

Ele inclui:

Home dinâmica conectada ao banco de dados;
Hero institucional configurável;
Banners e destaques;
Programação e agenda pública;
Notícias e histórias com páginas de listagem e detalhe;
Posts publicados por slug;
Páginas públicas criadas no painel;
Navegação integrada ao conteúdo publicado;
Rodapé institucional alimentado por conteúdo gerenciável.

A Home usa uma composição server-first no Next.js, buscando os dados no servidor e renderizando seções públicas a partir das informações cadastradas no painel.

Painel administrativo

O painel administrativo é uma área autenticada para gerenciar o conteúdo do site. Ele valida a sessão e o usuário ativo no servidor antes de liberar o dashboard.

Principais módulos implementados:

Gestão da Home por seções e itens;
Edição do Hero e do vídeo principal;
CRUD de banners, destaques, agenda, notícias e histórias;
Gestão de páginas públicas com status, visibilidade, SEO e preview;
Gestão de posts com editor rico, categorias, tags, imagem destacada e publicação;
CRUD de usuários administrativos com papéis, status, foto e paginação;
Uploads de imagens e vídeos nos fluxos que exigem mídia;
Feedbacks de sucesso, erro e carregamento com toasts.

Principais funcionalidades

Site público dinâmico com conteúdo persistido.
Dashboard protegido por login.
Editor rico com TipTap para páginas e posts.
Server Actions para operações de criação, edição, publicação e exclusão.
Data access separado da interface.
Validação com Zod e React Hook Form.
Upload de imagens para conteúdos da Home e usuários via Cloudinary.
Upload local para imagem destacada de posts.
Upload assinado de vídeo para o Hero via Cloudinary.
Suporte a vídeo do YouTube no card de mensagem mais recente.
Controle de papéis de usuário (ADMIN, LEADERSHIP, STAFF e MEMBER).
Registro de eventos de autenticação e bloqueio temporário após falhas de login.
Rotas públicas dinâmicas para páginas, posts, notícias e histórias.

Tecnologias utilizadas

Área	Tecnologias
Front-end e full-stack	Next.js 16, React 19, TypeScript
Interface	Tailwind CSS 4, componentes locais no padrão shadcn/ui, Radix UI, Vaul Drawer
Formulários	React Hook Form, Zod, @hookform/resolvers
Editor de conteúdo	TipTap
Animações	Framer Motion
Autenticação	Auth.js / NextAuth v5, bcrypt
Banco de dados	PostgreSQL, Prisma 7, @prisma/adapter-pg
Uploads e mídia	Cloudinary, upload local para posts
Feedback de UI	Sonner
Sanitização	sanitize-html
Qualidade	ESLint, TypeScript, Prisma CLI

Decisões técnicas

Uma das principais decisões foi manter o projeto com arquitetura server-first. As páginas carregam dados no servidor sempre que possível, enquanto componentes cliente ficam restritos a interações, formulários, estados locais, drawer, motion e editores.

O fluxo de dados segue uma divisão clara:

UI → Server Action → Data Access → Prisma → PostgreSQL

Essa separação ajuda a manter o código mais previsível: a interface não acessa o banco diretamente, as Server Actions concentram validação e autorização, e as consultas ficam isoladas em arquivos de data access.

Outras decisões importantes:

Co-localizar componentes, actions, schemas e data access por módulo do dashboard;
Usar Zod tanto para validar formulários quanto para proteger entradas no servidor;
Proteger o dashboard no layout administrativo, validando sessão e usuário ativo antes da renderização;
Registrar eventos de autenticação para dar rastreabilidade ao login;
Usar modelos flexíveis (HomeSection e HomeContentItem) para permitir evolução da Home sem criar uma tabela nova para cada bloco visual;
Preservar uma experiência pública visualmente rica sem sacrificar a manutenção do conteúdo;
Manter componentes reutilizáveis de UI em src/components/ui, seguindo o estilo shadcn/ui adotado no projeto.

Meu papel no desenvolvimento

Atuei na construção full-stack do projeto, cobrindo desde a arquitetura da aplicação até a implementação das telas públicas e administrativas.

Meu trabalho envolveu:

Estruturar o projeto com Next.js App Router e TypeScript;
Modelar o banco de dados com Prisma e PostgreSQL;
Implementar autenticação administrativa com Auth.js;
Criar o painel protegido e seus módulos de conteúdo;
Desenvolver os fluxos de criação, edição, publicação, preview, exclusão e upload;
Integrar o conteúdo administrado ao site público;
Organizar a arquitetura em camadas para manter o código sustentável;
Cuidar da experiência de uso com feedbacks, loading states, responsividade e componentes reutilizáveis;
Documentar o estado real do projeto sem expor credenciais ou detalhes sensíveis.

Resultado

O resultado é uma plataforma institucional completa, com um site público visualmente trabalhado e um painel administrativo funcional para manutenção de conteúdo. O projeto demonstra domínio de desenvolvimento full-stack moderno com Next.js, integração com banco de dados, autenticação, upload de mídia, editor de conteúdo e organização de código orientada à manutenção.

Catedral - Uma comunidade viva e presente