Summary of Building a MODERN Full Stack App for FREE w/ NextJS 12, Typescript, Prisma and more - T3 Stack

This is an AI generated summary. There may be inaccuracies.
Summarize another video · Purchase summarize.tech Premium

00:00:00 - 01:00:00

This video demonstrates how to build a modern full stack web application using NextJS 12, Typescript, Prisma, and Vircell. The author discusses how to set up the various programming languages and frameworks, how to use Tailwind to set the background and text color of the app, and how to deploy the app to a server.

00:00:00 The author is building an app to answer a question about Pokémon roundness, and they will be using a number of different programming languages and frameworks.
00:05:00 The video demonstrates how to build a modern full stack app using NextJS 12, Typescript, Prisma, and Tailwindcss. The author shows how to set up NextJS, Typescript, Prisma, and Tailwindcss, and how to use Tailwind to set the background and text color of the app. Finally, the author commits and pushes the changes to GitHub.
00:10:00 In this video, the presenter discusses how they built a modern full stack app using NextJS 12, Typescript, Prisma, and more. They explain that they started by sketching out the primary UI on their page and then proceeded to code the necessary state and user interface components. They also show how they deployed the app to a server, and how they can use the built-in vircell deployer to instantly deploy the app to various devices.
00:15:00 In this video, the presenter discusses the use of nextJS 12, Typescript, Prisma, and trpc to build a modern full stack app. They highlight how trpc makes building a complex app faster, and how it allows for easy access to functions on the front end.
00:20:00 The video discusses how to build a modern full stack app using nextjs 12, typescript, prisma and more. The main focus is on the trpc api, which allows for a type-safe contract between the front and back end code.
00:25:00 In this video, the presenter demonstrates how to build a modern full stack app using NextJS 12, Typescript, Prisma, and more. They discuss how to create a get random pokemon helper function that selects two random pokemon. They then discuss how to use the pokemon number equals function to select a random number from a range.
00:30:00 The video discusses building a modern full stack application using NextJS 12, Typescript, Prisma, and more. The author shows how to get the pokemon data from a pokemon API and uses it in a vote function. The function returns the first and second id of the pokemon, which can be used to retrieve the data for that pokemon from a different API.
00:35:00 The video demonstrates how to build a modern full stack app using NextJS 12, TypeScript, Prisma, and more. The user has issues with the app crashing, but offers some thoughts on why it happened.
00:40:00 The video demonstrates how to build a full stack app using NextJS 12, Typescript, Prisma, and more. The main problem the presenter is encountering is that the use state runs on both the server and the client, resulting in different default values. A quick fix is to export and get server side props, but the presenter has better ideas for how to fix the issue later. In the meantime, the presenter demonstrates how to load and fetch two random pokemon using data from the database.
00:45:00 The presenter discusses how they built a modern full stack app using NextJS 12, Typescript, Prisma, and more. They say that typescript and prisma make it easy to work with large amounts of data, and that using trpc for type safety guarantees correctness even in the backend.
00:50:00 This video demonstrates how to build a modern full stack application using NextJS 12, Typescript, Prisma, and more. The author shows how to create a button and update it to use the correct url.
00:55:00 The author discusses how to build a full stack web application using NextJS 12, Typescript, Prisma, and Vircell. He notes that it is easier with something like Trpc over KevChorus. He also discusses how to generate a URL for a page on a website.

01:00:00 - 02:00:00

This video demonstrates how to build a modern full stack app using NextJS 12, Typescript, Prisma, and more. The author walks through some of the steps required to complete the project, including setting up Prisma and NextJS, importing the necessary packages, and creating a mutation.

