Build and Deploy an Ecommerce Site with Next.js, Tailwind CSS, Prisma, Vercel, and daisyUI

Read Time:1 Minute, 44 Second

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).

Source: https://www.freecodecamp.org/news/ecommerce-site-with-next-js-tailwind-daisyui-course/


You might also like this video