Building a Portfolio with TanStack Start

Why TanStack Start?

TanStack Start combines the best parts of modern React development: file-based routing, server-side rendering, and first-class TypeScript support. It felt like the right foundation for a portfolio that needs to be fast, SEO-friendly, and easy to maintain.

Project Structure

The content lives in markdown files managed by Content Collections, which gives type-safe access to frontmatter fields. Blog posts, jobs, education, and projects each have their own collection with a Zod schema.

Deployment

Deploying to Netlify was straightforward — the @netlify/vite-plugin-tanstack-start plugin handles the build output, and forms are processed automatically with the data-netlify attribute.

What I Learned

Setting up content collections with TanStack Start required a bit of configuration, but once the schemas were in place, adding new content was as simple as dropping a markdown file into the right folder.