All 17 TanStack Projects In ONE App!

TanStack is celebrating the release of its 17th project. That's how big the TanStack ecosystem has gotten. So what I'm gonna do as a celebration is TanMaxx with TanStack and see if I can take all 17 of those libraries and try them out in the same application. Do they all fit together? Does it all work? Does it all make sense? Is it duplicative? Let's find out. Let's get into it you wanna see what all 17 are, they're all listed over here in the TanStack More Libraries section. It is phenomenal and huge, and it is amazing to see just how much TanStack has grown just in the last year. Start off with our first project, which is TanStack CLI, which is how you start creating your first TanStack application. Use your npx command to launch TanStack CLI and use the create command, and then it'll ask you what framework you want. You give it a name, and then the really cool thing is you can add on a bunch of add-ons onto your project. It includes most of the different projects that we have, AI, form, query. It's all integrated really well, all holds together well, and it has all of our sponsors in there too. So if you wanna set up authentication, you can use something like Clerk. If you wanna get database access in real time, you've got Convex. There's a whole bunch of excellent integrations in there. So product number one, CLI, use it to build your TanStack app- application, which is exactly what we've done with TanMaxx. And the code, of course, for TanMaxx is available to you for free in GitHub in the link in the description right down below. So let's take a look at what TanMaxx looks like. I'm gonna use pnpm dev to launch the TanMaxx app. It's a fitness tracker, as you'd expect from a maxing application. It's got a dashboard, exercises, program history. It even has AI integration thanks to TanStack AI. And down here, we can see that every single route in this application lists the TanStack technologies that are used to build that application. Think the most important second project here is TanStack Start, and then, of course, TanStack Router. So that's the combination that are giving us this web application framework. TanStack Start handles things like server-side rendering, React server components, server functions, API routes, all of that good stuff. And TanStack Start sits on top of TanStack Router, which gives you all of the routing backend. So go take a look at a little bit about how applications using TanStack Start are set up. our TanMaxx repo, we have apps/web, and in there we've got src/routes, and that's where the routes are for our application. Our routes are defined in this case using file-based routing. index in this case would be the homepage. course, as with all TanStack libraries, all of this is type-safe. So one of the really cool things that you can get with a combination of Start and Router are things like Link, where Link has a full type-safe list of all of the different available routes for you. And then if you pick one that needs parameters, all of those parameters are also type-safe and type-checked. Of course, that scratches just the bare surface of what you're getting with Router and Start as a fantastic web application development framework. One of the things you need to do a lot when it comes to front-end and back-end development is make queries to your back end from your client, and for that, we have the amazing TanStack Query. TanStack Query is what React Query became as we moved into the TanStack ecosystem, and we got more libraries. So React Query became TanStack Query. You can see it right here in use on the homepage. We've got useQuery coming in from React Query right down here we're using that useQuery hook to make requests to the back end and do all the caching and retries and anything else we want to do. That's one of the things you're gonna see a lot as we go through this, really succinct and solid React hooks that make it easy to build front-end applications that are reliable and allow you to focus on what's really important, which is building out the business logic of your application and focusing on what the customer wants. But let's dig a little bit deeper into the client experience and talk about some more cool TanStack projects that are in that space. Start off with TanStack Virtual. So what is virtualization? Well, virtualization in the client space is when you've got more data than what you really want to show in the DOM at any one time. For example, we have five thousand two hundred and thirty-eight different exercises here, and we wanna be able to take a look at all of them in a scrollable list. We really don't want that scrollable list to actually have all of the data in it at one time. So we create a virtual window that's showing us the data in this section, and it is really fast. Check this out as we go back up and down this list of five thousand items. It is incredibly fast, and that is thanks to TanStack Virtual. So let's go take a look at how that works in the code. I go over to exercises, can see that we have the filtered data over here. We'll get to that in a second. But we are gonna use this useVirtualizer that we bring in from TanStack and then we just give it our full set of data then to render it, we simply call getVirtualItems, and that gets us the items that are in that viewport, and it does all the work of figuring out what items should be in that viewport for us. It's as simple as this one simple little hook here, and that's a common thread that you're gonna find through all of these TanStack libraries. Whether it's Vue or Svelte or React, you're always gonna get a very clean, headless experience that you can use and customized to your needs that's gonna feel native to that platform. In React, that means hooks. Let's talk about another common user interface need, and that is to debounce inputs. So we got this search here. If I say, for example, full, we don't wanna necessarily go and grab that data and make that change right on the fly. We wanna wait a little bit until a person's done typing, and that is as simple as using the useDebouncedValue hook that that we get from React Pacer All you need to do is just set your live value, in this case, query, and then the amount of time that you want to debounce. And then you get back the debounce query that you then use for your filtering or your searching, your sorting, or whatever else you want to do Now you have your data. How do you want to display it? Well, let's talk about the history table here. The history table is built using the OG React library @tanstack/table. So this is a full headless table implementation that handles sorting and all of the rest of the table dynamics for you, and all you need to deal with is handling rendering of the data. Let's go take a look. we take a look over here in our history route. You can see useReactTable. You give it the data, you give it some callbacks. That gives you back a table object that you then use when you're rendering. For example, to build a header down here, we're using getHeaderGroups to get all the header groups. All the gritty little logic is in that hook, but all the rendering is up to you to just format it the way that you want. Next up on the front end, let's talk about range controls. Up here we've got this range here that you can select for how much you wanna max into send mode and gigamax. It also changes out the colors of your UI for really honestly no particular reason. Let's go take a look at how this range control is used building TanStack Ranger. And again, we're using a headless hook, in this case, useRanger from TanStack Ranger to manage this range control. You give it a min, you give it a max, you give it the current value, as well as the element, and it handles all of the work of the dragging and the changing of the value. And then all you need to do is handle rendering it. Isn't it great to see the consistency that you're seeing across all these components? It's because we have an API review cycle where we look at every single API that we're putting out there to make sure that it is ideal for that case, but also fits well within the whole TanStack ecosystem. Another common use case on the front end is forms management, and we have an excellent forms manager called TanStack Forms. You'll see it on a lot of these different pages. It handles all the validation flow, and if you are in an enterprise space, I think it has the best-in-class composition system that allows you to integrate form management into your component library. Let's go check it out in the code I'm over on the sessions page, and here we can see the useForm hook. It is so simple. You give it default values. You give it a submit command when you want to submit and that gives us back a form object that has components in it like form.Field that we can then use to wrap components and add on validations. Another cool addition on the front end to the TanStack ecosystem is TanStack Hotkeys. Now, Hotkeys allow you to add hotkeys anywhere in your UI. For example, here in session recording, I can hit GG and go back to the TanStack dashboard. I guess good game in that case. And all I need to do is simply just define that as a hotkey. just useHotkey from TanStack Hotkey, and then I define what I want for the key and what I want for the handler. For years we've been talking in the React space about state management. Well, we have our own state management store called TanStack Store that we're using extensively through this example. Let me show you just how easy it is to define and then access state with TanStack Store. Looking over here at maxx-store, we can find that we import store from @tanstack/store, and that we use new Store in this case to construct a new piece of atomic state, in this case MaxxState, that has a lower and an upper value. That's what's driving this range control over here To set the state, we simply call setState. To subscribe to state, we simply call subscribe. But there are, of course, handy hooks for this as well. Back to MaxxSlider for a second, we can use the useSelector hook from @tanstack/react-store, and then we can bring in that store and then select out the values that we want using that useSelector hook. Another increasingly important front-end concern is real-time databases. So we have a solution for that in TanStack world. It's called TanStack DB, and it is one of my favorite TanStack projects. I tend to think of TanStack DB as like a headless Firebase, where you can do all of the selecting and the data management on the client, and you get a live connection to whatever database collections you want to put on the back end. You just need to manage that connection between those two, although there are a lot of cool off-the-shelf options. So go take a look at how to instantiate a collection in TanStack DB. Under DB collections, we can see that we're creating this set of collections that are then synchronized against the back end, and that can actually happen online and offline. So you can work offline, make changes to these collections, and then have it automatically sync to the back end when you get online. It is awesome. Now before we leave the front-end world, let's talk about the hidden gem in the TanStack universe, and that's DevTools. Just sitting at the lower left or lower right of your screen, you've got this TanStack icon. You click on it and you get TanStack DevTools. Now this is an extensible dev tooling system that integrates with all of these different libraries. All you need to do is just bring in, for example, TanStack AI, and then integrate the TanStack AI dev tooling. And you can see here, I bring over my agent and I say, " Say hello" into TanStack AI. We can see the messages coming back, the whole chat transcript, what's going out to the tools, what the state of it is. It's, it's amazing. And as you can see, we have dev tools extensions for all of the ones that you'd wanna use off the shelf. Plus, you can even integrate your own extensions, which I think is where it really starts to light up. Just showed you TanStack AI. That is our agnostic framework for connecting to LLMs or image creators, video creators, text-to-speech, whatever you want in the AI space, and it is super easy to use. Let's go over here to routes API. You can see the back end for this, in this case, is /api/chat Now in this case, because we have a chat, we're gonna bring in the chat function from TanStack AI, And then we're gonna use it down in the handler by connecting it to Anthropic using the Anthropic text adapter. And then we also give it a list of tools, and those tools allow the LLM to actually interact with a customer in an agentic way. So let's give that a try. I can ask it to build me a four-week strength program. I'll hit Enter on that, and we can see some interesting things here. So it's calling the query PRs tool, that's getting back data, and then it's calling generate program. Now, That tool is then going to use TanStack Workflow to work through the process of building out a fitness program for me. Can see it right there. It did a fetch history, a proposed structure, a validate, and then a persist, and that gives you a way of tracking all of the work that's being done inside of that tool. But of course, you can use it wherever you want. It doesn't necessarily need to be inside of a tool within AI. It can be wherever you want it to be. To make that all happen over in generate program, you can see that we're bringing in create workflow from @tanstack/workflow-core, and then you use createWorkflow to define that workflow. It gives you a context. You use that context to create a set of steps, and it handles the execution of all of those steps for you. There's one more project that's really important, and that's TanStack Intent. We're all agentic coders over at TanStack, and so we're really interested in making sure that you have the most up-to-date information about all of our libraries, and TanStack Intent is how we do that All of our libraries have integrated skills, and in this case, we can use skill list command to call Intent to see what those skills are, and then you can use subsequent commands to integrate those into Cursor, Claude Code, Codex, whatever you want. For those of you playing the home game, you'll probably notice that I'm at only 16 out of 17. Well, the 17th is TanStack Config, and that's what we use for our monorepo and build system management. So that actually is integrated into this repo as well Gotta say, I started off this whole TanMaxx thing as kind of a joke. I mean, 17 is a lot of projects, but it actually holds up really well even in a single application. All the libraries do different things, cover different customer needs, but they all have a consistency of API that I really like. course, if you're using any TanStack libraries I haven't mentioned here, please be sure to put those in the comments right down below. I can't think of any, but maybe you can. In the meantime, of course, if you have any questions or other comments, put that in the comments section. If you like the video, hit the like button. If you really like the video, hit the subscribe button and click on the bell. You'll be notified the next time a new Blue Collar Coder comes out.