OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

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

Dr. Sahand Ghavidel

NEW Next.js 14 Projects. Build 4 brand new NextJS hands-on projects including IMDB, Instagram, Twitter and Google clones.

Welcome to the best course for learning next js through the development of real-world applications.

Read more

NEW Next.js 14 Projects. Build 4 brand new NextJS hands-on projects including IMDB, Instagram, Twitter and Google clones.

Welcome to the best course for learning next js through the development of real-world applications.

This is a project-based course that includes hands-on projects such as Instagram and Google clones.

We are going to use the best practices of Nextjs to design and build fully functional websites.

So far, three projects have been created for this course , including IMDB, Instagram, and Google clones, and more projects are being added each month. You can check the preview of each project in the course curriculum.

In this brand new course, you will learn rendering techniques such as how to build static site pages, server side rendering and incremental static regeneration. You will learn about pagination, image uploading functionality, and state management using recoil. You are going to be able to build amazing responsive websites with Tailwind CSS latest version (3.0).

This course also teaches you how to use Firebase for database and storage. We are going to use next-auth for authentication. And you are going to learn how to use TMDB and google search APIs.

Finally, you are going to learn how to deploy your apps using vercel with your own custom domain name.

My name is Sahand, and I have over 16 years of programming experience.

I will be your instructor and answer any questions you may have in the Q&A section.

The project you are going to build in this course:

  1. IMDB Clone (Next.js 14)

    • use TMBD database

    • style with Tailwind CSS

  2. Instagram Clone

    • use Firebase for database and storage

    • style with Tailwind CSS

    • authenticate using next-auth

    • apply like and comment functionality

    • add upload functionality and use Image tag of nextjs

  3. Google Clone

    • style with Tailwind CSS

    • authenticate using next-auth

    • use google search api

    • include web and image search

  4. X Clone

    • style with Tailwind CSS

    • authenticate using next-auth and Firebase auth

    • apply like and comment functionality

    • add upload functionality and use Image tag of nextjs

  5. Next Authentication using MongoDb, Mongoose and Clerk

    • authenticate using Clerk and mongodb

    • apply full authentication including forgot password, email verification

Enroll now

What's inside

Learning objectives

  • Learn to build 4 practical powerful nextjs apps including tmdb, instagram, and google clones
  • Learn all about rendering techniques such as how to build static site pages, server side rendering and incremental static regeneration
  • Learn about pagination, image uploading functionality, and state management using recoil.
  • Learn how to use firebase for database and storage.
  • Learn how to use next-auth for authentication
  • Learn how to use tmdb and google search apis
  • Learn how to deploy your apps using vercel with your own custom domain name

Syllabus

Project - IMDb Clone
01 - Intro
02 - Install Next.js and Tailwind CSS and create the first template
03 - Add header section
Read more
04 - Add dark mode
05 - Create the about page
06 - Create the navbar component
07 - Fetch data from TMDB API in the home page
08 - handle the error
09 - Add loading effect using Next.js
10 - Add card component
11 - Add movie page
12 - Add search box
13 - Deploy to Vercel
Project - Google Clone
02 - install Next.js and Tailwind CSS and create the first template
03 - Add home header component
04 - Add body section
05 - Add footer component
06 - Create search page for web and image
07 - Update the search header component
08 - Complete the search box component
09 - Complete the search header options
10 - Fetch data from google search API and show the titles
11 - Handle possible errors
12 - Create search result component
13 - Add image results
14 - Add pagination component
15 - Add loading effects for web and image pages
16 - Deploy to Vercel
Project - Instagram Clone
01 - Project preview
03 - Add header component
04 - Add next-auth and modify the header component
05 - Add modal functionality using react modal
06 - Add upload image functionality
07 - Add upload post functionality to the firestore
08 - Make the feed section responsive
09 - Complete the mini profile component
10 - Complete the post card of the feed section
11 - Add like functionality to the post card
12 - Add comment functionality to the post card
In this project, we are going to create a twitter clone using next js, tailwind css and firebase.
00 - Project preview of X clone
01 - Install Next.js and Tailwind CSS and create the first template
02 - Create pages and routes as well as components
03 - Modify the sidebar component
04 - Update the News component
05 - Add next-auth and modify the sidebar component
06 - Add mini profile to the sidebar component
07 - Add input component and update the home page
08 - Add Firebase storage and complete file upload functionality
09 - Add upload post functionality to the firestore
10 - Add feed component and update the home page
11 - Add icons component to the post component
12 - Update Icons component to handle likes
13 - Update deletePost function in Icons component to handle post deletion
14 - Install and implement recoil
15 - Add react-modal package and update CommentModal component
16 - Add comment functionality to the commentModal component and update Icons co
17 - Update PostPage component to fetch data from Firestore and display post det
18 - Add Comments component and update PostPage to display comments
19 - Add like functionality to Comment component
20 - Deploy to Vercel
Project - Next Authentication using MongoDb, Mongoose and Clerk
Intro
Install Next.js and Tailwind CSS and create the first the template of the projec
Create the header component
Clerk documentation
Add Authentication using Clerk
Sync Clerk data to our application with webhooks
Add mongoDb and mongoose to save user data from Clerk
Complete Home and About pages
Archives
Project - IMDb Clone (Next 13)
Project - Google Clone (Next 13)
Project - IMDb Clone (Next 12)
Project - Google Clone (Next 12)
Project - Instagram Clone (Next 12)
Project - Twitter Clone (Next 12)

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Develops advanced professional skills in this in-demand frontend JavaScript framework, including pagination, image upload functionality, and state management
Focuses on Next.js, which is a bleeding-edge JavaScript framework that is modern, and has been recently revised
Builds a strong foundation in the key concepts and technologies foundational to Node.js programming
Emphasizes hands-on learning, which enables you to apply what you're learning in real-world scenarios
Teaches using a series of practical projects, such as building clones of Instagram, Google, and Twitter
Taught by an instructor with 16 years of experience in programming and extensive experience in teaching Next.js, which students often seek out

