create-t3-app with Christopher Ehrlich

Episode Description

JavaScript Jam explores Create T3 App with core team member Christopher Ehrlich, covering tRPC, Prisma, and the full-stack TypeScript ecosystem.

Episode Summary

This episode of JavaScript Jam features host Anthony Campolo and co-host Scott Steinlage in conversation with Christopher Ehrlich, a core team member of Create T3 App and contributor to tRPC. The discussion opens with reflections on the parallels between teaching and developer relations, then moves into a lively exchange about ChatGPT's role as a learning tool and coding assistant, with Scott sharing his experience using it during a five-hour coding session. The heart of the episode centers on Create T3 App itself—what it is, why it exists, and how it fits into the broader landscape of full-stack JavaScript frameworks like Redwood and Blitz. Christopher explains how tRPC provides end-to-end type safety without the overhead of GraphQL, and why Prisma and NextAuth round out the stack as free, developer-friendly defaults. A live coding walkthrough demonstrates project scaffolding, tRPC queries, Zod input validation, Prisma database integration via Railway, and a quick deployment to Fly.io. The conversation also touches on the team's cautious approach to adopting the Next.js App Directory, the philosophy behind keeping the stack modular and free, and the value of community-driven documentation and support.

Chapters

00:00:00 - Introductions and the Teaching-to-DevRel Pipeline

Anthony kicks off the show with a joke about the "millennial pause" before introducing Christopher Ehrlich, a teacher turned developer who works on the Create T3 App core team and contributes to tRPC documentation and developer relations. Christopher describes his mission to make web development more accessible through videos, docs, and translations.

The conversation quickly draws connections between teaching and DevRel, with both Anthony and Christopher reflecting on how difficult it is to measure impact in either role. They discuss the challenge of knowing whether an explanation actually lands with an audience, and how tools like Discord and Twitter serve as real-time feedback loops for understanding where developers struggle.

00:03:33 - Learning to Code in the Age of ChatGPT

Scott shares his journey as a self-described student of coding, discussing how the sheer volume of online learning resources can be overwhelming and how many courses devolve into copying and pasting without real comprehension. He recounts a pivotal five-hour ChatGPT session where he iteratively built a tweet-tracking app, describing the AI as a patient coding partner available at any hour.

Christopher offers a more measured take, calling ChatGPT a powerful but occasionally unreliable Google that confidently fabricates answers. The group agrees it's a tremendous time-saver for drafting emails and exploring unfamiliar code domains, but not yet a replacement for human expertise. Anthony notes that ChatGPT functions as a generalist that breaks down when matched against a specialist, and the group briefly touches on GitHub Copilot Chat and its potential as an in-IDE assistant.

00:13:59 - What Is Create T3 App and Why tRPC Matters

Anthony frames Create T3 App within the broader history of full-stack JavaScript, tracing a line from Jamstack front ends through Redwood and Blitz to the current T3 approach of layering tRPC, Prisma, NextAuth, and Tailwind on top of Next.js. Christopher explains that tRPC lets developers build type-safe APIs with minimal ceremony—no schema to write, but the front end still knows every route's input and output types.

The discussion contrasts tRPC with GraphQL, noting that tRPC requires less buy-in and its procedures are essentially portable JavaScript functions. Anthony shares his experience learning both, observing that tRPC clicks fastest for developers already comfortable with JavaScript, while GraphQL may be equally approachable for true beginners. They highlight how rapidly improving documentation and community tutorials from creators like Nexxel, Jack Herrington, and Theo are lowering the barrier to entry.

00:22:09 - Live Demo: Scaffolding and Exploring the T3 Stack

Anthony shares his screen to walk through the Create T3 App homepage, the CLI scaffolding process, and the generated project structure. Christopher explains why Prisma provides type-safe database access and why NextAuth was chosen as the default free authentication solution, while also acknowledging paid alternatives like Clerk for teams that want additional features.

The group explores the modular CLI options—Tailwind, Prisma, tRPC, and NextAuth can each be toggled on or off—and enjoys the Easter egg where selecting JavaScript instead of TypeScript is humorously blocked. Christopher also explains the new import alias feature and how the project validates environment variables at startup using Zod, preventing cryptic bugs from surfacing hours into development.

00:36:27 - App Directory, React Server Components, and Staying Current

Christopher addresses the most common community question: when Create T3 App will support the Next.js App Directory. He explains the team is waiting on the React Mutations RFC and its downstream implementation in Next.js, which will determine how tRPC handles invalidation across the server boundary. The priority is shipping a polished developer experience rather than racing to adopt bleeding-edge features.

Anthony frames this patience as a natural consequence of the dependency chain—React ships features, Next.js integrates them, tRPC adapts, and only then does Create T3 App update. Christopher confirms they expect to move within weeks once the lower layers stabilize, and Anthony reminds listeners that React Server Components were announced over two years prior, so a brief additional wait is reasonable.

00:39:08 - Live Coding: tRPC Queries, Zod Validation, and Prisma in Action

Anthony demonstrates the default tRPC hello query running in the browser, showing the network request, URL encoding, and SuperJSON serialization under the hood. Christopher explains the role of SuperJSON in handling JavaScript data types like dates that don't serialize cleanly over HTTP. The pair then walk through how Zod input validation works on a tRPC procedure, contrasting it with the tedious manual input checking typical of Express APIs.

To show the database layer, Anthony spins up a PostgreSQL instance on Railway, pushes the Prisma schema, and uses Prisma Studio to create records that are then fetched via a tRPC getAll query. Scott asks about the practical benefits of type safety, and Christopher illustrates how changing an endpoint's return type surfaces TypeScript errors everywhere it's consumed, catching bugs at build time rather than in production.

00:56:54 - Deployment, Community Etiquette, and Documentation Philosophy

Anthony demonstrates deploying a Create T3 App project to Fly.io with a single CLI command, and Christopher expresses enthusiasm for supporting multiple hosting providers beyond Vercel. The conversation shifts to community dynamics, with Anthony cautioning newcomers to read the Discord rules before posting, while Christopher clarifies the server is more beginner-friendly than its reputation suggests—it simply enforces channel discipline at scale.

Christopher explains the team's documentation strategy: they write guides for areas where the T3 stack's packages overlap or where setup is unique to Create T3 App, but defer to upstream docs for individual tools like Prisma and NextAuth. Anthony recommends following end-to-end tutorials from community members as the best on-ramp, and both highlight how over 200 contributors have shaped the project into what it is today.

01:13:56 - ChatGPT for Docs, Open Source Maintainership, and Closing Thoughts

Scott circles back to ChatGPT, envisioning a future where AI chatbots trained on both a project's documentation and a developer's own codebase could answer questions with full context—eliminating the problem of not knowing what to search for. Christopher agrees this would be transformative, noting that most open source docs are incomplete and an AI layer could bridge the gap without requiring maintainers to write exhaustive guides.

The group wraps up with Christopher shouting out the tRPC team and Create T3 App's 200-plus contributors, emphasizing that the project's success is community-driven. Anthony encourages listeners to explore the project at create.t3.gg and connect with Christopher on Twitter and YouTube. The episode closes on an optimistic note about the convergence of AI tooling, open source collaboration, and developer education in the JavaScript ecosystem.

Transcript

00:00:06 - Anthony Campolo

All right. Hello, everyone. Ever since I learned the term millennial pause, it's the only thing I can think about once I start recording. If you guys know what that term is, millennials apparently don't start speaking until two seconds after a recording starts. Anyway, welcome, Christopher and Scott. We got Scott here now as my co-host for the JavaScript Jam podcast. If you listen to JavaScript Jam live, you already know who. If you're just finding this video on YouTube or something, welcome. We're going to be talking about Create T3 app today. We're really happy to have one of the core members here with us. Christopher, why don't you introduce yourself and tell us a little bit about what you do?

00:00:48 - Christopher Ehrlich

Yeah, thanks a lot for having me. My name is Christopher. I'm a teacher turned developer. In my day job, I do normal web dev and then at night I am on the core team of Create T3 app and I also work on TRPC quite a bit, specifically sort of docs and Devrel type stuff. Now let's say my overall goal in all of this is to make web dev easier and more accessible, and that takes many forms. So I make YouTube videos, I write docs, I do translation, all kinds of stuff basically.

00:01:22 - Anthony Campolo

Yeah. I'm super excited for what you've been doing because I've been seeing you get more involved with these type of activities, having already been just someone who kind of hangs out and contributes to these projects. And I think assuming more of like a Devrel type role is really good fit for you. And especially because you used to be a teacher. This is something that people who know me well know that I got my start as a music teacher. And transitioning from a teaching role into Devrel, I find is just a really good fit because if you do Devrel well, if you're not selling something, you're hopefully explaining something. And that really involves having teacherly abilities.

