Build & Deploy a Full-Stack Dating App with Next.js 14, Prisma, NextAuth, Pusher & Cloudinary

preview_player
ะŸะพะบะฐะทะฐั‚ัŒ ะพะฟะธัะฐะฝะธะต

๐Ÿ“• Course Outline:
00:00 - Course Introduction
27:03 - Lesson 2: Create Login and Registration with validation
40:20 - Lesson 3: Authentication & Database setup with Prisma
01:21:48 - Lesson 4: Displaying Members List & Dynamic Routing
01:48:23 - Lesson 5: Build Like Feature with Prisma Relations
02:12:19 - Lesson 6: Editing Profiles & Cloudinary Image Uploads
02:48:15 - Lesson 7: Real-Time Chat with Pusher
03:19:35 - Lesson 8: Presence Indicators with Pusher & Zustand
04:27:49 - Lesson 9: Filtering and Pagination
05:20:03 - Lesson 10: Email Verification & Password Reset
06:05:45 - Lesson 11: Adding OAuth Social Logins
06:26:53 - Lesson 12: Adding User Roles & Admin Content
06:50:13 - Lesson 13: Deploy to Vercel & Final Testing

  1. Eric Tech
  2. Full-stack dating app Next.js
  3. Next.js dating app tutorial
  4. Next.js 14 Prisma tutorial
  5. build dating app Next.js
  6. full-stack dating app tutorial
ะ ะตะบะพะผะตะฝะดะฐั†ะธะธ ะฟะพ ั‚ะตะผะต
Build and Deploy 5:56:40

Build and Deploy a Full Stack MERN Project - Task Manager Application

Build & Deploy 6:29:39

Build & Deploy Full Stack React Js App | React, Tailwindcss, Drizzle ORM, Clerk

Build and Deploy 0:13:20

Build and Deploy a Full Stack AI SaaS With AI and NO Code!

Build and Deploy 5:50:47

Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query

AI Artifacts: Create 0:08:36

AI Artifacts: Create and Deploy Full-Stack Apps for FREE using o1 + Other LLMs!

Build and Deploy 0:00:33

Build and Deploy a Full Stack Next 14 MERN Events App with Stripe, Typescript, Tailwind

JavaScript and Python 2:21:36

JavaScript and Python - Build and Deploy a Full Stack Web App

MERN Stack Twitter: 6:03:06

MERN Stack Twitter: Build and Deploy a Full Stack Twitter Clone with React, Node.js and MongoDB

Build & Deploy 7:07:22

Build & Deploy a Full-Stack Dating App with Next.js 14, Prisma, NextAuth, Pusher & Cloudinar...

How to OVER 0:11:20

How to OVER Engineer a Website // What is a Tech Stack?

MERN Stack Tutorial 2:16:26

MERN Stack Tutorial with Deployment โ€“ Beginner's Course

OttoDev: NEW AI 0:11:35

OttoDev: NEW AI Coding Agent BEATS v0, Cursor, Bolt.New, & Cline! Generate Full-Stack Applicatio...

Next.js Full Course 3:26:29

Next.js Full Course 2024 | Build and Deploy a Full Stack App Using the Official React Framework

Build and Deploy 4:42:55

Build and Deploy a Full Stack AI SaaS Platform with Next js 14, TypeScript, Stripe

Deploy a Full 0:20:49

Deploy a Full Stack App - React, Node.js, Express, Mongo | MERN Tutorial

Build and Deploy 8:28:06

Build and Deploy Full Stack AI Email SaaS | Next JS 14, Prisma, OpenAI, Stripe, TypeScript, Tailwind

Build and Deploy 11:59:47

Build and Deploy 3 Modern Apps and Get Hired as Full Stack Developer Full 12-Hour Course

Build and Deploy 2:12:08

Build and Deploy a Full Stack MERN AI Image Generation App | Midjourney & DALL-E Clone

NEXT.js 14 Full 4:01:14

NEXT.js 14 Full Course | Build and Deploy a Full Stack App w. Firebase & TailwindCSS

Deploying a Website 0:00:43

Deploying a Website to AWS in Under 1 Minute

Full Stack MERN 1:15:40

Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 1/2]

๐ŸŽจ Build & 3:08:37

๐ŸŽจ Build & Deploy Full Stack Next.js AI Interior Design Generator App | React, Tailwind CSS Tutor...

Build and Deploy 5:50:35

Build and Deploy a Full Stack MERN Next.js 14 Threads App | React, Next JS, TypeScript, MongoDB

Build Apps In 0:05:01

Build Apps In 1 Week With This Tech Stack

ะšะพะผะผะตะฝั‚ะฐั€ะธะธ
ะะฒั‚ะพั€

๐Ÿ“• Detailed Course Timestamps
Here's the breakdown of topics with timestamps:

โŒจ (00:00) Course Introduction
๐Ÿ“‚ (06:38) Lesson 1: Introduction
๐Ÿ“„ (07:43) Next.js Intro
๐Ÿ“„ (09:53) Create NextJS Project
๐Ÿ“„ (13:47) Install NextUI Library & React Icons Library
๐Ÿ“„ (18:21) NextJS Routing
๐Ÿ“„ (20:44) Add a Navbar
๐Ÿ“„ (25:15) Commit Changes to Source Control
๐Ÿ“„ (25:54) Outro
๐Ÿ“‚ (27:03) Lesson 2: Introduction
๐Ÿ“„ (28:20) Intro
๐Ÿ“„ (28:55) Add a Login Form with React Hook Form
๐Ÿ“„ (34:19) Add Zod Form Validation
๐Ÿ“„ (37:06) Add Register Form
๐Ÿ“„ (39:16) Commit Changes to Source Control
๐Ÿ“„ (39:38) Outro
๐Ÿ“‚ (40:20) Lesson 3: Introduction
๐Ÿ“„ (41:35) Intro to NextAuth (Auth.js) & Prisma
๐Ÿ“„ (45:43) Add NextAuth (Auth.js) & Prisma ORM
๐Ÿ“„ (48:26) Setup PostgreSQL Database
๐Ÿ“„ (49:49) Configure Prisma
๐Ÿ“„ (50:53) Add NextJS Server Actions to register new user
๐Ÿ“„ (55:56) Add Error handling for register form
๐Ÿ“„ (58:46) Add Sign in user features
๐Ÿ“„ (01:04:51) Add React-toastify alert
๐Ÿ“„ (01:07:13) Get user's session data
๐Ÿ“„ (01:09:25) Use NextAuth callbacks to get session user id
๐Ÿ“„ (01:11:59) Add dropdown menu to the Top Navbar
๐Ÿ“„ (01:15:20) Use NextJS Middleware to add protected routes
๐Ÿ“„ (01:19:58) Commit changes to source control
๐Ÿ“„ (01:20:31) Outro
๐Ÿ“‚ (01:21:48) Lesson 4: Introduction
๐Ÿ“„ (01:23:44) Update Prisma schema by adding Member & Photo tables
๐Ÿ“„ (01:26:42) Seed data into the Database
๐Ÿ“„ (01:30:42) Fetch members data & Display members list
๐Ÿ“„ (01:35:25) Use dynamic routes in NextJS
๐Ÿ“„ (01:36:32) Add server action to get member details
๐Ÿ“„ (01:38:02) Use NextJS Layout page to add member sidebar
๐Ÿ“„ (01:40:28) Add member details profile page
๐Ÿ“„ (01:40:54) Add member detail photos page
๐Ÿ“„ (01:42:48) Add member detail chat page
๐Ÿ“„ (01:43:27) Add loading indicators in member details pages
๐Ÿ“„ (01:44:44) Add a custom error page
๐Ÿ“„ (01:46:55) Commit changes to source control
๐Ÿ“„ (01:47:18) Outro
๐Ÿ“‚ (01:48:23) Lesson 5: Introduction
๐Ÿ“„ (01:50:01) Update Prisma schema for a many-to-many relationship
๐Ÿ“„ (01:52:50) Server actions - add likeActions.ts
๐Ÿ“„ (01:57:16) Add Like toggle feature
๐Ÿ“„ (02:02:55) Add view likes features
๐Ÿ“„ (02:08:09) Use useTransition hook for tabs manual loading
๐Ÿ“„ (02:10:10) Test like feature
๐Ÿ“„ (02:10:42) Commit changes to source control
๐Ÿ“„ (02:11:10) Outro
๐Ÿ“‚ (02:12:19) Lesson 6: Introduction
๐Ÿ“„ (02:14:05) Add edit member details feature
๐Ÿ“„ (02:29:21) Add edit Photos feature
๐Ÿ“„ (02:32:05) Set up Cloudinary on Next.js App
๐Ÿ“„ (02:35:23) Add an image upload feature using Cloudinary
๐Ÿ“„ (02:42:40) Add set main image + delete image
๐Ÿ“„ (02:47:33) Commit changes to source control
๐Ÿ“‚ (02:48:15) Lesson 7: Introduction
๐Ÿ“„ (02:49:56) Set up Prisma for messages
๐Ÿ“„ (02:51:49) Create a chat form
๐Ÿ“„ (02:56:12) Create the send message action
๐Ÿ“„ (02:58:40) Get the message thread
๐Ÿ“„ (02:59:51) Create a message DTO
๐Ÿ“„ (03:02:09) Display the messages w/ message box
๐Ÿ“„ (03:05:38) Add inbox/outbox messages table
๐Ÿ“„ (03:19:01) Commit changes to source control
๐Ÿ“‚ (03:19:35) Lesson 8: Introduction
๐Ÿ“„ (03:24:29) Set up Pusher
๐Ÿ“„ (03:26:53) Use Pusher public channel to add live chat in server actions
๐Ÿ“„ (03:30:44) Subscribe live messages in public channel
๐Ÿ“„ (03:35:55) Add message dateRead subscriptions in public channels
๐Ÿ“„ (03:41:08) Set up presence channel in Pusher
๐Ÿ“„ (03:46:21) Set up Zustand for state management
๐Ÿ“„ (03:49:24) Add member presence store using Zustand
๐Ÿ“„ (03:50:59) Add presence channel hook to subscribe members presence
๐Ÿ“„ (03:56:05) Add member presence indicator
๐Ÿ“„ (04:00:22) Set up private channel in Pusher to notify real-time messages
๐Ÿ“„ (04:07:09) Refactor Messages Table
๐Ÿ“„ (04:11:56) Get real-time unread message count
๐Ÿ“„ (04:21:18) Add a custom toast for notifications for new likes and messages
๐Ÿ“„ (04:27:09) Commit changes to source control
๐Ÿ“‚ (04:27:49) Lesson 9: Introduction
๐Ÿ“„ (04:30:36) Add Filters component
๐Ÿ“„ (04:33:53) Add Pagination component
๐Ÿ“„ (04:35:43) Add members filters functionality
๐Ÿ“„ (04:54:53) Member filters refactorings
๐Ÿ“„ (05:02:19) Add members offset paging functionality
๐Ÿ“„ (05:06:15) Members offset paging refactorings + Clean ups
๐Ÿ“„ (05:07:58) Cursor paging vs Offset paging
๐Ÿ“„ (05:11:01) Add messages cursor paging functionality
๐Ÿ“„ (05:19:13) Commit changes to source control
๐Ÿ“‚ (05:20:03) Lesson 10: Introduction
๐Ÿ“„ (05:21:12) Add a Register wizard form
๐Ÿ“„ (05:41:23) Set up token table and reset the Database
๐Ÿ“„ (05:45:06) Add token generation function
๐Ÿ“„ (05:48:16) Set up resend email provider
๐Ÿ“„ (05:51:18) Add the verify email function
๐Ÿ“„ (05:57:31) Add the forgot password functionality
๐Ÿ“„ (06:04:00) Commit changes to source control
๐Ÿ“‚ (06:05:45) Lesson 11: Introduction
๐Ÿ“„ (06:06:49) Add OAuth social login providers in Next.js
๐Ÿ“„ (06:09:06) Add GitHub social logins
๐Ÿ“„ (06:11:32) Get profileComplete from JWT callback
๐Ÿ“„ (06:14:58) Use TypeScript Module Augmentation to fix type error
๐Ÿ“„ (06:17:47) Add a complete profile form for social login
๐Ÿ“„ (06:23:11) Add Google provider
๐Ÿ“„ (06:26:30) Commit changes to source control
๐Ÿ“‚ (06:26:53) Lesson 12: Introduction
๐Ÿ“„ (06:27:33) Add user role in database
๐Ÿ“„ (06:29:33) Add user role to the session data
๐Ÿ“„ (06:31:34) Render admin content
๐Ÿ“„ (06:35:50) Add the photo moderation functionality
๐Ÿ“„ (06:49:42) Commit changes to source control
๐Ÿ“‚ (06:50:13) Lesson 13: Introduction
๐Ÿ“„ (06:51:02) Final clean ups
๐Ÿ“„ (06:55:15) Fix next build issues
๐Ÿ“„ (06:58:46) Successfully ran next build
๐Ÿ“„ (06:59:33) Set up Vercel for Next.js app deployment
๐Ÿ“„ (07:00:59) Set up Vercel production storage
๐Ÿ“„ (07:01:40) Connect git repo to Vercel
๐Ÿ“„ (07:02:33) Add environment variables to Vercel
๐Ÿ“„ (07:03:30) Deploy Next.js app to Vercel
๐Ÿ“„ (07:05:02) Update Production OAuth (GitHub & Google)
๐Ÿ“„ (07:06:05) Final testing

erictech
ะะฒั‚ะพั€

its nice that you are teaching others. but give credit where its due. this seems similar to neil cummings nextjs course that i took a while back.

SSan-nq