Save this course

Save Next.js Projects - 5 NextJS 14 projects (Instagram, Google.) to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Next.js Projects - 5 NextJS 14 projects (Instagram, Google.) with these activities:
Set up Next.js development environment
Build a solid development environment before you start coding. This will help prevent headaches as you work on course projects.
Browse courses on Next.js
Show steps
  • Install the Node.js runtime
  • Install the Next.js framework
  • Create a new Next.js project
  • Run the Next.js development server
Build a simple Next.js website
Building a simple website will help you get familiar with the Next.js framework and its basic features.
Show steps
  • Create a new Next.js project
  • Add a simple page to the project
  • Add some basic styling to the page
  • Deploy the website to a hosting provider
Solve Next.js exercises
Solving exercises will help you improve your understanding of Next.js concepts and syntax.
Show steps
  • Find a set of Next.js exercises
  • Solve the exercises one by one
  • Check your solutions against the provided answers
Six other activities
Expand to see all activities and additional details
Show all nine activities
Watch Next.js video tutorials
Watching video tutorials can help you learn Next.js from experienced developers.
Show steps
  • Find a series of Next.js video tutorials
  • Watch the tutorials in sequence
  • Take notes or create summaries of the key points
Write a blog post about Next.js
Writing a blog post will help you solidify your understanding of Next.js and share your knowledge with others.
Show steps
  • Choose a topic for your blog post
  • Research the topic and gather information
  • Write the blog post
  • Publish the blog post on your website or blog
  • Promote the blog post on social media
Attend a Next.js meetup or conference
Attending a meetup or conference will help you connect with other Next.js developers and learn from their experiences.
Show steps
  • Find a Next.js meetup or conference in your area
  • Register for the event
  • Attend the event and participate in the discussions
Participate in a Next.js workshop
Participating in a workshop will give you the opportunity to learn Next.js from an experienced instructor and get hands-on practice.
Show steps
  • Find a Next.js workshop in your area
  • Register for the workshop
  • Attend the workshop and participate in the exercises
Contribute to the Next.js open-source project
Contributing to the Next.js open-source project will give you the opportunity to work on real-world Next.js code and contribute to the community.
Show steps
  • Find an issue or feature request on the Next.js GitHub repository
  • Fork the Next.js repository
  • Create a branch for your changes
  • Make your changes and submit a pull request
Join a Next.js study group
Joining a study group will give you the opportunity to discuss Next.js concepts with other learners and get help with your projects.
Show steps
  • Find a Next.js study group in your area or online
  • Join the study group
  • Participate in the study group's discussions and activities

Career center

Learners who complete Next.js Projects - 5 NextJS 14 projects (Instagram, Google.) will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Next.js Projects - 5 NextJS 14 projects (Instagram, Google.).
Master Next.js 14 - Full-Stack Complete Guide
Most relevant
Next.js From Scratch 2024
Most relevant
Mastering Next.js - Build Airbnb Clone from Scratch (2024)
Most relevant
TypeScript & Next.js 14: Building a Tech Ticketing App
Most relevant
Next.js 14 & React - The Complete Guide
Most relevant
Complete React, Next.js & TypeScript Projects Course 2024
Most relevant
Next.js by Example
Most relevant
Tailwind CSS From Scratch | Learn By Building Projects
Most relevant
Next.js - Build Full Stack Apps with Next.js & TypeScript
Course image
Effort
54 total hours
Via
Udemy
Instructor
Dr. Sahand Ghavidel
Language
English
Good to know
Develops advanced professional skills in this in-demand frontend JavaScript framework, including pagination, image upload functionality, and state management
Focuses on Next.js, which is a bleeding-edge JavaScript framework that is modern, and has been recently revised
Builds a strong foundation in the key concepts and technologies foundational to Node.js programming
Emphasizes hands-on learning, which enables you to apply what you're learning in real-world scenarios
Teaches using a series of practical projects, such as building clones of Instagram, Google, and Twitter
Taught by an instructor with 16 years of experience in programming and extensive experience in teaching Next.js, which students often seek out
Share and help others discover this course
Facebook LinkedIn X Reddit Link Email
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser