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

Focused View

Dr. Sahand Ghavidel

44:19:22

698 View

1. Project - IMDb Clone (Next 13)

1.1 Source code and final version.html

1. Intro.mp4

01:55

2. Install Next js 13.mp4

25:18

3. Install Tailwind CSS.mp4

17:15

4. Create the header section.mp4

34:22

5. Add dark mode.mp4

41:55

6. Create the about page.mp4

08:19

7. Create the navbar component.mp4

21:35

8. Fetch data from TMDB API in the home page.mp4

30:55

9. Handle the error.mp4

09:25

10. Add loading effect.mp4

08:45

11. Add card component.mp4

44:40

12. Add movie page.mp4

29:05

13. Add search ability.mp4

34:30

14. Deploy to Vercel.mp4

06:15

15. search params object is empty in production with next 13 app.html

2. Project - Google Clone (Next 13)

1.1 Source code and final version.html

1. 01 - Intro.mp4

02:39

2. 02 - Install next js and create the first template.mp4

29:29

3. 03 - Install tailwind css.mp4

13:00

4. 04 - Add home header component.mp4

25:53

5. 05 - Add body section.mp4

01:00:14

6. 06 - Add footer component.mp4

36:40

7. 07 - Create search page for web and image.mp4

12:50

8. 08 - Update the search header component.mp4

24:23

9. 09 - Complete the search box component.mp4

35:11

10. 10 - Complete the search header options.mp4

25:08

11. 11 - Fetch data from google search API and show the titles.mp4

22:59

12. 12 - Handle possible errors.mp4

16:31

13. 13 - Create search result component.mp4

35:24

14. 14 - Add image results.mp4

29:55

15. 15 - Add pagination component.mp4

38:14

16. 1.mp4

25:30

17. 2.mp4

11:33

3. Project - Instagram Clone

1.1 Final version.html

1.2 GitHub Repository.html

1. Preview of instagram clone project.mp4

05:04

2. Install Nextjs and Tailwind CSS and create homepage template.mp4

14:31

3. Add instageram logo to the left side of the header component.mp4

22:24

4. Add search bar to the header component.mp4

17:11

5. Add the menu and profile image at the right side of the header.mp4

11:12

6. Implement sticky header.mp4

06:38

7. Populate fake data using minifaker and create feed and story components.mp4

24:15

8. Style the story section and install tailwind-scrollbar.mp4

13:50

9. Create posts and post components and make some dummy data.mp4

14:38

10. Create the header and image sections of the post component.mp4

12:35

11. Create the buttons section of the post component.mp4

08:40

12. Add the caption and input box of the post component.mp4

12:15

13. Make the feed section responsive.mp4

06:43

14. Create the mini profile component.mp4

14:34

15. Build the suggestion part of the feed component.mp4

22:58

16. Install next-auth and firebase and initilize the firebase.mp4

26:50

17. Complete the signin page.mp4

30:24

18. Get the session and modify the header component with google data.mp4

18:06

19. Modify mini profile and story components to include the session.mp4

28:07

20. Install recoil and add atom and UploadModal component.mp4

25:00

21. Install and impliment react-modal.mp4

13:32

22. Complete the UploadModal component.mp4

30:31

23. Create a post and add it to firestore and get the downloadURL.mp4

48:06

24. Get the post data from database and show it in the feed section.mp4

20:40

25. Hide buttons and input section when the user is logged out.mp4

12:26

26. Add comment to the firebase database.mp4

18:40

27. Show comments in the comments section and get data from the firebase database.mp4

25:44

28. Apply like functionality.mp4

31:38

29. Deploy to vercel.mp4

23:39

30. Update 1 - show the number of likes.mp4

06:52

31. Update 2 - add firebase auth insead of next-auth.mp4

01:02:48

4. Project - Twitter Clone

1.1 Final version.html

1.2 Github repository.html

1. Preview of the twitter clone project.mp4

05:06

2. Install Nextjs and Tailwind CSS.mp4

19:27

3. Create Sidebar component.mp4

52:27

4. Create feed component and its header.mp4

17:52

5. Add the input section of the feed component.mp4

26:14

