My Trips Desenvolvimento Web

O projeto foi desenvolvido como uma aplicação para registrar e explorar lugares especiais visitados ao longo do tempo. A proposta era criar uma experiência visual simples, combinando um mapa interativo com páginas detalhadas sobre cada local.

A aplicação também serviu como oportunidade para aplicar conhecimentos de desenvolvimento frontend moderno, integração com CMS, renderização de conteúdo dinâmico, otimização de imagens e testes automatizados.

A ideia inicial foi baseada no curso “Aprenda NextJS, GraphQL e Leaflet na prática!”, de Willian Justen. Durante o desenvolvimento, a arquitetura foi adaptada para utilizar ferramentas e práticas mais atuais, como o Next.js App Router, Sanity com GROQ e geração de tipos.

O objetivo principal do projeto foi criar uma aplicação para registrar lugares visitados e exibi-los em um mapa interativo. Cada local possui uma página individual com informações, descrição e galeria de imagens.

Também foi objetivo do projeto utilizar um Headless CMS para gerenciar os conteúdos, criar uma estrutura preparada para novas páginas e funcionalidades e aplicar boas práticas de tipagem, organização de código, SEO, testes e otimização de imagens.

O desenvolvimento começou com a definição da estrutura geral da aplicação, das principais rotas e dos componentes necessários para a experiência. Em seguida, o projeto foi configurado com Next.js e TypeScript, estabelecendo uma organização separada entre componentes, templates, queries, tipos, estilos e funções utilitárias.

O Sanity CMS foi integrado para permitir o gerenciamento dos lugares e das páginas institucionais. A comunicação entre o frontend e o CMS foi realizada por meio do next-sanity e de consultas GROQ, com o uso do Sanity TypeGen para gerar tipos a partir dos schemas e das queries.

Depois, foi implementado o mapa interativo utilizando Leaflet e React Leaflet. Os markers foram personalizados para seguir a identidade visual da aplicação e passaram a direcionar os usuários para as páginas individuais dos lugares. Também foram criadas as rotas dinâmicas baseadas em slug, a galeria de imagens em formato de carrossel e a renderização de conteúdo rico com Portable Text.

Na etapa final, foram configuradas a metadata dinâmica para SEO, a otimização de imagens com next/image, os testes automatizados com Jest e Testing Library e as ferramentas de qualidade de código, como ESLint, Prettier, Husky e lint-staged. O projeto também foi preparado para deploy na Vercel.

A utilização do Next.js App Router foi escolhida para aproveitar uma estrutura moderna de rotas, layouts e renderização. O Sanity CMS foi adotado como fonte de conteúdo para os lugares e páginas dinâmicas, enquanto o GROQ foi utilizado para realizar consultas específicas aos dados.

O Sanity TypeGen foi configurado para gerar tipos automaticamente a partir dos schemas e das queries, aumentando a segurança durante o desenvolvimento. A aplicação também foi organizada com uma separação clara entre componentes, templates, queries, tipos, estilos e funções utilitárias.

Para a implementação do mapa, foram utilizados Leaflet e React Leaflet. Como essas bibliotecas dependem de recursos disponíveis no navegador, determinados componentes foram configurados como client-side para evitar conflitos com a renderização no servidor do Next.js.

Os markers foram criados de forma personalizada utilizando divIcon, animações e cores alinhadas à identidade visual do projeto. Para as imagens, foi utilizado o next/image, permitindo otimização automática e carregamento mais eficiente. A estilização foi centralizada com styled-components, e a metadata dinâmica foi implementada para melhorar o SEO e o compartilhamento das páginas.

Também foram utilizados Jest e Testing Library para a criação de testes orientados ao comportamento. Husky e lint-staged foram configurados para executar validações automaticamente antes dos commits, garantindo maior consistência no código.

Um dos principais desafios foi integrar o Leaflet ao ambiente de renderização do Next.js. Como a biblioteca depende do navegador, foi necessário separar corretamente os componentes client-side dos componentes renderizados no servidor e evitar problemas relacionados ao SSR.

Outro desafio foi organizar os conteúdos vindos do Sanity de forma tipada e reutilizável. Foi necessário estruturar as queries, os schemas e os tipos para que os dados pudessem ser utilizados com segurança nas diferentes páginas da aplicação.

Além disso, foi necessário manter uma boa separação entre as responsabilidades dos componentes, garantir o carregamento otimizado das imagens e configurar testes, linting, formatação e verificação de tipos de forma integrada ao fluxo de desenvolvimento.

O projeto resultou em uma aplicação funcional para visualização e gerenciamento de lugares, com mapa interativo, páginas dinâmicas, galeria de imagens e conteúdo administrado por meio de um CMS.

Durante o desenvolvimento, foram consolidados conhecimentos em Next.js com App Router, React, TypeScript, geração automática de tipos, integração com Headless CMS, consultas GROQ, mapas interativos com Leaflet, renderização client-side em aplicações com SSR, SEO, metadata dinâmica, otimização de imagens e testes automatizados.

O projeto também proporcionou aprendizados relacionados à organização e escalabilidade de aplicações frontend, à automatização de validações no fluxo de commits e à preparação de aplicações para deploy na Vercel.

Como possíveis evoluções, o projeto pode receber filtros por categorias, uma página 404 personalizada, testes end-to-end, melhorias de acessibilidade no carrossel, compartilhamento social e suporte ao preview mode do Sanity.