When learning how to build a web app it can be helpful to see how everything works together, instead of learning a lot of technologies individually.
We just posted a course on the freeCodeCamp.org YouTube channel that will teach you how to build and deploy a full-stack e-commerce website with Next.js 13.4 and a bunch of other important technologies. Florian Walther from Coding in Flow. He is an experienced developer and has created many popular courses.
In this course, you will learn:
- How to use Next.js server actions and call them from both server components and client components.
- How to run database operations & transactions with Prisma and how to use Prisma client extensions to hook into your queries.
- How to build a fully functional e-commerce website similar to Amazon.com.
- How to add authentication with Next-Auth, the Prisma adapter, MongoDB, and Google login.
- How to implement anonymous shopping carts for unauthenticated users and store the identifier in a cookie.
- How to build an amazing UI using TailwindCSS and DaisyUI.
- How to deploy your project to Vercel and set up the metadata for each page (including generateMetadata).
- How to deduplicate Prisma requests using the React cache function.
- How to set up tools like Prettier, Eslint, and the Prisma and TailwindCSS VS Code extensions to make your project easy to work with.
You will gain a comprehensive knowledge on how to combine a bunch of different technologies to perform every step needed to build and deploy a web app. You can use the skills you learn in this course in your own projects.
Here are the sections in this course:
- Project setup
- Prisma + MongoDB setup
- Add product page (Server action in server component)
- Products list page
- Product details page (generateMetadata + React cache)
- Add to cart button (Server action in client component)
- Navbar + footer
- Cart page
- User login (Next-Auth)
- Merging user cart with anonymous cart
- Pagination
- Search functionality
- Prisma extension
- Deployment + social preview
Watch the full course on the freeCodeCamp.org YouTube channel (6-hour watch).