Next.js 13 E-Commerce Tutorial (App Router, TypeScript, Deployment, TailwindCSS, Prisma, DaisyUI)
Build and deploy a full-stack e-commerce website with Next.js 13.4 and the new app router. This tutorial will walk you through harnessing Next.js server actions, managing databases with Prisma, constructing a dynamic website akin to Amazon, and ensuring user security with Next-Auth, MongoDB, and Google login. Enhance the user experience with anonymous carts and a stellar UI via TailwindCSS and DaisyUI. Seamlessly deploy on Vercel, optimize page metadata, streamline Prisma requests with React cache, and set up essential developer tools for a smooth coding journey.
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro and prerequisites
⌨️ (0:08:48) Project setup
⌨️ (0:28:18) Prisma and MongoDB setup
⌨️ (0:45:42) Add product page (Server action in server component)
⌨️ (1:31:07) Products list page
⌨️ (2:00:11) Product details page (generateMetadata + React cache)
⌨️ (2:17:14) Add to cart button (Server action in client component)
⌨️ (3:01:01) Navbar + footer
⌨️ (3:26:38) Cart page
⌨️ (3:53:50) User login (Next-Auth)
⌨️ (4:33:37) Merging user cart with anonymous cart
⌨️ (5:01:26) Pagination
⌨️ (5:25:56) Search functionality
⌨️ (5:32:48) Prisma extension
⌨️ (5:46:42) Deployment + social preview
17
views
The Ethics of AI & Machine Learning [Full Course]
Should AI systems have personhood? Is AI biased? Go from 0 to 1 in AI ethics in 90 minutes!
In this video, you will learn about the foundations of AI, its applications, and the ethical considerations that shape this transformative field.
⭐️ Course Contents ⭐️
✨ (00:00) Opening Remarks
📝 (02:08) Intro to AI Ethics
🤖 (10:52) Basics of AI/ML
🧠 (18:37) Neural Networks
🐶 (25:56) Datasets
⬛ (28:54) Limitations of AI & Black Boxes
⚖️ (38:48) Intro to Ethics
💭 (45:38) Thought Experiments
☣️ (52:06) The Singularity and AI Risk
🫀 (01:02:16) AI in Healthcare
✏️ (01:08:45) AI in Education
📈 (01:13:29) AI in Finance
🫂 (01:18:37) AI in Employment
🌏 (01:27:00) AI and Policy
🌱 (01:37:49) Future of Ethical AI
6
views
VS Code Tutorial – Become More Productive
In this full Visual Studio Code course, you will learn how to use built-in features, the best settings and extensions, and workflows to make yourself more productive.
⭐️ Contents ⭐️
⌨️ (0:00:00) 01: Welcome to Productive VS Code
⌨️ (0:01:49) 02: How I Use VS Code To Be Productive
⌨️ (0:05:42) 03: Installing VS Code
⌨️ (0:07:31) 04: A Tour of VS Code's UI
⌨️ (0:11:34) 05: VS Code's #1 Essential Tool: The Command Palette
⌨️ (0:15:31) 06: VS Code Themes and Icon Themes
⌨️ (0:22:26) 07: 20 Best VS Code Themes
⌨️ (0:32:02) 08: VS Code Fonts and Important Font Settings
⌨️ (0:42:14) 09: My 5 Favorite Coding Fonts
⌨️ (0:48:16) 10: Important VS Code Appearance Settings
⌨️ (0:54:52) 11: Intro to Get to Know VS Code
⌨️ (0:55:52) 12: VS Code's Explorer: Your Home Base
⌨️ (1:03:52) 13: VS Code's Editor Area: Where Magic Happens
⌨️ (1:13:46) 14: VS Code's IntelliSense: The Smartest Helper
⌨️ (1:21:49) 15: Find and Replace All the Things in VS Code
⌨️ (1:30:25) 16: Refactoring in VS Code
⌨️ (1:34:23) 17: Extensions and Customization in VS Code
⌨️ (1:41:18) 18: Settings Sync in VS Code
⌨️ (1:42:21) 19: Using Snippets in VS Code
⌨️ (1:51:40) 20: Using Emmet in VS Code
⌨️ (1:57:03) 21: VS Code's Command Line Tools
⌨️ (2:00:09) 22: Get Started w/ HTML & CSS in VS Code
⌨️ (2:11:35) 23: 5 Best HTML/CSS Extensions for VS Code
⌨️ (2:20:13) 24: Using node and npm in VS Code
⌨️ (2:28:48) 25: Using JavaScript in VS Code
⌨️ (2:37:29) 26: Using ESLint in VS Code
⌨️ (2:45:52) 27: The Best JavaScript Extensions for VS Code
⌨️ (2:52:46) 28: Using React in VS Code + 2 Best Extensions
⌨️ (3:06:14) 29: Using Vue.js in VS Code + 3 Best Extensions
⌨️ (3:13:58) 30: Using Tailwind in VS Code + 3 Best Extensions
⌨️ (3:21:48) 31: Using Markdown in VS Code + 3 Best Extensions
⌨️ (3:30:12) 32: PHP and Laravel in VS Code + 7 Best Extensions
⌨️ (3:38:28) 33: Quick Ways to Make VS Code Look Good
⌨️ (3:44:34) 34: The Starting Point for VS Code Workflows
⌨️ (3:47:53) 35: Minimalism in VS Code
⌨️ (3:58:01) 36: Using the Terminal in VS Code
⌨️ (4:03:53) 37: Using Git and GitHub in VS Code
⌨️ (4:16:29) 38: 5 Best Git Extensions for VS Code
⌨️ (4:23:53) 39: Using Multiple Projects in VS Code
⌨️ (4:34:06) 40: Autosave and Autoformat in VS Code: An Awesome Combo
⌨️ (4:41:39) 41: Get a Browser in VS Code with Browser Preview
⌨️ (4:46:15) 42: Getting Started with Keyboard Shortcuts in VS Code
⌨️ (4:53:02) 43: Basic Editing Shortcuts in VS Code
⌨️ (4:57:52) 44: Navigating Around VS Code w/ Keyboard Shortcuts
⌨️ (5:03:48) 45: Multi-Cursor: My Favorite Feature
⌨️ (5:12:18) 46: Keyboard Shortcuts for VS Code's UI
⌨️ (5:16:14) 47: Keyboard Shortcuts Cheat Sheet for VS Code
⌨️ (5:17:35) 48: GitHub Pull Requests and Issues in VS Code
⌨️ (5:27:43) 49: Editing GitHub Remote Repos in VS Code
⌨️ (5:30:55) 50: Calling APIs in VS Code
⌨️ (5:35:41) 51: Vim in VS Code: Blazing Fast
⌨️ (5:44:24) 52: Artificial Intelligence Coding Helpers in VS Code
⌨️ (5:52:59) 53: Right Sidebar in VS Code is Weird but Cool
⌨️ (5:54:23) 54: Outro to Productive VS Code
22
views
MERN Stack Project: Build a Modern Real Estate Marketplace with react MERN (jwt, redux toolkit)
Master MERN Stack: Build a Modern Real Estate Marketplace from Scratch with jwt authentication and redux toolkit)
🚀 Ready to build a cutting-edge real estate marketplace from scratch? Join us in our comprehensive course, "Full-stack MERN Real Estate App: Build a Modern Marketplace."
🌐 In this course, we'll take you on a journey through modern web development, where you'll master the MERN stack - MongoDB, Express.js, React, and Node.js. Whether you're an aspiring full-stack developer, a React enthusiast, or someone eager to expand your web development toolkit, this course is tailor-made for you.
📌 What You'll Learn:
🔑 Advanced Authentication: Implement JWT, Firebase, and Google OAuth for secure and seamless user access.
🏡 Real-world CRUD Operations: Create, read, update, and delete property listings using MongoDB.
💡 User-friendly Features: Enhance the user experience with image uploads, property listing management, and more.
🚀 Advanced Search Functionality: Implement cutting-edge search features to help users find what they're looking for.
🌐 Deployment Made Easy: Learn to deploy your MERN real estate app for free using the 'render' platform.
🔥 Prerequisites:
A basic understanding of JavaScript and React is recommended, but if you're eager to dive into full-stack development and excited about building a real estate marketplace, you're more than ready to get started.
Join us on this immersive journey to master the MERN stack, advanced authentication, Firebase integration, Google OAuth, and much more. By the end of this course, you'll not only have a fully functional real estate application to showcase but also a wealth of skills and knowledge to boost your web development career.
🎓 Let's embark on this exciting learning adventure together! Don't forget to like, subscribe, and hit the notification bell to stay updated with our latest tutorials and courses. 🚀
00:00 - Intro
02:42 - Project preview
07:57 - Install React js and Tailwind CSS and create the first template
22:13 - Create pages and routes
28:13 - Create Header component
44:58 - Create and run the server
54:38 - Connect to database
01:05:32 - Create user model
01:12:25 - Create a test api route
01:22:35 - Create sign up API route
01:40:28 - Create a middleware and a function to handle possible errors
01:50:03 - Complete sign up page Ul
01:58:55 - Complete sign up page functionality
02:15:53 - Create sign in API route
02:33:40 - Complete sign in page functionality
02:38:51 - Add redux toolkit
02:53:27 - Add redux persist
03:00:01 - Add Google OAuth functionality
03:27:54 - Update the header and make the profile page private
03:36:09 - Complete profile page Ul
03:43:58 - Complete image upload functionality
04:11:40 - Create update user API route
04:28:41 - Complete update user functionality
04:47:15 - Add delete user functionality
04:57:08 - Add sign out user functionality
05:02:36 - Add create listing API route
05:16:29 - Complete create listing page Ul
05:41:55 - Complete upload listing images functionality
06:09:38 - Complete create listing page functionality
06:36:55 - Create get user listings API route
06:44:38 - Complete show user listings functionality
07:00:06 - Complete delete user listing functionality
07:09:14 - Create update listing API route
07:16:55 - Complete update listing functionality
07:33:18 - Add image slider to the listing page
07:52:34 - Complete listing page
08:05:10 - Add contact landlord functionality to the listing page
08:27:53 - Create search API route
08:45:07 - Complete header search form functionality
08:53:41 - Create search page Ul
09:09:43 - Add onChange and onSubmit functionality to the search page
09:33:29 - Create the listing item component and show listings
10:05:20 - Add show more listings functionality
10:14:00 - Complete home page
10:39:04 - Complete about page
10:42:11 - Deploy to render
64
views
Full Stack TikTok Clone: NestJS, GraphQL, Prisma, Postgres, React, Apollo Client, Zustand & Tailwind
Full-Stack TikTok Clone using NestJS, GraphQL, ReactJS, Apollo Client, Zustand & TailwindCSS
Hey, coders,
Here I am again with another beautiful build, where we will build a full-stack TikTok clone.
We will be using TypeScript along with NestJS for the backend and ReactJS for the frontend. For the generation of types on the front end, we will make use of GraphQL Codegen, which allows us to automatically generate types from our backend. For styling, we will use TailwindCSS.
For syncing our front end with the data coming from the GraphQL API, we will use Apollo Client. For state management regarding the UI, we will use ZUSTAND.
What kind of functionality will our Tiktok clone have?
We will be able to register, log in, make posts containing a video, like and comment posts. Also, we will be able to update your user profile.
We will also have infinite loading, meaning whenever we reach the bottom, more posts will be loaded into our feed.
What will we be learning?
We will be learning how to create A GraphQL API and connect it to a separate frontend, and how to work with files, such as images and Videos on the front and backend.
Timestamps:
00:00 Intro
00:02: Setting up NestJS with GraphQL and Prisma, implementation of backend logic for registering, logging in, logging out, and issuing access tokens.
00:40: Setup for ReactJS to work with Apollo Client and GraphQL CodeGen; implementation of React Router with protected routes, only logged-in users will be able to perform actions, such as liking, commenting, or creating posts. Implementation of log-in, and register functionality.
2:06: Top Navigation with logout functionality and Sidebar
2:50 Building the Upload page and the backend logic for dealing with video files
3:50: Building the Feed Page for displaying the posts
4:10: Implementation of the comment and like feature on the backend, and building the Post page, where users can like and comment.
5:14: Implementation of the user profile feature on the backend as well as on the front end; working with image files and React Cropper.
6:12: A few big fixes and Big Thanks for watching :)
27
views
How to build a website using NextJS 13 and Tailwind CSS
Hello everyone!
In today's session, I'll be demonstrating the process of transforming the FamSec Figma design (homepage)
00:00 - Intro and demo of the NextJS template
01:11 - Setup NextJS and install some packages
02:25 - Extend Tailwind CSS with custom colors
03:14 - Create Navigation.js UI component
14:00 - Create the Hero.js UI component
20:15 - Create the Stats.js UI component
32:43 - Create the Services.js UI component
38:13 - Create the Solutions.js UI component
49:11 - Create the Testimonial.js UI component
1:01:34 - Create the RecentBlog.js UI component
1:18:18 - Create the Footer.js UI component
1:27:22 - Adding AOS for animation
8
views
Restaurant Food Delivery App Design - React Next.js & Tailwind | Responsive Food Ordering Website
Responsive restaurant website UI design tutorial with React Next.js and Tailwind CSS. React Tailwind project course for beginners.
00:00 Introduction
02:45 Next.js TypeScript Tailwind Installation
06:00 Creating Pages with Next.js App Router
08:54 Next.js Layout
10:56 Tailwind Basics
14:15 React Tailwind Responsive Navbar Menu tutorial
32:34 Footer Design
33:52 React Tailwind Homepage Design
34:46 React Tailwind Responsive Slider Tutorial
40:11 React Automatic Image Slider Tutorial with useEffect
46:39 Featured Products Design
59:10 Offer Component Design
01:06:38 Category Page Design
01:14:25 React Tailwind Product List Page Design
01:23:27 React Tailwind Single Product Page Design
01:25:48 React How to Calculate Product Price with Quantity and Options?
01:42:24 React Tailwind E-commerce Cart Page Design
01:53:10 React Tailwind Login Page Design
02:00:12 Orders Page Design
02:06:53 Outro
5
views
Next.js 13 Full Course 2023 | Build and Deploy a Full Stack App Using the Official React Framework
Next.js recently became the official React framework as outlined in React docs. In this course, you'll learn the most important Next.js concepts and how they fit into the React ecosystem. Finally, you'll put your skills to the test by building a modern full-stack Next 13 application.
GitHub Code
https://github.com/adrianhajdin/project_next_13_ai_prompt_sharing
In this video, you'll learn:
- Next.js 13 App Folder Structure
- Next.js 13 Client Components vs Server Components
- Next.js 13 File-based Routing (including dynamic and nested routes)
- Next.js 13 page, layout, loading, and error Special Files
- Next.js 13 Serverless Route Handlers (Next API, Full Stack Apps)
- Next.js 13 Metadata and Search Engine Optimization (SEO)
- Three ways to fetch data in Next.js:
- Server Side Rendering (SSR),
- Static Site Generation (SSG)
- Incremental Static Generation (ISR)
Time Stamps 👇
00:00:00 Intro
00:03:33 The Benefits of Next.js
00:12:54 File & Folder Structure
00:18:39 Server & Client Components
00:23:22 Routing & Special Next.js Files
00:31:21 Data Fetching (SSR, SSG, ISR)
00:34:26 Next.js API Endpoints
00:40:48 SEO & Metadata
00:42:48 Promptopia Project Demo
00:44:31 Project Setup
00:53:22 Home page
01:50:17 Create page
02:14:41 Feed page
02:32:28 Profile page
02:48:17 Next.js API Routes
03:06:39 Special Assignment!
03:12:17 Deployment
03:23:06 Share Your Work
33
views
Build a Portfolio Website With Next JS, Tailwind CSS & Framer Motion
Build a Portfolio Website With Next JS, Tailwind CSS and Framer Motion
⏱ Timestamps
00:00:00 Project Intro
00:03:30 Project Setup
00:07:22 Layout
00:13:57 Navigation
00:27:20 Transition
00:35:35 Home
00:55:25 Particle Container
01:05:11 Header
01:12:27 About
01:45:21 Services
02:05:36 Work
02:22:30 Testimonials
02:40:40 Contact
10
views
Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023
GitHub and Live Website
https://www.codewithantonio.com/projects/reservation-platform
In this video, we will put a special emphasis on the Next.js 13 App Router, which is the latest addition to the Next.js framework.
The Next.js 13 App Router is a powerful tool that enables you to easily create complex client-side routing in your Next.js applications. In this tutorial, we will use the Next.js 13 App Router to build a fully functional Airbnb clone with seamless navigation and user experience.
Throughout this video, we will guide you step-by-step through the process of building a full-stack web application using the latest web development technologies, including React, Tailwind, Prisma, MongoDB, and NextAuth.
This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of Next.js 13 App Router in their web applications. So, grab your coffee and join us on this exciting journey of building the next big thing in 2023 with Next.js 13 App Router!
Timestamps
00:00 Intro
02:21 Environment setup
09:30 Navbar UI
34:30 Auth UI
01:35:20 Register functionality, MongoDB, Prisma setup
02:09:27 Login functionality
02:28:04 Social Login (Google and Github)
02:44:36 Categories: UI
03:11:34 Listing creation step 1 (Category selection)
03:37:43 Listing creation step 2 (Location selection, Map component, Country autocomplete)
04:06:40 Listing creation step 3 (Counter components)
04:17:10 Listing creation step 4 (Image upload, Cloudinary CDN)
04:32:35 Listing creation step 5 (Description and Price, Listing creation POST route)
04:49:00 Fetching listings with server components (Listing card component, direct server action)
05:23:12 Favoriting functionality
05:39:27 Individual Listing View
06:16:57 Listing reservation component
06:42:33 Reservation functionality (routes, logic)
06:55:05 Trips screen (Loading trips with server component)
07:10:59 Reservations screen (Loading guest reservations with server component)
07:33:13 Favorites screen (Loading favorites with server component)
07:42:35 Properties screen (Loading your listings with server component)
07:53:39 Filters modal (Assigning various filters, adding advanced querying logic to getListings, and adding loading and error pages)
08:37:48 Vercel deploy and wraps up
17
views
Full-Stack Blog App Tutorial | Next.js MongoDB Blog App Project Full Course
00:00 Introduction
03:08 Installation
04:15 Design Structure
06:25 Styles, Layouts, Containers
10:35 CSS Responsive Layout Tutorial
14:30 Next.js CSS Styles and Layout
20:00 Responsive Navbar Design
28:40 CSS Dark Mode Theme Toggle Design
31:25 Next.js Context API Tutorial
45:40 Next.js Responsive Hamburger Menu Tutorial
54:00 Blog App Featured Post Design
58:30 Blog App Category Component Design
01:06:40 CSS Flexbox (Content - Side Menu Design)
01:08:00 Blog Post Card Component Design
01:15:00 Side Menu Component Design
01:32:10 Pagination Button Design
01:33:20 Footer Component Design
01:42:20 Blog Category Page Design
01:45:05 Single Post Page Design
02:02:50 Next.js Login Page Design
02:08:50 Add New Post Page Design ([Medium.com](http://Medium.com) Editor Clone)
02:20:10 Next.js API, MongoDB, Prisma Structure
02:22:17 Next.js Authentication Tutorial (Auth.js)
02:26:10 Next.js How to Sign in with Google
02:33:48 Next.js MongoDB Prisma Tutorial (App Router)
02:42:50 Prisma Blog App Schema Example
02:58:50 Next.js App Router Rest API Tutorial
02:51:34 Next.js: How to Fetch Data on the Server Side
02:54:53 Fetch All Posts
02:55:25 Next.js Pagination Tutorial (SSR)
03:08:30 Next.js: Send a Query to API (Fetch Post by Category)
03:14:49 Fetch a Single Post with the User Information
03:21:30 Fetch All Comments of a post
03:23:22 Next.js Client-Side Data Fetching (App Router)
03:30:38 Create a Comment
03:33:32 Next.js SWR Mutation
03:36:36 Add New Post
03:37:35 How to Upload Image using Firebase
03:54:09 Prisma Increase Post View
03:56:40 How to Deploy Next.js App to a VPS Server
04:05:30 Outro
21
views
Build SEO Optimized Blog with Next.js, Tailwind CSS & Content layer – Full Tutorial
Learn how to use Next.js to build an SEO-optimized blog using Also, use Tailwind CSS, content layer, Sup abase, an drome. The course covers building a homepage, blog pages, category pages, an about page, and a contact page. Also, you'll learn to implementing powerful SEO strategies for higher Google rankings. Our blog features both dark and light themes, offering a minimal and elegant design that's fully responsive on mobile devices. Plus, you'll discover how to showcase your Markdown-based blogs easily on this website.
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro + Demo
⌨️ (0:10:10) Setup and Installation
⌨️ (0:13:34) Tailwind CSS Setup, Dark Mode and project files
⌨️ (0:19:09) Adding Fonts
⌨️ (0:26:56) Navbar Component
⌨️ (0:46:31) Setup Contentlayer
⌨️ (1:08:31) How to render a Blog
⌨️ (1:13:11) Creating Home Cover Section
⌨️ (1:34:16) Featured Posts Component
⌨️ (1:50:11) Recent Posts Component
⌨️ (2:00:46) Footer Component
⌨️ (2:16:31) Blog Page
⌨️ (3:02:06) Creating TOC Component
⌨️ (3:20:51) Category Page
⌨️ (3:45:31) About page
⌨️ (3:58:26) Contact page
⌨️ (4:14:11) Insights Component
⌨️ (4:23:41) Store blog views using Supabase
⌨️ (4:49:16) Adding SEO
⌨️ (5:18:36) Adding Dark Mode
⌨️ (5:30:36) Making it Responsive
⌨️ Adding Sitemap
⌨️ Image Optimization
⌨️ Adding Favicon and manifest file
⌨️ Adding google's structured json-ld for SEO
Correction:
6:55:15 We have created one file called ThemeScript.js, but that is not needed. Instead, just add id and strategy to the script that is in the layout.js file.
13
views
Rust Project Tutorial – Authentication Server Using Warp + JWT
In this course, you will learn how to use Rust to create an authentication server. The course provides a comprehensive guide on user data management, structure, and token-based authentication. Special attention is given to error handling, JWT issues, and practical solutions for common challenges. Concluding with a hands-on demo, viewers will gain a thorough understanding of token creation and user management in modern applications
11
views
Mojo Programming Language – Full Course for Beginners
Learn Mojo in this full tutorial. The Mojo programming language combines the usability of Python with the performance of C. It's basically an enhanced version of Python specifically designed for Artificial Intelligence developers.
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:04:16) What is Mojo?
⌨️ (0:07:57) Modular Community
⌨️ (0:12:06) Setting Up
⌨️ (0:17:04) Hello World
⌨️ (0:19:20) Local Jupyter Notebook
⌨️ (0:22:21) Variables, Declarations, and Datatypes
⌨️ (0:33:27) Getting User Input
⌨️ (0:36:28) IF/ELSE Statements
⌨️ (0:40:28) Loops & Functions
⌨️ (0:47:41) Python VS Mojo functions
⌨️ (0:52:26) OOP
⌨️ (1:05:21) Importing Libraries
⌨️ (1:08:48) Raises, Error handling, and exceptions
⌨️ (1:14:49) Out, Borrowed, Owned, and With Statements
⌨️ (1:21:49) Variable Scope
⌨️ (1:24:46) Mojo CLI
⌨️ (1:35:54) SIMD (single instruction, multiple data)
⌨️ (1:43:47) Decorators & Metaprogramming
⌨️ (1:46:01) Speed test (Mojo VS Python)
⌨️ (1:58:48) How to Ask Questions and Post Errors
⌨️ (2:08:13) Final Comments
⌨️ (2:11:49) Outro
12
views