Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
React JS
Next.js Projects - 4 NextJS 14 projects (Instagram, Google.)

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

Loại khoá học: Web Development

Next.js 13 (reactjs framework) Projects. 4 NextJS 13 projects. IMDB, Instagram, Twitter, Google clone using Next js 13

image
50.000 VND
1.399.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

NEW Next.js 13 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 13)

    • 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 (Next.js 13)

    • style with Tailwind CSS

    • authenticate using next-auth

    • use google search api

    • include web and image search

  4. Twitter 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


Bạn sẽ học được gì

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

Yêu cầu

  • Basic understanding of HTML, CSS, Javascript and React
  • A Mac, Windows, or Linux computer

Nội dung khoá học

5 sections

Project - IMDb Clone

13 lectures
01 - Intro
01:26
02 - Install Next.js and Tailwind CSS and create the first template
12:54
03 - Add header section
14:55
04 - Add dark mode
20:11
05 - Create the about page
05:13
06 - Create the navbar component
13:51
07 - Fetch data from TMDB API in the home page
15:12
08 - handle the error
05:19
09 - Add loading effect using Next.js
09:51
10 - Add card component
20:46
11 - Add movie page
18:44
12 - Add search box
13:56
13 - Deploy to Vercel
04:45

Project - Google Clone

16 lectures
01 - Intro
01:47
02 - install Next.js and Tailwind CSS and create the first template
11:54
03 - Add home header component
11:54
04 - Add body section
38:33
05 - Add footer component
16:04
06 - Create search page for web and image
08:14
07 - Update the search header component
11:16
08 - Complete the search box component
15:27
09 - Complete the search header options
14:13
10 - Fetch data from google search API and show the titles
08:57
11 - Handle possible errors
12:20
12 - Create search result component
19:36
13 - Add image results
14:02
14 - Add pagination component
18:02
15 - Add loading effects for web and image pages
14:26
16 - Deploy to Vercel
05:33

Project - Instagram Clone

13 lectures
01 - Project preview
04:45
02 - Install Next.js and Tailwind CSS and create the first template
25:13
03 - Add header component
19:03
04 - Add next-auth and modify the header component
32:24
05 - Add modal functionality using react modal
24:56
06 - Add upload image functionality
34:09
07 - Add upload post functionality to the firestore
20:27
08 - Make the feed section responsive
06:36
09 - Complete the mini profile component
08:50
10 - Complete the post card of the feed section
22:27
11 - Add like functionality to the post card
26:09
12 - Add comment functionality to the post card
25:13
13 - Deploy to Vercel
07:33

Project - Twitter Clone

25 lectures
Preview of the twitter clone project
05:06
Install Nextjs and Tailwind CSS
19:27
Create Sidebar component
52:27
Create feed component and its header
17:52
Add the input section of the feed component
26:14
Add the post section of the feed component
35:31
Create the widgets component and the search bar
15:59
Create the news section of the widgets component
33:19
Create the random users section of the widgets component
27:09
Install next-auth and firebase and initialize the firebase
18:03
Complete the signin page
28:12
Get the session and modify sidebar and input components
28:19
Send data to firebase and add loading effect
58:33
Get post data from firestore and show them in the post section
22:31
Add like functionality to the post
32:42
Add delete functionality to the post
19:20
Add animation effect using framer motion
15:22
Install and implement recoil
18:37
Install and implement react-modal
53:10
Send comments to firestore, show the number of comments, & redirect by useRouter
22:43
Create post page
39:14
Get the comments from firestore and create the comment component
16:26
Complete the comment component
27:30
Deploy to vercel and fix the errors
21:53
Update - add firebase auth and remove next-auth
01:21:15

Archives

5 lectures
Project - IMDb Clone (Next 13)
05:14:18
Project - Google Clone (Next 13)
07:25:41
Project - IMDb Clone (Next 12)
02:36:41
Project - Google Clone (Next 12)
06:15:51
Project - Instagram Clone (Next 12)
06:45:19

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Complete Ruby Programmer - Master Ruby

Complete Ruby Programmer - Master Ruby

1.099.000 VND
50.000 VND
Visual Studio Code for Developers 2023: Beginner to Advanced

Visual Studio Code for Developers 2023: Beginner to Advanced

1.499.000 VND
50.000 VND
The Complete JavaScript Course 2024: From Zero to Expert!

The Complete JavaScript Course 2024: From Zero to Expert!

185 VND
50.000 VND
The Git & Github Bootcamp

The Git & Github Bootcamp

120 VND
50.000 VND
SQL for Data Analysis: Beginner MySQL Business Intelligence

SQL for Data Analysis: Beginner MySQL Business Intelligence

1.899.000 VND
50.000 VND
Build Solutions with Power Apps, Power Automate & SharePoint

Build Solutions with Power Apps, Power Automate & SharePoint

100 VND
50.000 VND
Unity 2023 Game Development : Build 6 Games with Unity & C#

Unity 2023 Game Development : Build 6 Games with Unity & C#

79 VND
50.000 VND
The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

185 VND
50.000 VND
Unit Testing for Typescript & NodeJs Developers with Jest

Unit Testing for Typescript & NodeJs Developers with Jest

100 VND
50.000 VND
Create an eCommerce Website Using Laravel (PHP & MySQL)

Create an eCommerce Website Using Laravel (PHP & MySQL)

1.049.000 VND
50.000 VND
The Freelance Stack: A real project with NextJS13 and Strapi

The Freelance Stack: A real project with NextJS13 and Strapi

50.000 VND
Time Series Analysis, Forecasting, and Machine Learning

Time Series Analysis, Forecasting, and Machine Learning

90 VND
50.000 VND
MongoDB with Java Spring Boot & Spring Framework

MongoDB with Java Spring Boot & Spring Framework

1.099.000 VND
50.000 VND
Build REST APIs with Django REST Framework and Python

Build REST APIs with Django REST Framework and Python

1.899.000 VND
50.000 VND
Svelte.js - The Complete Guide (incl. Sapper.js)

Svelte.js - The Complete Guide (incl. Sapper.js)

65 VND
50.000 VND
The Complete Cloud Computing Software Architecture Patterns

The Complete Cloud Computing Software Architecture Patterns

100 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi