Building a MODERN Full Stack App for FREE w/ NextJS 12, Typescript, Prisma and more - T3 Stack
Вставка
- Опубліковано 15 лип 2024
- I have an UPDATED VERSION OF THIS TUTORIAL NOW • T3 Stack Tutorial - FR...
Which Pokemon is roundest??? Today we will find out! #t3stack #fullstack #webdevelopment
Theo builds a full stack web app using the T3 Stack as detailed on init.tips
If you're interested in Next.js, React, TypeScript, Prisma, tRPC, PlanetScale + MySQL, and Tailwind, all deployed on Vercel, you're in the right place :)
The services we used are...
Planetscale - planetscale.com/?ref=theo
Vercel - vercel.com/?ref=theo
Check out the final product at roundest.t3.gg
Github repo: github.com/TheoBr/roundest-mon
Follow me on twitter for more web dev BS: / t3dotgg
Rough timestamps:
0:00 - Intro & planning in Excalidraw
4:15 - Initializing with init.tips
5:00 - Tailwind setup
17:15 - API setup with tRPC
27:45 - Random pokemon endpoint
39:00 - SSR is hard
1:04:00 - PlanetScale and Prisma setup
1:26:00 - Image optimization and caching with `@next/image`
1:38:50 - Cache pokemon from PokeAPI in our db
1:43:00 - Relations are hard (Prisma fails)
1:58:00 - Backfilling all pokemon into db
2:11:00 - Results page
2:35:40 - Typescript saves us - Наука та технологія
CHECK OUT THE NEW VERSION OF THIS TUTORIAL ua-cam.com/video/YkOSUVzOAA4/v-deo.html
That is awesome! Never heard about tRPC and Zod, but definitely gonna try it out :) thanks for a great video!
This is probably my favourite full stack tutorial on UA-cam
Lovely tutorial. Thank you Theo :)!
Lol so happy i stumbled across this video. Just in time i needed something like prisma/planetscale. From 0 to 100 (CRUD to DB) in a few hours
Thanks for the vid, nice whirlwind intro to the techs! I'm going to play with this stack some on a toy project :)
Also I think you can achieve your desired avoiding of the loading state between votes by using react-query's keepPreviousData option, which will leave the data behind from the last call to useQuery even if the query key changes.
This is exactly what I was looking for!
very nice of Adam Scott to do a tutorial for us
Great video, keep em coming!
Came for the content. Subbed for the hair 😄Jokes apart. Great content man. Keep it up
I'm happy the UA-cam algorithm suggested me this video. Awesome content Theo, I was thinking on a personal project and this video helps me a lot.
I really miss talking at the office.
dayum bro, hopefully i can reach your level of workflow someday, love this video.
More videos like this. Love your work flow.
holy shit your cat is so cute! also great video by the way really helpful. I used this as a reference to bootstrap my first next app with trpc :) thanks a lot!
you're so inspirational and I love you
Loved your content! +1 sub
Loved the hair force 1 style btw
finally starting a new project and dipping into t3 stack, so far so good, but it is very different than the previous reactjs app I worked on also different from vuejs, svelvekit I worked on as well :P
Thanks for the awesome video, subbed.
I just watched the whole thing and went to the page results. Very interesting to watch the build and love that Zapdos is currently roundest!
DUDE, I'm pretty sure I was interviewed by you once lol
And how’d it go? 😂
@@MichaelMerritt I probably bombed lol
@@MichaelMerritt I probably bombed lol
imagine how good that app woudl be if he could see the screen without the hair in the way!!!
bless you, this is awesome.
I love these videos. As a midlevel dev with about 4 years of experience in professional game dev trying to pivot to web and mobile development, seeing someone at a senior level work in real time and really getting to see their work flow working from scratch is the medicine for the anxiety of scaling the mountain of exposing yourself to completely new tech. Hoping I can scale the mountain as fluidly as you in the coming months.
Working from scratch is a developers wet dream. Real world we get thrown in a mountain of files we know nothing about and some dude from 2 years ago scaffolded a fart of a codebase with poor conventions. All the original devs are gone except 1 guy who is in meetings 7 out of 8 hrs a day. You waited a week to get someone you never even met to approve your access to the code base so you can clone it. Then you go to install the dependencies off directions written on essentially a bathroom wall. Your npm install blew up 100 times and you forgot how many times you deleted node_modules. Have you ate? Oh you have to be in a meeting in 10 mins. Did you put deodorant on today?
@@trent9060 too accurate
@@trent9060 Busy - On A Meeting
I’m stealing this to make my own version for employment take home challenges.
2:07:20. "good thing I checked that!" was grinning after watching theo talk w/ prime about testing
With type safety and database nulls, I'd love to see a focused topic on database "typed" nulls (e.g.: numbers, booleans) and javascript nulls. (where the typing behavior is different).
Nicely done
I love this stack
Nice tutorial!
Dude this is legit! I'm a self-taught full-stack dev, and I've only limited exposure to Typescript. In fact, currently, I'm working more as a data engineer because I wanted a break from front-end dev work but seeing this is very inspiring. Keep the content coming, very fun and educational to see you work!
Hey, I know your comment is 7 months old already - Are there any changes with your work as a data engineer? And how would I start learning about it? Like I am assuming not just SQL or Python, but also another proper programming language right?
Sweet man. Love to hear the enthusiasm!
THEO, can you PLEASEEE do another one on making something else? I have benefited SO much by just watching this video today. I am so broke, desperate for a job, and I had so much fun watching the video today. I thank you for making this content. Please make one making a REST API and another Front-End application!
job yet ???
Gracias Mister Theo por compartir conocimiento....saludos de los andes peruanos
Nuxtjs is my new favorite
i learn so much from your videos - can u make one for an actuall website? 2-3 pages of different layout and a blog?
is it too much to make a tutorial on? and how about next13 ?
Thank you for this video. Wonder if you could also use Remult?
That was awesome!
Where was this originally streamed? And where can I find more like it?
Streamed on twitch but I go live here as well! I do a show every wednesday at 3pm pst, usually I have guests but I do code streams sometimes too!
56:25
"It was at this moment when Theo realized that he has made a giant spaghetti mess."
Fantastic video and a truly sick stack. Curious what your thoughts are on Elixir/Phoenix?
Had a lot of fun with Elixir and Phoenix! Shipped both for internal tools at twitch. As fun as they are, I’ve found that Elixir fails to scale as teams and codebases grow :(
I could theorize for years as to why. Gut feel is leaning towards strongly typed languages being essential at scale.
At least I’ve managed to carry a lot of the functional design approaches I learned in Elixir land as I went back to the web world :)
The scariest part about coming out of a coma are all the new JS frameworks and tooling that you have to learn in order to stay relevant.
You don’t have to learn much of this to be relevant! A hint of React can get you really far :)
I love all the ways things are changing and try to stay on top. Doesn’t mean you have to as well! Take the parts that look interesting and go build some stuff 🙏
I thought I was watching twilight and that Edward has started doing programming tutorials.
searched down this video. After hearing all the hype, (well deserved), I wanted a good walkthrough like this. BTW, is Voltorb or Electrode automatically "roundest"?
theo is like Hank Green for programming
If you need an editor in the future I would love the opportunity. Thanks for making all the content feel like a sponge right now.
Idez has me super super covered but you’re high on the list if I ever need more 🙏 hit me on discord if you haven’t already
There is a question confused me so long time
I need to use scalar list with my model, but the error log out "The current connector does not support lists of primitive types"
How can I fixed that, please?
Maybe I need to create another single model like : model StringLike { name String } or something?
Hi theo! Very interesting video! I have one question: method getRandomPokemon calls itself recursively if it generates the 'notThisOne' index. However, looks like it can generate 'notThisOne' index over and over again and overflow the stack. But looks like the app works fine. How is it possible?
probability of that happening is extremely small, 1/MAX_DEX entries for any recursive call, so getting 5 calls on the stats is that factor to the fifth power
After checking projects with such stack, I'm really starting to wonder about the future of backend. With such isomorphic architecture: Next/Nuxt + Prisma/Firebase/Supabase, are regular backends, (like on Express or Django) really needed now? It seems to me if this SSR-heavy stack gains more adoption, backenders will just need to work inside the 'api' folder of a frontend repo...
I'm a frontend dev myself, so I'm genuinely curious, what's really an upside to have a dedicated backend anymore for small-medium sized apps?
Favorite question so far!
I’m of the belief that traditional infra-heavy backend dev will no longer be the default path for building applications. There are definitely use cases where a traditional backend server is helpful, but I’ve found that the majority of applications are easier to build and maintain using the new providers and serverless patterns
If you’re a front end dev looking to expand more into full stack, now is a fantastic time to do it!!!
@@t3dotgg Now Do one with remix-run
@ouss Lol, I did a poll on Twitter and people wanted me to use Solid more so I did a port to that :) Video is uploading now!
For this type of super simple apps, probably not. But the traditional backend is even stronger now than ever before, when it comes to load heavy applications.
This question is all opinion based. Any predominantly front end dev will tell you that a traditional backend isn’t really needed. Any predominantly backend dev will tell you about how incredibly powerful a dedicated backend can be. Write what’s right for your app. As a predominantly backend engineer myself, I do almost of my app logic on the backend. A frontend is just a pretty face pasted over the top of the powerful backend. In fact, a lot of my apps I’ve gotten rid of traditional frontends altogether and am connecting a backend to something like a discord bot. You may ask, is a traditional frontend even needed anymore? ;)
I don't wanna die a webdev
For big enterprise projects what is the better library to manage state? It seems like react query and SSR limit the needs of Redux or Context to manage state.
It doesn’t limit, it encourages you not to use them at all. Redux is completely out of the question.
2:07:50 how come that isn't a syntax error? I have never seen Prisma before, but if it doesn't even have proper typescript support with autogenerated types (like TRPC does for example) then it kind of sucks.
I feel like there was a huge over sight here clearly it's voltorb and electrode
What is your visual studio code theme?
tRPC looks cool but i really don't like the double rendering i'd rather have separate *.client.ts and *.server.ts files similar to what Shopify is doing with Hydrogen/Vite. Data i need to stop "loading..." flashes loads on root container of component and anything that needs to refetch data or recalculate data is on the client component.
I'm getting a hydration error after creating the getRandomPokemon function. I don't really understand the issue but it seems to be that the client has different values for the first and second IDs than the server does? Anyone run into this issue after 32:20?
Did you find anything?
useState + useEffect will do the trick for you
theres a fix in another comment by Rustic Bear, incase anyone runs into this later
45:38 to capitalize you could use css
Nice hair style man...
Why do you need an SSR for an web app? I always used to think that SSR is used only for SEO. isn't it?
Just skimmed the video, not sure did you mention BlitzJS?
It's a framework that pre-installs and configures NextJS, Prisma and Type script. You can install recipe of Tailwind CSS or Chakra-UI. You also can generate Prisma model, page and Query/Mutation in one Blitz command line which saves a lot of time of setting things up.
I’m friendly with Brandon lol. The T3 Stack is “unbundled Blitz” to an extent - I prefer adding the pieces as you need them. For example here we didn’t need auth, Blitz pushes auth into all their templates pretty hard.
Blitz is also moving towards a more modular approach, and is working with tRPC to possibly share the data piping layer between the two solutions
@@t3dotgg Lol, I just preached to the choir!
I've been using prisma for over a year and have felt many of its growing pains. What are your overall thoughts on it? I love it but sometimes gotta deal with horrendous issues
I’ve been loving it so far. Down to elaborate on some issues you’ve had?
@@t3dotgg It's hard to recall specific issues, but some where I lost a lot of my time come to mind. Since Prisma is relatively young, trying to implement complex functionality with Prisma occasionally runs to a point where the thing I need from Prisma doesn't/didn't exist at the time that I needed it. However, one reason I love Prisma, more than a few times this has happened, the thing I needed got released shortly after.
@@t3dotgg For me, I dropped Prisma after attempting to get a quasi polymorphic table where I have several different resource models that can have tags.
I wanted to have something like a relational table for tag resources which then relates a specific tag(s) to multiple different resources and relate them programmatically (since you cannot have multiple foreign keys in one field for different resources).
With Prisma, I can't do this unfortunately. I have to create a table with the tagId column and an additional id column for each resource type that I have.
Another thing that bothers me (but does not impact my designs in any way, it was just annoying) is the fact that when creating a relationship in Prisma, it will always attempt to create a relational field on the related table so that you can programmatically query that field. When designing my schema, I sometimes wanted to only have a simple one-way relation and didn't want to have the other field since it was never going to be used. However, prisma forces this design which bothers me.
There is also the fact that there are some field types that it doesn't support like inet and interval fields in postgresql which I use.
You also cannot create triggers easily... You can create them by doing something like this stackoverflow.com/questions/68909400/prisma-model-generation but it's not very feasible imo.
There were other scenarios that I found hard to use prisma but I don't remember them now.
Now I use KnexJS with ObjectionJS and I love every bit of it!
@@RjBurger I bet you heard someone else say this and shaped your opinion.
@@kiranojha8811 This is all from me after 2 years of using Prisma
I didn't quite get why you made a "shadow" branch in PlanetScale, how it useful? I'm midway thru, so maybe you will clarify it after, if not I would like to know, thanks!
Shadow dbs are more for Prisma than Planetscale, it's a common practice for keeping track of data during migrations. You can read more about it in the Prisma docs www.prisma.io/docs/concepts/components/prisma-migrate/shadow-database
When I used const [first, second] = getOptionsForVote(), it causes a hydration error when i put {first} and {second} in the return code. Anyone have this issue?
I have the exact same issue as you
What is the CSS for your hair?
Nice content! I can give you the contact of a good hairdresser 💇
I do not know what mistake i have done but im getting a text content does not match server-rendered HTML runtime error in the get random pokemon endpoint, Im completly new to the nextjs can somebody help with this
The error is generated because the random data created on the server does not match the random data created on the client (getOptionsForVote)
My recommendation is to initialize the ids with useState, and useEffect to setIds only on the client
something like this
const [ids, setIds] = useState([0, 0]);
useEffect(() => {
setIds(getOptionsForVote());
}, []);
Hello! What did you do at 1:22:50 with the password? You said you wouldn't screen share but didn't say where you place that password afterword or the steps. May I get some help with this?
I put it in the Vercel "environment variables" page in the project settings. You have to set the DATABASE_URL environment variable so the Vercel deployment knows how to connect to DB
The password being copied is URL from "Node.js MySQL" option under "Connect" in the Planetscale web UI
I was there when he made this.
prove it
It has to be Voltorb right?
After seeing his hair
I've wasted 1 hour watching satisfying haircut videos
electrode and voltorb are literally balls, can't get more round than that
what vscode theme are you using?
The Poimandres theme! Love it to death
Pinning this so I don't get asked anymore
Lmao… People are still asking this question till today, 😂
@@t3dotgg you should add it to every video description at this point.
maybe have a big banner that spans your whole stream lol
do not need styled since you work with tailwindcss and no styled css,webgl render or someth
Voltorb is currently 2nd place, I think you need to hardcode Voltorb into first place, it's literally the roundest pokemon WHO'S VOTING AGAINST??!!😂😂
welp the current pokemon in first place is Zapdos, while Voltorb is in freaking 5th place.
where can i buy your shirt?
1:20:26 He just got in to vote 😅
Gotta cache em’ all
Your terminal is awesome. How to set up ?
Vanilla MacOS terminal + vanilla oh-my-tmux. Colors are snazzy-operator I think?
this guy made me realize I'm not doing enough & I can do better
did you do better, son?
I feel like such a caveman doing Django/Flask development watching this right now.
caveman find rock. caveman bash neighbor caveman brain in. caveman live happy life.
The WTF’s Per Second here is amazing hahahaha it’s barely noticeable….
I've been developing for 10 years + and still google the most basic things because I don't remember it all.
1:20:20 cat masseur
Voltorb is the roundest pokemon. Saved you 3 hours
I got this error when trying to implement what you are doing at 9:30 "styles/globals.css The `-bg-gray-800` class does not exist. If `-bg-gray-800` is a custom class, make sure it is defined within a `@layer` directive."
Anyone know what my issue might be?
"-bg-gray- 800" does not start with a "- " its just "bg-gray- 800"
Make sure you have the @tailwind directives in the CSS file you’re applying classes in
@@t3dotgg Thank you so much!
@@ahmeddakir5000 Thank you so much!
Are we allowed to use this tutorial code and put it on our resume projects for job hunting?
Sorry semi new to coding and wanted to recreate this voting app following this video but with anime characters. Thanks.
@@charlesaleg3 if it's not a 1-to-1 copy, why not? if it is a 1-to-1 copy then...... ???????
The funniest part is the current "Roundest pokemon"
I'm trying to get deeper into front/full-stack development and even following tutorial is a problem considering now there are new version, new standars, and this is not even an old one, it's < 1 year old vid. Man, Js environment need a regulation
Thanks for not using create-t3. Its gud coz non create-t3 people can follow along cuz u did the initial manual copy pasting and config stuff by yourself that non create-t3 have to do first
Dude you look like xqc
he speaks like him too when describing concepts and answering questions sadly
I’m trying to get like you
This dude is known as Emo programmer Adam Scott in my house.
I'm kinda new to Prisma, but I'm wondering is the prisma migration workflow is good enough compared to others? Like Lucid from adonisjs for example and others like typeorm etc
I've been using Prisma for my latest client btw, but not using it so much in terms of the migration. I have more experience in terms of that with Lucid and Typeorm
TypeORM had some major bugs that could cause data to be lost. So I've avoided it.
1:20:15 Oops! Buddy alert!
vscode theme??
what vscode theme is that sir?
doo doo poo poo theme I think
obviously snorlax
How tf is Dialga number 2
your camera man
This is just FaceMash for Pokemon? 😳
Do you have a left eye?
No I lost it in the Red Wedding when Angular 2 dropped
I missed the point of having a Shadow db?
It'll make sure that there is never a drift between your true database and the database created from sequentially running your entire migration history.
1:03:52
Dialga being ranked 2. Weirdge