Next.js Projects – 5 NextJS 14 projects (Instagram, Google.)

Course Curriculum

Chapter 1: Project – IMDb Clone

Lecture 1: 01 – Intro

Lecture 2: 02 – Install Next.js and Tailwind CSS and create the first template

Lecture 3: 03 – Add header section

Lecture 4: 04 – Add dark mode

Lecture 5: 05 – Create the about page

Lecture 6: 06 – Create the navbar component

Lecture 7: 07 – Fetch data from TMDB API in the home page

Lecture 8: 08 – handle the error

Lecture 9: 09 – Add loading effect using Next.js

Lecture 10: 10 – Add card component

Lecture 11: 11 – Add movie page

Lecture 12: 12 – Add search box

Lecture 13: 13 – Deploy to Vercel

Chapter 2: Project – Google Clone

Lecture 1: 01 – Intro

Lecture 2: 02 – install Next.js and Tailwind CSS and create the first template

Lecture 3: 03 – Add home header component

Lecture 4: 04 – Add body section

Lecture 5: 05 – Add footer component

Lecture 6: 06 – Create search page for web and image

Lecture 7: 07 – Update the search header component

Lecture 8: 08 – Complete the search box component

Lecture 9: 09 – Complete the search header options

Lecture 10: 10 – Fetch data from google search API and show the titles

Lecture 11: 11 – Handle possible errors

Lecture 12: 12 – Create search result component

Lecture 13: 13 – Add image results

Lecture 14: 14 – Add pagination component

Lecture 15: 15 – Add loading effects for web and image pages

Lecture 16: 16 – Deploy to Vercel

Chapter 3: Project – Instagram Clone

Lecture 1: 01 – Project preview

Lecture 2: 02 – Install Next.js and Tailwind CSS and create the first template

Lecture 3: 03 – Add header component

Lecture 4: 04 – Add next-auth and modify the header component

Lecture 5: 05 – Add modal functionality using react modal

Lecture 6: 06 – Add upload image functionality

Lecture 7: 07 – Add upload post functionality to the firestore

Lecture 8: 08 – Make the feed section responsive

Lecture 9: 09 – Complete the mini profile component

Lecture 10: 10 – Complete the post card of the feed section

Lecture 11: 11 – Add like functionality to the post card

Lecture 12: 12 – Add comment functionality to the post card

Lecture 13: 13 – Deploy to Vercel

Chapter 4: Project – X Clone

Lecture 1: 00 – Project preview of X clone

Lecture 2: 01 – Install Next.js and Tailwind CSS and create the first template

Lecture 3: 02 – Create pages and routes as well as components

Lecture 4: 03 – Modify the sidebar component

Lecture 5: 04 – Update the News component

Lecture 6: 05 – Add next-auth and modify the sidebar component

Lecture 7: 06 – Add mini profile to the sidebar component

Lecture 8: 07 – Add input component and update the home page

Lecture 9: 08 – Add Firebase storage and complete file upload functionality

Lecture 10: 09 – Add upload post functionality to the firestore

Lecture 11: 10 – Add feed component and update the home page

Lecture 12: 11 – Add icons component to the post component

Lecture 13: 12 – Update Icons component to handle likes

Lecture 14: 13 – Update deletePost function in Icons component to handle post deletion

Lecture 15: 14 – Install and implement recoil

Lecture 16: 15 – Add react-modal package and update CommentModal component

Lecture 17: 16 – Add comment functionality to the commentModal component and update Icons co

Lecture 18: 17 – Update PostPage component to fetch data from Firestore and display post det

Lecture 19: 18 – Add Comments component and update PostPage to display comments

Lecture 20: 19 – Add like functionality to Comment component

Lecture 21: 20 – Deploy to Vercel

Chapter 5: Project – Next Authentication using MongoDb, Mongoose and Clerk

Lecture 1: Intro

Lecture 2: Install Next.js and Tailwind CSS and create the first the template of the projec

Lecture 3: Create the header component

Lecture 4: Clerk documentation

Lecture 5: Add Authentication using Clerk

Lecture 6: Sync Clerk data to our application with webhooks

Lecture 7: Add mongoDb and mongoose to save user data from Clerk

Lecture 8: Complete Home and About pages

Chapter 6: Archives

Lecture 1: Project – IMDb Clone (Next 13)

Lecture 2: Project – Google Clone (Next 13)

Lecture 3: Project – IMDb Clone (Next 12)

Lecture 4: Project – Google Clone (Next 12)

Lecture 5: Project – Instagram Clone (Next 12)

Lecture 6: Project – Twitter Clone (Next 12)