6. Add the post section of the feed component.mp4

35:31

7. Create the widgets component and the search bar.mp4

15:59

8. Create the news section of the widgets component.mp4

33:19

9. Create the random users section of the widgets component.mp4

27:09

10. Install next-auth and firebase and initialize the firebase.mp4

18:03

11. Complete the signin page.mp4

28:12

12. Get the session and modify sidebar and input components.mp4

28:19

13. Send data to firebase and add loading effect.mp4

58:33

14. Get post data from firestore and show them in the post section.mp4

22:31

15. Add like functionality to the post.mp4

32:42

16. Add delete functionality to the post.mp4

19:20

17. Add animation effect using framer motion.mp4

15:22

18. Install and implement recoil.mp4

18:37

19. Install and implement react-modal.mp4

53:10

20. Send comments to firestore, show the number of comments, & redirect by useRouter.mp4

22:43

21. Create post page.mp4

39:14

22. Get the comments from firestore and create the comment component.mp4

16:26

23. Complete the comment component.mp4

27:30

24. Deploy to vercel and fix the errors.mp4

21:53

25. Update - add firebase auth and remove next-auth.mp4

01:21:15

5. Project - IMDb Clone (Next 12)

1.1 Final version.html

1.2 GitHub repository.html

1. Introduction to the IMDB clone project.mp4

01:46

2. Overview of the IMDB clone project.mp4

02:00

3. Install Next.js and Tailwind CSS.mp4

19:46

4. Create components and finish the template.mp4

12:56

5. Create the header component.mp4

20:27

6. Style the header section.mp4

17:45

7. Create the Navbar component and requests.js.mp4

24:24

8. Create server side function and pass it to client side.mp4

15:56

9. Create card component.mp4

20:12

10. Complete the card component and make the result section responsive.mp4

12:14

11. Deploy to vercel and add a custom domain name.mp4

08:59

6. Project - Google Clone (Next 12)

1.1 Final version.html

1.2 GitHub Repository.html

1. Preview of Google clone project.mp4

04:11

2.1 GitHub Repository.html

2. Install NextJS and Tailwind CSS.mp4

14:18

3. Create the header section.mp4

14:53

4. Add authentication and get user data from google.mp4

54:23

5. Create the body section.mp4

36:35

6. Create footer component.mp4

09:34

7. Get the term from input and redirect to the related page.mp4

12:45

8. Create search header component.mp4

38:38

9. Create search header options component.mp4

34:08

10. Get data from google api and create the mock data.mp4

27:55

11. Create the about data section and modify the title in search page.mp4

15:06

12. Complete the result section and install html react parser.mp4

22:36

13. Create pagination component.mp4

26:41

14. Add image results component.mp4

29:12

15. Deploy and fix the remaining buttons.mp4

34:50

Description

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

What You'll Learn?

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

Who is this for?

Developers who want to start using NextJS and build real-world applications

Students who want to strengthen their portfolio with clone projects

More details

Description
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:

IMDB Clone (Next.js 13)
use TMBD database
style with Tailwind CSS
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
Google Clone (Next.js 13)
style with Tailwind CSS
authenticate using next-auth
use google search api
include web and image search
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

Who this course is for:
Developers who want to start using NextJS and build real-world applications
Students who want to strengthen their portfolio with clone projects

User Reviews

Rating

average 0

Total votes0

Focused display

Sahand Ghavidel holds degrees in Mathematics, Electrical, and Computer Science, and earned a doctoral degree from Faculty of Engineering and IT, University of Technology Sydney. Sahand has researched for more than 10 years about artificial algorithms and optimization. He has won several awards for his outstanding research and has published more than 40 ISI journals and attended to many international conferences. The number of people using and citing Sahand's publications is significantly high which is more than 1600 citations, according to google scholar (April, 2021). He was also awarded the outstanding reviewer in the international journal called "International Journal of Electrical Power & Energy Systems" with CiteScore of 5.79 in recognition of his contributions added to the quality of the journal. Sahand has more than 15 years of programming experience. The first programming language he learned was visual basic when he was just 12 years old. Since then, he has made hundreds of websites, and apps with different programming languages like JavaScript and Python.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.