01:00:00 In this video, the author shows how to build a full stack app using NextJS 12, Typescript, Prisma, and more. He notes that while there may be a performance difference between reactive and non-reactive code, it is not a significant one. He also mentions that type definitions do not affect performance. The author then shows how to load data from an API and persist votes.
01:05:00 The author demonstrates how to build a modern full stack app using NextJS 12, Typescript, Prisma, and MySQL. He notes that it can be difficult to get rate limited on modern apps, and that he would rather focus on persisting the values obtained from votes. He starts by setting up Prisma and NextJS, and then proceeds to create a database and model. He then sets up a shadow region for tracking votes between pokemon. Finally, he demonstrates how to use voted forward and voted against to keep track of pokemon in a vote.
01:10:00 This video demonstrates how to build a full stack app using NextJS 12, Typescript, Prisma, and more. The app includes a router, a front end using Prisma, and a back end usingNextJS and MySQL. The video walks through some of the steps required to complete the project, including setting up Prisma and NextJS, importing the necessary packages, and creating a mutation.
01:15:00 This YouTube video demonstrates how to build a full stack app using NextJS 12, Typescript, Prisma, and more. The author demonstrates how to create a mutation that will persist changes to the voting system. Next, they add an endpoint to the app that will allow users to vote. Finally, they make a deploy request to deploy the updated app to the server.
01:20:00 This video discusses how to build a modern full stack application using NextJS 12, Typescript, Prisma and more. The author demonstrates how to create a deploy request, how to connect to the database locally and how to persist data.
01:25:00 The video discusses how to build a modern full stack app using NextJS 12, Typescript, Prisma, and more.
01:30:00 The video demonstrates how to build a modern full stack application using NextJS 12, Typescript, Prisma, and more. The configuration is incorrect, and the author is angry. However, the app can be made to work using custom domains, relative paths, and the GitHub link.
01:35:00 The author discusses how NextJS 12, Typescript, Prisma, and more make it easy to build a full stack app. He uses examples of how NextJS and Typescript make it easy to handle images and links, while Prisma makes it easy to generate icons. He then discusses how he is going to use the Pokey Node TS package to keep a copy of the data on his own servers.
01:40:00 The video discusses how to build a modern full stack app using NextJS 12, Typescript, Prisma, and more. The author demonstrates how to create aPokemon model and referential integrity between models.
01:45:00 The speaker discusses how they have been using NextJS and TypeScript to build a modern full stack app. They mention that relations are hard, and that fields in a model must only refer to scalars. They also mention that author and user fields must reference each other. Finally, they mention that a vote link must be created to link a vote to a Pokemon.
01:50:00 The video demonstrates how to build a modern full stack app using NextJS 12, Typescript, Prisma and Mpx. The app has a voting system and is able to rename columns. However, foreign keys cannot be created, and the video demonstrates how to workaround this limitation.
01:55:00 The speaker demonstrates how to build a full stack app using NextJS, Typescript, Prisma, and more. They explain that while some of the features are available as plugins, they find that many of the problems they've never had before are fun to solve. They eventually run into a problem with referential integrity and realize that they have to create a migration script.

02:00:00 - 02:45:00

This video explains how to build a modern full stack application using NextJS 12, Typescript, Prisma, and more. The application fetches and stores the names and images for all 493 pokemon in a database. The author demonstrates how to build the app, how to add and manage user accounts, and how to deploy the app to a remote host.

02:00:00 This video explains how to build a modern full stack application using NextJS 12, Typescript, Prisma, and more. The application fetches and stores the names and images for all 493 pokemon in a database.
02:05:00 In this video, the presenter demonstrates how to build a full stack app using NextJS 12, Typescript, Prisma and more. They discuss how to create a database, add and manage user accounts, and deploy the app to a remote host.
02:10:00 In this video, the author demonstrates how to build a modern full stack app using NextJS 12, Typescript, Prisma, and more. They first create a results page with static content, then use Prisma to filter and order the results. They finish by retrieving data from a back end using Utils Prisma.
02:15:00 This video explains how to build a modern full stack app using NextJS 12, Typescript, Prisma, and more.
02:20:00 The author demonstrates how to build a modern full stack app with NextJS 12, Typescript, Prisma, and more. They explain that because they're not using Trpc, they have to infer the type of various objects and functions. They also show how to get server side props and revalidate the page on every 60 seconds.
02:25:00 The author demonstrates how to build a modern full stack app using NextJS 12, Typescript, Prisma and more. They note that the app can be made more performant by virtualizing parts of it.
02:30:00 In this video, the speaker shows how to build a modern full stack app using NextJS 12, Typescript, Prisma, and more. They explain how to generate a count for a given pokemon, and how to load the app's state between votes.
02:35:00 In this video, the presenter demonstrates how to build a full stack web application using NextJS 12, Typescript, Prisma, and more. They explain how to abstract certain loading checks and how to solve a problem with type inference. Finally, they show how to create a SVG loading spinner.
02:40:00 In this video, the speaker demonstrates how to build a modern full stack app using NextJS 12, Typescript, Prisma, and more. He notes that while the app will be fast on the client side, it will not be as fast on the server side. He then shows how to correct his mistake and deploy the app to the server. Finally, he shows how to add a post-install script for Prisma.
02:45:00 This YouTube video demonstrates how to build a full stack modern app using NextJS 12, Typescript, Prisma, and more. The app is currently running on a server, and the results page displays Pokemon stats in a more accurate format.