Build a Shopping App With Next.js + NestJS & Prisma
Published 7/2024
Duration: 8h2m | .MP4 1280x720, 30 fps(r) | AAC, 44100 Hz, 2ch | 3.35 GB
Genre: eLearning | Language: English
Learn how to build cutting edge web apps with Next.js and connect it to a scaleable NestJS backend
What you'll learn
Build a scaleable full-stack web application following best practices
Use the modern Nextjs app directory approach to build a cutting edge performant UI
Create Nextjs server components & actions for improved performance & security
Build an enterprise grade backend using NestJS & Prisma ORM with a Postgres DB
Implement a continuous delivery pipeline on AWS & Vercel to easily deploy our code into production
Secure the UI & backend using industry-standard JWT authentication
Use Prisma ORM to generate TypeScript types to reduce boilerplate & perform database migrations
Utilize Material UI & Tailwind CSS to build beautiful components with ease
Learn how to upload images to the filesystem & AWS S3 from a Nextjs UI
Connect Stripe to collect payments and integrate webhooks to recieve realtime updates
Integrate WebSockets to get real-time updates from the backend to the Nextjs UI
Learn how to cache data with Nextjs fetch to avoid duplicating requests and achieve a blazing fast user experience
Provision a custom domain & secure traffic with HTTPS
Requirements
Intermediate experience with React
Intermediate experience with Express/NodeJS backends
Beginner experience with NestJS
Description
This course will teach you how to build a modern Next.js app using the latest App directory approach. We will build a shopping app and learn all the core fundamentals of building a modern Next.js app. We will also connect the app to a NestJS backend and store data using Prisma ORM.
This architecture allows us to take advantage of the amazing performance & security features of Next.js with server-side rendering while still maintaining a clean scaleable backend using NestJS. By building a real working shopping app integrated with Stripe to accept payments we will go beyond the documentation & learn what it takes to build and deploy a full-stack web application to production.
Additionally, we will cover production deployment using AWS & Vercel to implement a continuous delivery pipeline and expose our application to the internet on a real working domain. This will ensure the app is automatically built & deployed with every commit without us having to do a thing.
The entire project will be protected with industry-standard JWT authentication so only authenticated users can access our application. We will utilize WebSockets to receive real-time updates from our backend whenever a new product is added or purchased. This will be facilitated with the usage of Stripe webhooks.
By the end of the course, we'll have gone through the bulk of the Next.js documentation by building a real working app. You'll be able to apply what you've learned to build your own modern full-stack app.
Who this course is for:
Intermediate full-stack developers who want to learn how to build incredible UIs with Nextjs & connect it to a NestJS backend
What you'll learn
Build a scaleable full-stack web application following best practices
Use the modern Nextjs app directory approach to build a cutting edge performant UI
Create Nextjs server components & actions for improved performance & security
Build an enterprise grade backend using NestJS & Prisma ORM with a Postgres DB
Implement a continuous delivery pipeline on AWS & Vercel to easily deploy our code into production
Secure the UI & backend using industry-standard JWT authentication
Use Prisma ORM to generate TypeScript types to reduce boilerplate & perform database migrations
Utilize Material UI & Tailwind CSS to build beautiful components with ease
Learn how to upload images to the filesystem & AWS S3 from a Nextjs UI
Connect Stripe to collect payments and integrate webhooks to recieve realtime updates
Integrate WebSockets to get real-time updates from the backend to the Nextjs UI
Learn how to cache data with Nextjs fetch to avoid duplicating requests and achieve a blazing fast user experience
Provision a custom domain & secure traffic with HTTPS
Requirements
Intermediate experience with React
Intermediate experience with Express/NodeJS backends
Beginner experience with NestJS
Description
This course will teach you how to build a modern Next.js app using the latest App directory approach. We will build a shopping app and learn all the core fundamentals of building a modern Next.js app. We will also connect the app to a NestJS backend and store data using Prisma ORM.
This architecture allows us to take advantage of the amazing performance & security features of Next.js with server-side rendering while still maintaining a clean scaleable backend using NestJS. By building a real working shopping app integrated with Stripe to accept payments we will go beyond the documentation & learn what it takes to build and deploy a full-stack web application to production.
Additionally, we will cover production deployment using AWS & Vercel to implement a continuous delivery pipeline and expose our application to the internet on a real working domain. This will ensure the app is automatically built & deployed with every commit without us having to do a thing.
The entire project will be protected with industry-standard JWT authentication so only authenticated users can access our application. We will utilize WebSockets to receive real-time updates from our backend whenever a new product is added or purchased. This will be facilitated with the usage of Stripe webhooks.
By the end of the course, we'll have gone through the bulk of the Next.js documentation by building a real working app. You'll be able to apply what you've learned to build your own modern full-stack app.
Who this course is for:
Intermediate full-stack developers who want to learn how to build incredible UIs with Nextjs & connect it to a NestJS backend
Bitte
Anmelden
oder
Registrieren
um Links zu sehen.
Code:
Bitte
Anmelden
oder
Registrieren
um Code Inhalt zu sehen!
Code:
Bitte
Anmelden
oder
Registrieren
um Code Inhalt zu sehen!
