Criando um projeto e entendendo a estrutura do TankStack Start (Vem conferir o resultado!)

Explore o melhor da programação e aproveite:

Aproveite TODOS os guias gratuitos disponíveis da Rocketseat e turbine suas habilidades: https://rseat.in/conteudos-gratuitos-....
Faça teste gratuito para saber como estão seus conhecimentos em programação: https://rseat.in/teste-para-devs
👉 Conheça a Formação Full-Stack da Rocketseat: https://rseat.in/full-stack-formacao


Devs que estão avaliando o TanStack Start como base para aplicações full stack frequentemente esbarram em uma dúvida prática: como essa stack organiza rotas, dados, server functions e integração com banco de forma concreta na rotina. O vídeo responde a essa pergunta construindo um projeto do zero e explorando, a estrutura gerada automaticamente pelo TanStack Start.

A partir da criação inicial do projeto, o conteúdo percorre decisões importantes de setup, como escolha de adapter de deployment, uso de Tailwind, integração com TanStack Query e configuração de persistência com Postgres e Drizzle.

Cada escolha é contextualizada para mostrar como o TanStack Start se posiciona como uma alternativa full stack moderna, com responsabilidades bem distribuídas entre front-end e back-end.

Durante a parte prática, Diego Fernandes, CTO da Rocketseat constrói rotas reais, aplica estilização básica com Tailwind e mostra como consumir dados vindos do banco usando server functions, evitando chamadas HTTP manuais e mantendo a lógica alinhada ao modelo full stack proposto pela stack.

Durante o vídeo, são explorados temas como:
Criação de projetos com TanStack Start e entendimento do setup inicial.
Organização de rotas e layouts com TanStack Router.
Diferença entre rotas de API e server functions.
Uso de SSR para carregamento de dados sem dependência de JavaScript no client.
Integração com Postgres usando Drizzle ORM.
Geração de migrations, uso do Drizzle Studio e leitura tipada de dados.
Consumo de dados no front sem chamadas HTTP explícitas.

Ao final, fica claro como o TanStack Start organiza fluxo de dados, renderização e acesso ao banco em um único projeto, oferecendo uma experiência coesa para quem busca produtividade sem abrir mão de controle técnico.

Momentos importantes do vídeo que você não pode perder:
00:00 - 03:20 - Criação do projeto e escolhas iniciais de stack
03:20 - 07:10 - Configuração de ambiente, banco e migrations com Drizzle
07:10 - 10:17 - Primeira execução do projeto e visão geral da estrutura
10:17 - 13:31 - Análise detalhada da estrutura de pastas e arquivos
13:31 - 18:00 - Rotas, API, server functions e fluxo de dados
18:00 - 22:00 - SSR, loaders e consumo de dados no front-end
22:00 - 26:16 - Integração real com banco e leitura de dados persistidos

-----

Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: https://rseat.in/rocketseat_

Cadastre-se na nossa plataforma: https://rseat.in/rocketseat_

Junte-se a mais de 392mil devs em nossa comunidade no Discord:   / discord  

Acompanhe a Rocketseat nas redes sociais:
TikTok: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat