Field note

What it does

Building a Full Stack DevJokes App with TanStack Start This tutorial will guide you through building a complete full-stack application using TanStack Start. You'll create a DevJokes app where users can view and add developer-themed jokes, demonstrating key concepts of TanStack Start including server functions, file-based data storage, and React components. Here's a demo of the app in action: <iframe width="560" height="315" src="https://www.youtube.com/embed/zd0rtKbtlgU?si=7W1Peoo0W0WvZmAd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen </iframe The complete code for this tutorial is available on GitHub. What You'll Learn 1. Setting up a TanStack Start project 2. Implementing server functions 3. Reading and writing data to files 4. Building a complete UI with React components 5.

TanStack Table

What it does

Available capabilities

Tags

Ways to use it

Product features

Building a Full Stack DevJokes App with TanStack Start

Install uuid for generating unique IDs

Nice to know

Prerequisites

Setting up a TanStack Start Project

Step 1.1: Create a JSON File with Jokes

Step 1.2: Create Types for Our Data

Step 1.3: Create Server Functions to Read the File

Step 1.4: Consume Server Function on the Client Side

Step 1: Reading Data From a File

Understanding the project structure

What You'll Learn