00:02:02 - Christopher Ehrlich

Yeah, definitely. And I also think it's kind of difficult sometimes with DevRel to see the impact or to measure it. And that's kind of similar to teaching where, you know, you talk to people and, if you do a great job, then they will do better than if you hadn't done great. But it's very difficult to put it down to numbers a lot of the time. And I think it's a very similar approach in many ways.

00:02:29 - Anthony Campolo

Yeah, it's a very holistic kind of activity because it's hard to just point to specific metrics, which is why we lean very heavily into testing in our schooling, because then we have at least some metric, even if it's not necessarily the best metric to point to. But you don't even give tests to people after a year if you do a DevRel presentation, so it's really hard to know whether what you explain actually makes sense or not. So I find engaging the audience really important, being like, does this make sense? Do people have questions? Or asking them point blank, like, do you know what this means? And prompting people to specifically say either yes or no, whether they understand what you're saying or not.

00:03:08 - Christopher Ehrlich

Yeah, I found one really good tool for that is discord and Twitter and just seeing what questions people have or what people complain about because like, you don't know how docs or how a tool will be for somebody who doesn't know about it. Because like, you always come from that position of already knowing a decent bit about it.

00:03:33 - Anthony Campolo

Yeah, I'd be curious, Scott. You're someone who, you're going through a process of kind of starting to learn more about web dev and hone your skills. And you know, all of us are always in a place where we're always learning. But I think that you kind of see yourself as still kind of like a student of coding in a way. But I think that you're coming up in a place where there's a lot of really good educational material. The problem is almost that there's too much of it. Like how do you kind of parse through when you're trying to learn something? Or do you not even bother and just ask ChatGPT everything now?

00:04:05 - Scott Steinlage

Yes. Oh, this is a great question. So first of all, thanks. I appreciate being able to come on here and do this with you guys. But yeah, as far as learning goes, I was thinking when you guys were saying what you're saying now, maybe you should host a hackathon right after your session and do a little run-through with people to see how they actually absorbed and did things. But anyway, as far as me personally, yeah, I'm definitely still on the student side. As we all know, developing in web development is a lifelong journey. We're always learning new things and expanding our knowledge base and all that. But yes, I would consider myself in the student era of my journey, and it's been very exciting so far. I'm actually doing like 100 days of coding just to really focus on improving my skill sets in that area. And like you said, there's so many things out there now as far as where to learn and what to learn.

00:05:14 - Scott Steinlage

To learn from, what to learn. And that's great because here's the thing, like, people, everybody's different, and everybody learns differently, and everybody connects with someone differently. Like, you know, Christopher's story or. Or Anthony, your story might, you know, better be fit for. For a certain type of person or a certain person that, you know, can relate with what you. Your background.

00:05:37 - Anthony Campolo

Right. And so that's. Especially people who had humanities.

00:05:41 - Scott Steinlage

There you go. So if you have a humanities degree, you probably want to follow Anthony, right? Just because y'all can relate on that personal level, and therefore you're probably more open to listening to that person and absorbing what they have to say because of that. Right? It's a psychology kind of thing. Now, you're definitely right. I've been through so many classes online and Udemy courses and this and that, and courses galore. There's this overwhelming amount of stuff, and eventually you just got to take action, right?

00:06:19 - Anthony Campolo

I would also hazard a guess that through going through all those materials, you may not have actually gotten a ton of value out of them. Certainly not as much as maybe the marketing pages were saying you would get.

00:06:30 - Scott Steinlage

Totally. Absolutely. No, I would wholeheartedly agree with that. Not to bash everything out there, but I would say that you get to a point where you're just copying and pasting so much that you're not really learning as much as you'd want to, and you just want to dig in and start creating a project, which I have done in the past, where I'm like, you know what? I'm just going to create something on my own and start this process and see where it leads me. Right? But the beautiful thing about Chat GPT, because here's the thing, I did, like, stop for a while learning coding, and I was just like, I'm not going to do this anymore. I'm just going to focus on my roots, my skill set that I currently have, which is marketing and sales and things like that. And I have a lot of tech knowledge. Technology.

00:07:10 - Anthony Campolo

That's funny. Anyway, so.

00:07:13 - Scott Steinlage

But I was like, you know what? When ChatGPT came out and I started messing with it and using it for, like, some marketing stuff, then I started, like, messing with and Seeing what I could do with coding stuff and like hearing everybody talking in the coding and dev world, like, hey, you can use this to create apps. You use this to create, you know, all these other things, right? Blah, blah. And so I said, you know what, let me see. With someone with not as much knowledge as someone who has a ton of knowledge in developing if I could manage to do something right. And so then I said, all right. So I started typing in like giving an example of what I wanted to create, right, this like tweet tracking, retweet tracking app for this giveaway that we're actually going to be doing this week. But anyway, and so I started just iterating and talking back and forth with Chat GPT. This went on for like a five hour conversation. It was amazing what came out at the end and, and I've, you know, errors and then asking it to debug things and all kinds of stuff.

00:08:11 - Scott Steinlage

And it's amazing what this can do. And it's just, it's like having your best friend available at all, all times of the night to be able to say, hey, Anthony, instead of calling you up and saying, hey, can you help me with this code? Right, and tell me what's wrong with this piece here and help me to guide me in the right direction, right? I can just say the same thing to ChatGPT and it instantly gives me the answer and I don't have to bother you at 2 in the morning, you know.

00:08:39 - Anthony Campolo

Well, I mean, you know that I go to bed at 4, usually. So no, if you ever sent me a random code message, I would not mind. I know you would absolutely appreciate it. But yeah, I've been watching you go through this journey, and I'm glad you're doing it publicly because I've been telling people this for months now. Some people get it, some people think I'm crazy, where I say ChatGPT is going to be a personal teacher for everyone and that way everyone can use it. Now, this doesn't mean teachers go away. This means teachers' jobs become slightly different and even more important because they need to make sure that these learning machines are well calibrated to teach people the right thing. So there's still a huge role for teachers here. I know you and Chris have chatted online about ChatGPT a little bit. We were talking more in the nature of how it can be used for cheating, which is another really important conversation. But I'll be curious, what's been your take from what you've done so far with ChatGPT?

00:09:40 - Christopher Ehrlich

For me I've never been good at remembering things so like my brain is just a set of pointers to stuff I can Google basically and ChatGPT has been really good for that.

00:09:50 - Scott Steinlage

That's amazing.

00:09:51 - Christopher Ehrlich

I found it doesn't replace understanding a system because you need to know what to ask it or what to Google for. I've basically found it to be like a very strong Google that confidently lies occasionally.

00:10:07 - Scott Steinlage

That's true too. I have caught it in a few lies.

00:10:10 - Christopher Ehrlich

I use it all the time to draft emails and stuff like that and then you know, go over them and make them better because it's. It does sometimes go into certain routes of formulating stuff that I'm not that fond of. That sound very cookie cutter. But yeah, it's a huge time saver and I think it's going to make a lot of things easy. But I'm not yet convinced that it will replace anything. It's just like one additional thing that we have access to an amazing tool.

00:10:40 - Scott Steinlage

Absolutely. I agree wholeheartedly. I'd use it for all the things you just said too. Yes.

00:10:46 - Christopher Ehrlich

And with teaching I've always found that the most exciting part of teaching is kind of seeing where somebody is and helping them figure out where they need to go next. And I think that's where humans will remain extremely valuable because like the sum of human knowledge is always going to have more knowledge about like any specific topic than a human will. But it doesn't replace I think experience and talking to a person and like doing the more soft side of teaching.

00:11:20 - Anthony Campolo

Yeah. ChatGPT is like the ultimate generalist. It knows a lot of stuff about a lot of stuff. But if you put it against a human specialist on anything, it's going to eventually show where it's wrong, where it's making stuff up, where its knowledge base kind of runs out or falls off a cliff because it wasn't able to be trained on one set of data, but it was trained on another set of data. I think that's going to be really interesting. Once we're able to just feed it the sum total of the internet, I'd be really curious to see what it would start putting out. But my only worry is that people don't want to give it [unclear], so they're afraid of what it's going to end up saying.

00:11:57 - Christopher Ehrlich

I'm also really excited to see how good Copilot will get once your average computer can process enough tokens to have an entire code base in it.

00:12:05 - Anthony Campolo

Have you seen Copilot Chat?

00:12:08 - Christopher Ehrlich

I have not used it yet. I don't have access to it yet.

00:12:11 - Anthony Campolo

I didn't even know this was a thing. I saw Rizel. She works at GitHub and is becoming a Copilot DevRel. She's written Copilot blog posts on the GitHub blog. They're really good. She was coding around in her IDE and had a chat interface in VS Code that lets her talk to Copilot as if it were ChatGPT. And I'm like, well, this is the thing. This is what everyone wants. So keep an eye on that. That's something I should probably get on the waitlist for, or bug Rizel and see if she can get me in the back door.

00:12:45 - Christopher Ehrlich

Yeah, yeah. I've seen the thing where you can highlight code and say, explain this. And that actually works shockingly well. I found, like, occasionally it just completely bugs out and like, says the same sentence 30 times in a row or, you know, does one of the weird AI glitchy things. But yeah, for. For domains where I'm not so comfortable with, I found it very helpful just. Even just to get told what to Google for kind of.

00:13:10 - Scott Steinlage

So quick question then.

00:13:12 - Anthony Campolo

I've.

00:13:12 - Scott Steinlage

I've looked at Copilot. I haven't really messed with it too, at all. My question is, how much would you say you would spend on Copilot? You know, is it worth the cost?

00:13:24 - Christopher Ehrlich

I think it's worth $10 a month easily.

00:13:26 - Scott Steinlage

That's what it is. Okay. I wouldn't. I didn't know exactly how much it was.

00:13:28 - Anthony Campolo

Cool. Yeah. It's partly to know how much money you have and how valuable saving coding time is for you. I'd be willing to bet there'd be companies that would pay 100 bucks a head for it.

00:13:40 - Scott Steinlage

Yeah.

00:13:40 - Christopher Ehrlich

Yeah. I think if you're a company and you're giving your developers, you know, $3,000 computers and probably like $1,000 a subscriptions to productivity tools and like, management tools, then to say no to Copilot feels strange to me at this point.

00:13:57 - Anthony Campolo

It's a really good point.

00:13:58 - Scott Steinlage

Good call out.

00:13:59 - Anthony Campolo

Fantastic point. Okay, we could talk about ChatGPT literally for hours. So let's transition us to Create T3 app. One of the first questions I ask people these days is, what do you think about ChatGPT? Let's talk about ChatGPT. It's not like I'm obsessed with it, but yeah. So Create T3 app is what I am super excited about because it is, to me, very much in line with what I've been talking about literally for three years now. People who know me and follow my work know that I'm all about the full-stack Jamstack, which is not a term you'll really hear in the Create T3 world, but it kind of describes it, I think. The way I describe it is taking a Jamstack kind of site. You can think of a classic Next.js front end, could be static, could have a couple API serverless function routes, could be using Prisma, but really the idea is that you want to build a full-stack application that talks to a database. So there's this decoupled aspect to it: there's a front end and a back end, it's not a monolithic thing.

00:15:00 - Anthony Campolo

But the hard part has been just building that because in the past everyone started with the front end using a framework and then built their own backend, however you would want to do that. And then when things like Redwood and Blitz came around, they're like, hey, we're going to give you conventions for your back end. So you have some good patterns in terms of how you manage accessing the database, how you manage authenticating your users. And then Blitz kind of went through this weird migration journey to where they forked next and then they said they were going to change. They are, and I haven't really paid attention to it. That's recently, so I'm not really sure where they're at. Redwood has continued on doing its thing and people who don't like GraphQL have kind of resisted it. And then create T3 app came out, which was more so in the Blitz angle where they're saying we're going to take Next JS and just build the rest of the stuff on the end instead of building a brand new front end framework and a brand new backend framework. But the secret sauce and why I'm really glad to have you here also has been trpc.

00:15:57 - Anthony Campolo

That's really the thing that's made it different from any framework that came before it. So what is TRPC and what makes it so crucial for Create T3 app?

00:16:08 - Christopher Ehrlich

tRPC is basically a way to create APIs with really good developer experience. To me that's the shortest explanation. You get the simplicity of REST, like you don't need to write a schema, but you get some of the advantages of GraphQL. Specifically, your front end knows what routes there are in your back end and what the input and output types of those are. And I think the role it really fills is this: if you start to develop, you learn React or Vue or whatever, and then you learn Express. And then what? There are so many different ways to go from there. I think it's very helpful to give one set of decisions that's pretty good. There are other viable ones, but a lot of people are making this combination of decisions, and if you also make them, there's support for it. You can talk to people who are using the same stuff. And all of it is fairly easy to move away from if you decide you need something else in the future.

00:17:16 - Christopher Ehrlich

I would say that's kind of why Create T3 app has worked quite well. And also the main thing about tRPC is that, with GraphQL, once you buy in, you're really bought into GraphQL, and it's an awesome place to be. You get that type safety, you get everything the schema gives you. But with tRPC, you're buying into a lot less. You're buying into writing functions that you can copy and paste into an Express or a Fastify API in the future.

00:17:46 - Anthony Campolo

Yeah, I hear people make this argument a lot. I learned GraphQL faster than I learned TRPC. That's. That's all I can say from my own personal experience. And everyone's experience is going to be different. And yeah, I think that if you're an experienced developer who's been doing a lot of JavaScript and have been writing Node backends, I could see how you could pick up TRPC really, really quickly because as you say, you're writing like JavaScript functions and when you look at the code, you're looking at JavaScript code. And for someone who is new at JavaScript, that's extremely challenging because JavaScript code is extremely challenging when you first learn it. It really just depends, I think, where you are in your journey. If you haven't learned a whole lot of JavaScript yet, learning in the GraphQL conventions won't necessarily be any more challenging because you're starting from zero, you don't know anything. But if you already have your really strong JavaScript skills, then I can see how someone would look at TRPC and Be like, oh, this immediately makes sense to me. I can tell exactly what's. What's going on here. It took me a little bit more time, but also because the docs I think have been improving since I first got into it and I've written some of my own blog posts now.

00:18:54 - Anthony Campolo

So I feel like as the docs improve, that's going to really ramp up people even quicker on trpc.

00:19:01 - Christopher Ehrlich

Yeah, the docs were really not great at the start. They've improved enormously in the last couple of months thanks to like two or three people from the community who really stepped up and started writing them. I've written a couple pages, but mostly it's been other people so far.

00:19:18 - Anthony Campolo

Yeah, I think the biggest thing is just going to be a good tutorial. Like for me, I'm really big on end to end tutorials and like starting from a blank project and then building a project that kind of walks you through some key parts of it. So this is what I did in mine. I showed how you first can just create a single file TRPC backend. Then I showed how you can break out the context. Then I showed how you can break out individual routes and I showed how you can put a front end on it and connect the front end to it. And I showed how you can migrate it to an XJS backend. So it's like really, really step by step kind of thing that I didn't feel like I could get from the docs. And it took me like three months. It took me a long time to write that blog post. But yeah, it's. So feel free to look at that and check out the structure and see if there's anything you want to pull from it. Because I think getting a tutorial in will help a lot with the docs and someone actually opened an issue or a PR for it after I posted my blog post and I'm like, here, look at this, this looks really good.

00:20:12 - Anthony Campolo

So like that made me so happy to see that.

00:20:17 - Christopher Ehrlich

Yeah, I'll definitely look it up. There's also a couple of other ones I want to shout out to anybody who's trying to get into trpc.

00:20:23 - Anthony Campolo

Yeah. And we'll put links in the show notes so people check those out.

00:20:27 - Christopher Ehrlich

Yeah, so Nexo, the creator of Create T3 app, wrote a blog post about like how to write a full stack app with create T3 app. And he, together with somebody else has been keeping it updated every time any of the syntax changes and all that. Then number two is Jack Harrington, who is just an awesome Web Dev Teacher on YouTube. He's who I learned react from. Did a video with create T3 app showing TRPC and everything around it. And then finally Theo released a three hour mega tutorial like two, three weeks ago, which I haven't watched yet because it's three hours, but I'm sure it's really, really good.

00:21:04 - Anthony Campolo

Yeah. Could you either drop those in the chat here or send them to me on Discord or something? Just so we have those now. Need to go fishing for them in post.

00:21:15 - Christopher Ehrlich

Is it okay if I find them after the show?

00:21:17 - Anthony Campolo

Okay, yeah, that's fine. Yeah. And I know all three of what you're talking about, so I could, I could find them as. As well. Yeah, those are, those are great resources. Yeah. Do you have any questions right now, Scott?

00:21:29 - Scott Steinlage

No. So I'm. I'm excited to dig in and check out what's going on.

00:21:33 - Anthony Campolo

Sweet. Yeah, I think we're probably good to start getting into some coding. Unless there's anything else you want to talk about, Chris, as like a kind of place setting for what we're going to show.

00:21:46 - Christopher Ehrlich

No, I think let's jump right into it.

00:21:49 - Anthony Campolo

Sweet. And then I'm going to show us a little bit how to deploy it as well. I know you had been curious about some fly stuff. So that'll be something that we can show how to do. Yes, you can go ahead and kick us onto the screen sharing mode, Scott.

00:22:09 - Scott Steinlage

There we go.

00:22:11 - Anthony Campolo

All right. And this is the home page. So the home page used to just be a single command that said run this command. It used to basically just be this part and then said Create T3 app on top. But there's a brand new home page now, which is pretty cool. So when people go to Create T3 GG, they'll find this. It shows what the different pieces are of the stack. We talked about the top row already, how it's a Next.js front end using tRPC for the APIs. People already know about Tailwind, so we won't talk about Tailwind, but do you want to talk about Prisma and NextAuth a little bit and why you think those are kind of a good fit for this stack?

00:22:54 - Christopher Ehrlich

Yeah, sure. So with Prisma, the main thing is that for a long time it's been the best way to talk to your database in a type-safe way. You write your Prisma schema, or you connect to an existing database and tell it to introspect, and then it writes a schema for you. Then you have these functional ways to declaratively write what you want to get out of your database or what you want to put into your database. Those things are typed correctly, and you don't need to do anything for that. That's really essential in terms of having the correct return types on your tRPC endpoints. So that's the main reason we went with Prisma: basically DX. And with NextAuth, same thing. It's just, I would say, the easiest way to set up provider-based auth in the JavaScript ecosystem. So in the case of Create T3 app, if you want to use the Discord provider that we include, you just need to get a Discord developer account, copy and paste your ID and your secret into your env file, and then your auth works. That's super powerful.

00:24:02 - Anthony Campolo

I am curious. So I know that I've been seeing Theo talk about Clerk a lot more and Clerk is an authentication company. And when you use, if you were to use Clerk, would that integrate with NextAuth or would it replace NextAuth?

00:24:16 - Christopher Ehrlich

It would replace NextAuth.

00:24:18 - Anthony Campolo

Okay, interesting. Yeah, because I find that this is where Redwood went really heavy into third-party providers for auth. We have like seven of them. You could use Auth0, you could use Clerk, you could use SuperTokens. There's a set of like seven of them. And then we have our own auth abstraction so when you're using any of those providers, you have a generic useAuth hook. So that seemed to be the thing Redwood built, kind of a layer like NextAuth, and then that integrates a third-party provider. So I would be curious if NextAuth is going to eventually build in the ability to integrate with different providers. This is where my knowledge kind of runs out because I don't know a ton about how all these different auth things work. But yeah, if you were to tell someone whether to stick with NextAuth or evaluate Clerk, what would you say?

00:25:19 - Christopher Ehrlich

I would say there could be a possibility that NextAuth creates sort of a provider for Clerk or for another paid thing in the future. Currently I don't think anything like that exists. The main decision with NextAuth is that you basically own your auth, but it's abstracted. So you use your own database. It's all free, but it has certain limits. For example, it doesn't really integrate with React Native very well. Whereas with Clerk, you give away some amount of control, but you also get a lot of quality of life back for it and a lot of additional features that NextAuth doesn't have. With Create T3 app, I think we're always going to stay with things that are free to use because we want people to be able to start apps for free, basically. And with just Create T3 app and the free tier of Vercel and the free tier of any database provider, you can get a real app going without ever paying anyone any money. But yeah, Clerk is also super awesome and really powerful.

00:26:26 - Anthony Campolo

Cool. Awesome. And then here we got some community links. The Discord goes to Theo's Discord, I'm assuming. And then they got a GitHub and Twitter just goes to Theo's Twitter right now. Hey, you took my tweet off.

00:26:45 - Christopher Ehrlich

Yeah, we took it off because Twitter kept breaking, so we just temporarily removed all of it.

00:26:50 - Anthony Campolo

Just grab some screenshots like everyone else does. Like, most people don't actually pipe in a literal tweet to show a testimonial.

00:26:58 - Christopher Ehrlich

Yeah, we're going to bring that back in the near future.

00:27:00 - Anthony Campolo

Yeah, it used to be previously, if you would go on here and you scroll down, you see my little donut face talking about how I think Create T3 app is super awesome. And that was a tweet I wrote back in, like, July when I first discovered it. And I was saying how I think that it's the first true kind of competitor to Redwood to come out. And I remember the time Theo, I never even thought about it as something that was even comparable to Redwood or would be existing in the same space. I'm just like, no, it's almost identical. Actually.

00:27:30 - Christopher Ehrlich

The funniest thing is, I don't remember why this was. But every time our Twitter API token stopped working, the fallback was your tweet, but four times, so you could scroll through.

00:27:39 - Anthony Campolo

It was only me. Yeah. So that was the funniest part of the bug, is that you would just read five testimonials by me.

00:27:50 - Scott Steinlage

You're the only proof.

00:27:52 - Anthony Campolo

I mean, that's all you need, right? As long as you know I'm using it, then you're like, who cares what Ken C. Dodds thinks? Okay, cool. So these are the docs here. The docs are built with Astro. I was chatting with the team when they first created this, and they just ran with it and built out a really awesome thing. Here we have a couple deployment steps. So these, of course, I wrote for Netlify. See how fast that page loaded. Look how fast that was. Yeah, totally. So this is a good place to go to get started, but to actually start building things, you go to this installation page. What do you use when you're using Create T3 app: npm, yarn, or pnpm?

00:28:43 - Christopher Ehrlich

I use pnpm and I finally started actually typing pnpm create or pnpx. I used to, like, use PNPM for my packages and then still use NPX for, like, terminal commands, but.

00:28:55 - Anthony Campolo

Right.

00:28:56 - Christopher Ehrlich

I've finally grown fully into the PNPM habit.

00:28:59 - Scott Steinlage

Forgive my ignorance. I know npm. I do not know pnpm.

00:29:05 - Anthony Campolo

Do you know Yarn, though?

00:29:06 - Scott Steinlage

Yes, I. I'm. I've used it.

00:29:08 - Anthony Campolo

So you can kind of think of PMPM as something that was built to expand on what Yarn did. Because Yarn abdicated its ability to innovate. They basically put out yarn 2 and the community wholesale rejected it, and no one upgraded. And then they put out Yarn three, and by that point most people had kind of given up on it. So a lot of the innovations that Yarn brought in, like workspaces, were eventually integrated by npm. But the original problem with NPM and why Yarn was used and adopted by a lot of people is because NPM is really slow. There's something about how the tool itself is created that just makes it slower than what it could be. So Yarn was faster. But then because of all the upgrade problems, people didn't want to use Yarn as much, but they also didn't want to go back to npm. And so PNPM offered a kind of alternative. They do this fancy thing where they can globally cache your node modules so you can have less node modules flying around your computer. This also makes it incompatible in certain ways because of its dependency resolution with NPM and Yarn.

00:30:15 - Anthony Campolo

So when you're trying to use all three of them, you're going to run into, like, the biggest headaches of your life. Ideally, the tool maintainers go through that pain so you don't have to, and you can just use any of them and they will all work just fine. But I would recommend for you, Scott, starting to try out pnpm. I think it's mature enough now that you'll probably be able to use it a lot and not hit kind of weird issues. But I'm a big fan of it.

00:30:39 - Scott Steinlage

What about version control with everything in pnpm?

00:30:44 - Anthony Campolo

So that's going to be the same across all of them. All of them can be used to upgrade and downgrade your dependencies in package.json. Then you'll also manage your Node version through a higher-level tool like Volta. I use Volta to manage my Node versions, and I also install npm, yarn, and pnpm through Volta.

00:31:12 - Scott Steinlage

Not to go down a rabbit hole too much further here, but I use Homebrew for Node and all that.

00:31:19 - Anthony Campolo

So Homebrew is what you use to install either Node directly or Volta. Yeah, if I were to have fresh computer, I would install Homebrew. I would use Homebrew to install Volta. I would use Volta to install Node and pnpm.

00:31:34 - Scott Steinlage

Got it. All right, cool, thanks.

00:31:37 - Anthony Campolo

Here's a fun little Easter egg for people. When you're going through this, most people are probably going to select TypeScript because the whole point of this is to have a TypeScript project. So you may be wondering, why would they give you a JavaScript option? Wouldn't that like, not work? And you were correct, it will not actually let you select JavaScript. It's a red herring. This is what. This is one of those little details that just cracked me up so much and was like, any project that actually has a sense of humor to me is like instantly ahead of the game.

00:32:11 - Christopher Ehrlich

Yeah, we get a GitHub issue about this occasionally where people complain, but we're going to stick with this for as long as we possibly can, probably forever.

00:32:20 - Scott Steinlage

And if it has Theo involved, I'm sure.

00:32:23 - Anthony Campolo

Okay. And then what it does is it asks you which of these you want to add on. This is another cool thing about Create T3 app is that it's modular in the sense that when you generate a project, it doesn't just give you all this stuff out of the box and kind of give you this massive project with all these dependencies that you need to manage. It can be. You can actually ignore all these and just generate like a fresh Next app that's configured well with TypeScript and that was a good use case for it before the next project themselves went all in on TypeScript. But what I usually do when I do this and I'm doing demos, we're not going to have enough time to do like a whole AUTH integration. So I'm going to install these three and then leave off Next Auth, and then that will give us everything we need to set up our database to have some nice little styling and then include our trpc and then I'm going

00:33:17 - Christopher Ehrlich

to select yes. Including NextAuth on stream is just a great way to leak your environment credentials.

00:33:22 - Anthony Campolo

That's right. Yeah.

00:33:23 - Scott Steinlage

Not if you have the. What was that thing you sent me?

00:33:26 - Anthony Campolo

Oh, cloak. Yeah, the VS code. Cloak extension. This option was not here a couple months ago. What is this?

00:33:37 - Christopher Ehrlich

This is an import alias, which means that instead of importing from whatever, you can just import from this alias and then it's relative to your source folder, which means if you move files around, your imports don't break. I also find it easier to parse. Of course relative imports still work, but this is just a nice little quality of life thing.

00:34:04 - Anthony Campolo

Okay, sweet. Yeah, that's something that Redwood manages internally for you, I think, with some sort of like Babel magic. So that's the kind of thing that I never think about relative versus non relative imports anyway. So that's a very nice touch. I'm glad to see other projects investing in that kind of stuff. Okay, now this is going to install our dependencies and then this is for the environment variables. Something interesting. Could you talk a little bit about how they're able to make environment variables type safe? That's something that I still don't see very often.

00:34:42 - Christopher Ehrlich

Yes. So we got this through the collaboration of a couple of really awesome people. So Colin from Zod, Joshua who works on TSLint, I think Daniel Rowe from NUXT helped with it a bit as well. Basically, the very short version of what we do is we run your environment variables through Zod, which is a way to validate that data has the shape that you say it has. And so if you try to start your app and you're missing an environment variable or you have it set to something that doesn't make sense, for example, it needs to be a number, but you have some letters in there or something like that, then your app will blow up immediately when you started and not two hours later when you don't even remember anymore why it could possibly be going wrong.

00:35:32 - Anthony Campolo

That's really great. Environment variables are one of the most common sources of bugs and frustration and things like that. So I want to quickly show this project structure. The most important thing people are going to want to know about is the Prisma folder, which has the Prisma schema in it. And then the vast majority of stuff exists within our src directory. So if you're someone who has seen a Next project before, then the Pages folder should look familiar. Then you'll have your API folder, which is where the serverless function stuff happens, or edge functions, if you want to do that. So let's talk bleeding-edge stuff very quickly: what's the status on the App Directory and on generally getting it current with what's happening with Next.js?

00:36:27 - Christopher Ehrlich

the big thing we're waiting for is the Mutations RFC from Vercel, basically, or from the. No, from the React team and yeah, from the React team on what they're doing then from Vercel on what they're going to be doing with Next, because that is going to influence how TRPC works and what its role is going forward.

00:36:47 - Anthony Campolo

Okay.

00:36:47 - Christopher Ehrlich

In terms of where we are now, the goal of Create T3 app is like to be a reasonable set of choices to start an app with now. So we're not actually that obsessed with being on the very bleeding edge, if that makes sense. So if I had to recommend somebody how to start an app, if you need to start it today, I would still say Pages Directory. And so that's what we're shipping for the time being. We have a lot of different explorations of trpc and you can use it with the App directory just kind of in client components, or you can also use callers to get stuff in server components and then pipe it down to client components. But the big missing piece and I think the Mutations RFC and what NEXT does with that is going to kind of influence how that goes, but it's basically invalidation across the server boundary because.

00:37:44 - Anthony Campolo

Sounds complicated.

00:37:46 - Christopher Ehrlich

Yeah, yeah. Sachin and Julius from the TRPC team have been doing really amazing work on like digging into the Canary releases of Next and figuring out like what direction it might be going in. But in terms of Create T3 app, we want to ship like a really good developer experience on day one when we upgrade. So that takes priority over being the first people to be on the new stuff.

00:38:12 - Anthony Campolo

Yeah, that makes a lot of sense. And it especially makes sense for Create T3 app to lag behind the rest because first Next has to implement the cutting-edge React features, then tRPC has to figure out how to integrate with Next, and then Create T3 app needs to figure out how to take the new tRPC and integrate it with the rest of the application. So at this point, if they're still working things out in the lower levels of that chain, then at the upper level, Create T3 app is like, just chill, use the old stuff, it still works. There's no reason not to let them work out the guts, and then that stuff is going to rise to the top once it just needs to be implemented in the meta-framework instead of the framework.

00:38:57 - Christopher Ehrlich

Yeah. And it's definitely the biggest question we get right now. So what I would say is, like, we're going to be on it as soon as it makes sense to be on it, which hopefully is a couple of weeks from now.

00:39:08 - Anthony Campolo

Cool. Yeah. Also, stress to people that React Server Components were announced in December of 2020, so you can wait a couple weeks or a month or something to use your App Directory, and you can chill out and stop asking questions about it in the Discord. Okay, let's go ahead and start off our dev server here. This is going to show us our cool little splash page. I like this. It's really clean, it's really simple, and it's got some links to the docs if you need it. I would recommend including a link to the community and maybe a link to the GitHub repo.

00:40:03 - Christopher Ehrlich

I can see that. Although I want, like, I'm always looking at, like, what can I still remove from this? Like, not what can be added. What we found was that we got a lot of questions from people who didn't set up their environment variables or didn't push their Prisma schema. Now at the end, when the command line finishes running, we say all the stuff you need to do to get your app working. Mostly that's mpx, Prisma DB push or whatever it is in pnpm. And then, yeah, the first steps box is kind of really the most important one because that's. That has like all the information you need for database for auth.

00:40:46 - Anthony Campolo

Makes sense. And it's not like you have a community dying for members yet. A lot of people in there already. All right, so this is our initial kind of home page. So there's a lot going on here. I'm going to just delete some stuff to kind of clean this up a little bit. And so. Hello from Jam. Yeah. Then the interesting part of what's happening here is we have this little TRPC query. If we refresh, you'll see very, very quickly, just a little flash of loading as it shows this loading message. And then once the query completes, you do this. Hello, data greeting. Let me show the console here for a second. In the network here, you can see where this is actually running. And this is the type of stuff you'll learn more as you get deeper into trpc. So what is Happening is this is hitting a route which is API forward slash, TRPC forward slash example hello. And then it has all of this junk here at the end which is for batching and then for feeding an input string which is then URL encoded. So this is all the type of stuff that you're never going to do by hand.

00:42:24 - Anthony Campolo

This is a big part of what TRPC is managing for you under the hood, doing all that encoding and whatnot. And then if you look at the preview, you can see there's a result object which has a data object, which has a JSON object, which has a greeting object which has the greeting. I got all that right, right, yes.

00:42:46 - Christopher Ehrlich

And specifically the JSON object comes from super JSON, which is the tool that we use for. For serializing, deserializing the response. So you can also not use that. Then the greeting would be right in the data. But the advantage of having super JSON just on everything is that there's certain JavaScript data types that don't get sent over the wire very nicely. The kind of most common one I would say is dates.

00:43:12 - Anthony Campolo

Real quick. Creator of super JSON.

00:43:15 - Christopher Ehrlich

Oh awesome.

00:43:16 - Anthony Campolo

Simon Knott. He was one of the original maintainers of. So this is where you can see that history I laid out at the beginning. This is where you can see downstream how it started to affect some of these projects. Super JSON was built for blitz. Create t3 app is pretty similar to Blitz. Thus it makes sense the stuff that was built for Blitz might also be useful for Create T3 app.

00:43:34 - Christopher Ehrlich

Yeah, it's an awesome little community of type safe end to end JavaScript where Colin from Zod played a big part in it. I know Blitz also inspired Alex, the not quite creator of trpc because Colin also created like the first prototype of that, but like the person who basically created it in the form of what it is now. And yeah, everybody in like the community of end to end type safety is always influencing each other and copying from each other.

00:44:02 - Anthony Campolo

Yeah, that's great. It's one of the reasons it makes me kind of sad that because Redwood uses GraphQL gets like left out of the conversation because that's also part of the point of Redwood and GraphQL is you get also end to end type safety. And I used to tell people the best thing to do is if you have a JavaScript project that attaches to a Prisma GraphQL kind of backend, you basically get all of the same autocomplete without having to actually write TypeScript. But at this point create T3 app based TypeScript so easy that it really doesn't make any sense not to use it.

00:44:36 - Christopher Ehrlich

But I think Red would also push the idea that you can give people like a Full Stack toolkit and you can give it away for free. And that empowers people to build apps on it.

00:44:47 - Anthony Campolo

Yeah, and that's where they're, they're clearly very, very aligned. And that's why, you know, for, for me, fsjam, the Full Stack jamstack, like the term Full Stack was always the most important, was always the thing I wanted to emphasize why I always had to get into arguments with people about why Next JS was not a Full Stack framework because then they would be all confused. They'd be like, but I need this new Full Stack framework. If I already have a Full Stack framework, it's like, well, because you don't have a Full Stack framework, you've been lied to.

00:45:14 - Christopher Ehrlich

Well, Next JS is a Full Stack framework, but it needs a bit of help on the back end to be nice to use.

00:45:21 - Anthony Campolo

I would say, yeah, I would call maybe one and a half Stack framework.

00:45:29 - Christopher Ehrlich

The way I got into TRPC is I also tried to build like a nice DX Full Stack experience on top of Next JS API routes because it felt really obvious to me that if you have a node server running, like why would you start a second one? You can have the equivalent of like a mono repo, but in a single project and so fast. And you can share types. Of course, the thing that I built wasn't a tenth as good as TRPC is in its current form. And that's like, that's why I jumped off as soon as I saw TRPC and like I was completely sold because I'd seen the difficulties of building this stuff. Like, sharing types is easy, sharing schema is easy, but getting the front end and backend to know about each other is not that easy. And they solve that extremely well.

00:46:15 - Anthony Campolo

Yeah. And I find that is something that really is a story that you'll hear a lot from people who get involved with higher level frameworks and projects is that when they try and build something themselves and they encounter the what is involved with that and then they see a project that has had a lot of people spending a lot of time solving a similar problem and they see all the ways they solved it differently and nicer and they're like, wow, it would have taken me an extra year to do this or 10 years or I would never even have been capable of doing this. And then they're like, okay, well, clearly this is worth investing in that because you can see, see like you're climbing a mountain and it's like all of a sudden you can just like take an escalator halfway to the top and you're like, why would I not take the escalator? It's like, I'm not, not doing this for my health. I'm doing this to get to the top.

00:47:03 - Christopher Ehrlich

Yeah. The greatest one I saw recently is Minku, who is, I'm going to get this wrong, but like project lead or something like that on Angular currently. He published a repo that he worked on four years ago that was basically the like exact same thing. Yeah, Head of product.

00:47:21 - Anthony Campolo

Okay. I should be following him, apparently. Cool. I'll so like check that out.

00:47:27 - Christopher Ehrlich

And he kept his private until very recently. But it just shows that like this is an idea that a lot of people found important.

00:47:34 - Anthony Campolo

Basically what it was called,

00:47:38 - Christopher Ehrlich

it had RPC in the name, I think. So if you search for that, you might be able to find it. Yes, that one.

00:47:46 - Anthony Campolo

Tsrpc.

00:47:49 - Christopher Ehrlich

So I think there's not much of a read me and not much information because it was just something that he hacked on.

00:47:56 - Anthony Campolo

Interesting. And this is using Angular Universal, because Angular Universal was a very early. They used to have a term isometric. They used to call it isometric back in the day when you wanted to have a project with code that can run in the front and the back end. Fascinating. Okay, cool. Yeah, let's not go down that rabbit hole. Let's talk about what's happening here. We saw the Pages folder which had our index, which is our next front end. If you ever use Next before, you'll recognize things like Your_App TSX file and then your API route. This file always confused me. So let's not talk about this one first. Let's talk about the router first. So we have a kind of like root route and it's now actually named root ts. I think it used to be named something else. But this is where we're going to import our TRPC routes, which right now is just the example router. And then this thing right here is like the context, essentially. This is another one that confused me frequently about what was going on in this thing. So we'll talk about that also in a second. Let's just.

00:49:17 - Anthony Campolo

Let's first talk about the route because this is kind of the core of TRPC and Zod is how to write a route like this. So there's a top level example router here and then this breaks down to a couple things. We have a hello route and a get all route. Then we have input and a query. I'll just let you go and start explaining this however you think makes the most sense.

00:49:46 - Christopher Ehrlich

Yeah, sure. Let's start at the most outside level, which is the router. You can think of a router basically as a folder that can contain other routers, so other folders and then procedures which are like files and you can nest them, it doesn't really matter how you nest them. The only thing that changes is what you call them by in the front end.

00:50:07 - Scott Steinlage

Yeah,

00:50:10 - Anthony Campolo

this is the app router. So that's the topmost router level. And then you feed it in these individual files. So we're importing the example router from example, which is nested under the routers folder and then these all get imported into the root, correct?

00:50:28 - Christopher Ehrlich

Yes. The next step is a procedure. If you've ever used Express or Fastify or any other backend, basically then the inner bit, the return, greeting, whatever, that's going to look very familiar. You have your inputs, you do stuff and then you output something. Basically it's not too different from any other API route. The big difference here is this input thing, which has something that looks, I think, kind of weird to people who haven't seen Zod before. But basically the way to think about it I think, is that in traditional sort of express APIs, what you do is you check for all the ways the user submitted data could be wrong and then for each of those you handle it. So you say like if input is not an object, return 400, if the object doesn't have a thing called text, return, you know, return an error if the text is not of type string return an error. And that can get really long and repetitive and very bug prone, I would say. And with the input checking with Zod, you kind of do the opposite. You say like what should it look like? And then Zod takes care of rejecting everything that it doesn't look like, kind of with a nice error message.

00:51:49 - Christopher Ehrlich

And you can customize it, but the default ones are also really good.

00:51:53 - Anthony Campolo

And so for people who want to see something kind of edited here, if we were. So this is what is we're seeing right here. We're seeing hello from trpc, because we're giving it an input of from trpc. So if we change this to say this greeting is, then say this greeting is from trpc. And if we went to the front end and gave it a different greeting. So this is where we're doing this hello, use query. We could change this to from jsjam and then we see a change on that end. So that is kind of your like most basic TRPC101 in terms of how do I fetch something from the back end and then display it on the front front end. And this is how we're type checking it. We're type checking that the input is an object and the object has text of string. And this is what allows us to, if we're making a mistake, like if we try and change the front end here, if we change this to a number, it should give us an error because now it's saying, hey, this, you're trying to give it a number, but it's not assignable to.

00:53:13 - Anthony Campolo

It's assignable to a string. So you need to give it a string. You can't give it a number. So this is that instant kind of feedback of okay, whoops, this needs to be actually something like that.

00:53:25 - Scott Steinlage

Can you, can you explain briefly in a way that how or why this would be beneficial? Just giving it a very low level or high level example what this would break in that process. So like, why would someone say, okay, this needs to be type safe for, you know, text versus, you know, numerical. And then, yeah, what would it, you know, what would it potentially break? Give an example. I guess maybe.

00:53:56 - Christopher Ehrlich

So for example, like say you have a database query that looks for something by an id and you know that the ID has to be like a CUID or UUID or something. You can write a ZOD schema that says this input has to be that. Because what happens otherwise is it's going to depend on like what database you're using or what ORM and what the implementation is. But you know, it's either going to return nothing, it's going to throw an error as soon as you don't clean your input. Like pretty much anything can happen in TypeScript, because here's another Untype JavaScript language.

00:54:31 - Anthony Campolo

Here's another, I think even kind of more relatable example. Imagine you're building a banking app and you're trying to show someone like you have transactions from this month and you want to show people the total of everything you spent this month. And then the output where you're showing the total, you're taking the total of the transactions and adding that with the names of the transactions. Would that make any sense? No, because you can't add a number to a name. So that would lead to a bug and your whole UI would explode or it wouldn't explode and you would just have an error in the output where you're supposed to see the total. So those are the types of mistakes it can catch as well.

00:55:16 - Christopher Ehrlich

Yeah, and the other thing is, it's also not even always about catching mistakes in the moment. It's also like in a bigger app, if you have this endpoint and then you talk to it from five different places in the code base, and then you need to change the endpoint and suddenly, like, how do you know all the places in the front end that this endpoint was talking to? In the case of trpc, if you change your endpoint to return something, for example, that is different from what it was before, so the original stuff isn't there anymore, then you'll get a typescript error in every file that talks to it and tries to use the stuff that doesn't exist anymore. And so if you have a place that uses it incorrectly, then you'll find out at the very latest during your build step, and probably even before that in your editor.

00:56:08 - Anthony Campolo

That makes sense, Scott.

00:56:11 - Scott Steinlage

Yeah, absolutely.

00:56:14 - Anthony Campolo

So what I'm going to do now is just so we can really quickly show some Prisma stuff, I'm going to spin up just a database here on Railway. You already have a setup with SQLite. If you want to, you actually can just spin up a local database, which is pretty nice, but I like to show a whole example with an actual deployed database here. And all you got to do is open up Railway cli, initialize a project, and then add postgres database. Have you ever used Railway, Christopher?

00:56:54 - Christopher Ehrlich

Yes, I have. I think one of my apps is currently running on it.

00:56:58 - Anthony Campolo

Nice. I need to log. Actually, could you stop showing my screen for a second, Scott?

00:57:06 - Scott Steinlage

Yeah, I'm good.

00:57:09 - Christopher Ehrlich

Yeah, Railway is awesome. Their free tier is really generous. They send you nice warnings when you start getting into overages. Just a really pleasant developer experience, I think, for a database or for anything else you want to put on there.

00:57:25 - Anthony Campolo

Yeah, Railway is super duper sweet. What I really like about it is just how quickly you can spin things up with it. Because I do lots of demos, so I'm always needing to just really quickly spin up a database. And then it's just like, here you go, here's your database. One thing I didn't have. Two factor authentic. Gotta be secure. Okay, you can share my screen again. All right, we're live here. Now we have our postgres database. Grab the connection string over here. EMV database URL. And then you gave us, in the very beginning, when we initialized the project, a Command here, PNP PRISMA DB push. It's not quite a database migration. It's just a way to set up the database without running a migration. Whether you want to do a database migration or not is a philosophical question I cannot answer for you.

00:59:05 - Christopher Ehrlich

Yeah, it's a difficult one. I like pushing the schema because it feels more declarative to me, but I know there's also a lot of people who are still into migrations.

00:59:17 - Anthony Campolo

Yeah, yeah.

00:59:18 - Christopher Ehrlich

I've just never had anything with problems with them.

00:59:22 - Anthony Campolo

Makes sense. Yeah. Okay, so I think if we just do. Yes, this is the. Actually, I think. I know. Can we create this through Prisma Studio, like a little example? Because the way you have your schema set up, we just have this example model which just has an ID created at an updated at. So let's try this. Okay, there we go. So if we do that, we now see we have one of these. So all I did to do that was I ran PNPM Prisma Studio. Prisma Studio has some weird bugs. I wouldn't recommend relying on it too much, but sometimes it's good in a clutch for things like this. So now we can see this is in our database. If we go back and look at what was happening in our example route, we had the hello query. But then we also have this get all query. If we do API GRPC example. I think that that didn't do it. See, I was trying to just basically take this and then do the get all query. You get me, Christopher?

01:01:00 - Christopher Ehrlich

Yes. Is it maybe that your dev server is still talking to an old database and you haven't restarted it?

01:01:08 - Anthony Campolo

You got it, Paul? Yeah. When you're. Anytime you add environment variables, it loses the plot.

01:01:19 - Scott Steinlage

Good to know.

01:01:22 - Christopher Ehrlich

I think now you're on dot. Hello, get all.

01:01:26 - Anthony Campolo

That's right. So it should be just dot get all. Okay, that's exactly what we want. So now we see this is the actually heading our database and showing us through our Prisma query. So what this is doing is this is doing Prisma example find many. So that's a Prisma syntax thing to where you can just dump out a list of examples. So if we were to go back to Prisma Studio and create. Okay, that's still running good. Create a second example. Then it'll give us a list of these now. So we'll do that now we'll have two of these and then refresh here, make sure this is still running. And then now we see we got both examples being displayed. That's the first id. That's the second id. Cool. So that is kind of our like full stack project. Since we're running short on time, we won't show mutations and all of that. But yeah, this is a pretty good kind of hello world example. Do you have other questions, Scott? Now you have seen the whole end to end thing.

01:03:09 - Scott Steinlage

Yeah, I mean there was just, I mean it's just gonna, you know, being able to know all the prompts, you know, to go to the command prompts, you know, to do everything. Yeah, but yeah, it's, it's.

01:03:25 - Anthony Campolo

Yeah, that's where the docs. So if you're just looking for things like that, like commands and things, this is, I think maybe one of the weaknesses of the current docs right now is that they link you out to other docs for the most part. So if you want to know how to do any of those Prisma commands. Right. I was showing you, you won't necessarily find those in the docs. You have to go to the Prisma docs and then to find the cli. And this is also why I would recommend instead of necessarily like use the docs if you have questions, but you should first follow along with one of the tutorials that was mentioned at the top that we'll link to, like Nexcel's tutorial or even my tutorial, because that'll include all of the commands you need along the way. But for Prisma stuff, you can find that here, just search for the Prisma cli.

01:04:21 - Scott Steinlage

Yeah, I was just thinking about what

01:04:23 - Anthony Campolo

Christopher said earlier about very slow on my Internet, but you get the idea.

01:04:27 - Scott Steinlage

Yeah, I was just thinking about what Christopher said earlier about not necessarily remembering a ton of stuff and having to. Buddy's brain can say like, oh, well, I know that I need to go here to find that information and utilize it. Right. So, you know, very, very similar in that aspect.

01:04:48 - Christopher Ehrlich

And if you go on the docs, there's a page called I think getting Started and that's going to have probably 80, 90% of what you need in the first hour or two of starting your app. So like how to set up your database, how to set up your auth, how to get like to the point of a fully working app. And then yeah, we, we. It's. It's kind of a difficult line to walk for us of how much we want to replicate the docs of external projects because we are by definition always going to be behind them, basically, like whatever they change, we need to figure that out as well. And also hopefully they're going to do a better Job of explaining it than us, basically. So where we try to write docs is like where it's overlap between more than one package or where it's like specific to what we're doing with create T3 up or with the T3 stack, and then we defer as much as possible outside. It's also less work.

01:05:50 - Scott Steinlage

Yeah, I mean, that makes sense. Absolutely.

01:05:53 - Anthony Campolo

What was the page? What was the page you said It's.

01:05:57 - Christopher Ehrlich

I think it's getting started.

01:05:58 - Anthony Campolo

Oh yeah, yeah.

01:06:02 - Scott Steinlage

You had your windows expanded before.

01:06:04 - Anthony Campolo

I don't. There is no. There's first steps.

01:06:07 - Christopher Ehrlich

Oh yeah, first steps. Right,

01:06:11 - Anthony Campolo

yeah. So there you have your Prisma DB Push command. It tells you what to do with your environment variables, but use PNPM instead of nsx. Exactly. Yeah. Yeah.

01:06:30 - Scott Steinlage

Which. Yeah, you were showing that.

01:06:33 - Anthony Campolo

Cool. Are there other things

01:06:37 - Scott Steinlage

you were showing that the command when you first loaded it up and you had that. You were able to scroll up and see the command and the DB push command.

01:06:52 - Anthony Campolo

Yeah, this it gives you when you first generate the project.

01:06:56 - Scott Steinlage

Right, exactly.

01:06:57 - Anthony Campolo

So my error and I just take it sweet time right now. But what I'm going to do is spin up a fresh project that does not use a database so that we can deploy that to fly without having to worry about managing that environment variable. But while we're doing that, are there other things you want to talk about, Chris, that weren't covered within that demo

01:07:19 - Christopher Ehrlich

in terms of Creative3 app? I don't think so. I think the best way to get started with it is just to initialize an app and, you know, have a look around the docs and just start typing away, basically. And yeah, I think if you run into any problems with it, we have an amazing discord full of people who are always happy to help with pretty much anything.

01:07:47 - Anthony Campolo

Yeah. Big fan of the community and the discord. I will just give one piece of caution, which is that the discord itself kind of doubles as Theo's. Actually, he stopped sharing my screen. Again, real quick. The. The community kind of doubles as both Theo's community and the Create T3 app community. And Theo has a kind of philosophical belief that he does not want beginners in his community, or he at least does not want them to be asking beginner level questions in his community. So if you show up and just like find the first channel and start asking random questions about how to set your project up, you will get scolded and possibly banned. So just be aware of that. There is a specific forum for asking questions. So just make sure you read the rules and you have know what the right, the right etiquette is. It's not the. Yeah, go ahead.

01:08:38 - Scott Steinlage

I'll just say this. You know, I feel that's true with like anywhere you go to get information, right? Whatever the forum is, there's always, for the most part, especially when you're a beginner, you're asking questions that hundred other people or a thousand or a million other people have asked and the same thing goes on like Stack overflow, right? When you go to Stack Overflow, if you're asking a bunch of questions that have already been answered in other forums,

01:09:07 - Anthony Campolo

Then this is also why Stack Overflow got a reputation as not being a very nice place to go. And I don't think I've ever asked questions on there with the same reputation as Stack Overflow power users.

01:09:21 - Christopher Ehrlich

I think it's, it's a fine line to walk. Like if, if you're new, like you know, you can say to people, oh, you should have searched for this. But maybe you don't even know what words to type in the search because you don't even know like what category of thing you want to find out about. Basically true. And I think that the Discord is very open to that. What it's very strict on is like we have a questions place so please post your questions there. Don't clog up other channels which like when you have. I think we're at over 10,000 users now, like some of that kind of becomes necessary like a bit of the, like policing that the channels are being used correctly. But I would say it's actually beginner friendlier than maybe the way Theo talks about it would make it seem.

01:10:11 - Anthony Campolo

Yeah, no, I think that's true. And it's just like people who do show up and don't read the welcome messages, there's like a very kind of immediate response to it. So that can seem harsh, but it's just more like, you know, they're managing a lot of incoming people and they kind of have like a system. So if you show up and you ask questions the wrong place and you get yelled at, like trying to take it personally and just know like they're managing a lot of. But if you are a beginner, there is still a place for you. It's just kind of try and be aware of what the vibe is. Just because my whole computer is running super duper slow right now. I'm just going to show people that I already have a version that was pre deployed and literally the only command I ran is you run fly launch. And then the cli will walk you through page picking a region closest to you and it will ask you whether you want to deploy it or not. If you don't deploy it, if you choose no, then you'll type Fly Deploy to do a separate deploy step.

01:11:12 - Anthony Campolo

If you do say yes, then it will detect that you're using a Next.js project and just deploy it for you. There's going to be extra steps if you have environment variables and things like that, so it's not always going to be that simple. But if you want to just take this hello page and throw it on, you can do that. And this is the link right there: jsjm-ct3atest.fly.dev. That's awesome to know it's that simple.

01:11:38 - Christopher Ehrlich

Is that like, does Fly have their own CLI that you download from Homebrew or something like that? Or how does it work?

01:11:45 - Anthony Campolo

Yes. Yeah. Fly has their own CLI that you'll download. Yeah. Yeah.

01:11:51 - Christopher Ehrlich

I think it's going to be great to be on more services or to have documentation on how to be on more services. We love Vercel, but I think the best case you can make for Vercel is if there is an off-ramp as well, if that makes sense. So it's great to be on five-dollar VPS options, Fly, Flightcontrol, like anywhere we can be, we want to be there.

01:12:15 - Anthony Campolo

Yeah, for sure. So we'll definitely get a sweet [unclear] integration going soon. Cool. Yeah, this is super fun. I think this is probably good for wrapping up. People can go check out Create T3GG to learn more about the project. I always ask people to share their own socials. How would you verbally share your own socials with people? Quadruple C's, J's, and E's.

01:12:50 - Christopher Ehrlich

Yeah, it's all quadruples. When I made this, I didn't realize that people were going to follow me on Twitter. Like I just use it for reading Twitter for a couple of years and then like I replied to a few people and suddenly I had followers. So maybe this needs to be changed at some point.

01:13:05 - Anthony Campolo

Now that I know it's four, it's four letters of each. That actually helps. I had never counted them, so I didn't realize that.

01:13:13 - Christopher Ehrlich

But yeah, I would say that's the main place to find me. I also have a YouTube channel which is the same username. So four times the letter C, four times the letter J, four times the letter E. Yes.

01:13:24 - Scott Steinlage

If you're listening to this audio: [unclear].

01:13:33 - Christopher Ehrlich

Yes, exactly. That's exactly how it's pronounced. Other places you can find me Discord, I mostly hang out on the T3 Discord, although I'm also on the Solid Discord, the astro discord, the Tanstack discord, whenever, like, I have time to be on those places. And I think that's mostly it.

01:13:56 - Scott Steinlage

Awesome. You know, one thing I want to bring up really quick is something we had mentioned earlier and I just, just, it just clicked again when we were talking about not knowing what to search, right? Like, not knowing, like, hey, what do I, what am I even looking for? Right. And so therefore you need to like, reach out to somebody that way, right? As a beginner or someone who's new to something, period, that you're learning. And this is the huge benefit of ChatGPT, I'm telling you. Like, when you're working with ChatGPT and it has the context of everything you've done with it over the last four or five hours in that conversation, it knows when you ask a question about something, what you're referencing. Whereas if you were working before ChatGPT was a thing and you were doing this on your own, you would have this new question that comes up, but there would be no context when you go to search it in Google or Stack Overflow or anything. So Chat GPT has the context and it points you and it knows. It's like, oh, yeah, that is X. You need to do this now.

01:15:18 - Scott Steinlage

You need to go here now. You need. It's, it's amazing. And it just. The other thing I'm thinking about is how all these other frameworks and things are using like ChatGPT to be able to search their docs and things like that. Right? That is going to be the ultimate thing now that people can potentially. This is my thought. I don't know how this would work, but use that service that those frameworks are using or tools or whatever it is to build out their app, right? And, and give it the context that it. So that it has the context. Like you're, you're almost like writing a doc as you're building this out with Chat GPT. And then it's, it's, it's, it knows the context so that when you go to ask it a question, it'll automatically bring up that, that part in the document. You know, I'm saying without having to know exactly what to search for. It's crazy. Like, I don't know. I think there's something there.

01:16:18 - Christopher Ehrlich

Yeah, true. I think there's, there's been sort of chat bots for your code base and chatbots for the docs. But to give it like the context of both could be really exciting.

01:16:29 - Scott Steinlage

Super powerful. Yeah, because it already is powerful, even just by itself.

01:16:38 - Anthony Campolo

Cool. Yeah. Some project someone posted about had to hook up ChatGPT to a git repo and ask questions about your repo. So that could give it full context if you have docs in the repo and a project or something like that. I think most of those kinds of tools are probably still early days, and eventually Microsoft is going to build all that stuff with the power of OpenAI as part of them. So I would say probably hang tight, and eventually we're just going to be able to talk to our codebase. This is going to be really awesome.

01:17:12 - Scott Steinlage

Yeah.

01:17:14 - Christopher Ehrlich

And I still think there's going to be a time and place for human instruction or for human guidance, but most open source projects are currently in a place where the docs are not very good. And so being able to kind of talk to the project without somebody needing to write like kind of the cookie cutter documentation is going to be really nice.

01:17:36 - Anthony Campolo

Yeah, definitely. And just like helping with, just helping the bandwidth of the maintainers, because that's another problem was that the maintainers don't have to sit down with every single individual person and walk them through their own errors.

01:17:48 - Christopher Ehrlich

Yeah, that's quite exciting. And I think when you're at the start of an open source project, it's fun to talk people through their issues because then you realize how your APIs maybe could be better, more intuitive, how could you document it better, how can you lead people to the right places in documentation? So I think there's a lot of value in being there actively as a maintainer, but at the same time having a tool where people can sort of fix their own problems is super awesome.

01:18:21 - Scott Steinlage

Maintainer GP for sure.

01:18:27 - Christopher Ehrlich

Cool.

01:18:27 - Anthony Campolo

Awesome. Well, I think we can close it out here. This episode, when you'll see it, will probably be somewhere around mid-April. So if you're seeing this and want to get involved or want to learn more about the project, just reach out to these links and resources we provided. Everything will be in the show notes down there somewhere. Thanks so much, Christopher, for joining us. This was a ton of fun. Thank you for all the work you've done on tRPC and Create T3 app and being involved in the community and all that stuff. I think you're going to have a very sweet DevRel job probably very soon, if that's something you're interested in pursuing.

01:19:08 - Christopher Ehrlich

Yeah, definitely. And thanks a lot for having me. And also thanks to the entire tRPC team and everybody who contributes there, and also the entire Create T3 app team and everyone who's involved there. Create T3 app has, at this point, over 200 contributors, and if it was only the core team, we wouldn't be much of a project at this point. So it really is all of the other people who drive it.

01:19:34 - Scott Steinlage

Awesome. Thanks, man, this was great. Appreciate everybody and we'll see y' all

01:19:41 - Anthony Campolo

on the next one.

01:19:44 - Christopher Ehrlich

See you in the next one.

01:19:46 - Anthony Campolo

Peace.