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

سرفصل های دوره

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

1. Project - IMDb Clone (Next 13)

1.1 Source code and final version.html

1. Intro

2. Install Next js 13

3. Install Tailwind CSS

4. Create the header section

5. Add dark mode

6. Create the about page

7. Create the navbar component

8. Fetch data from TMDB API in the home page

9. Handle the error

10. Add loading effect

11. Add card component

12. Add movie page

13. Add search ability

14. Deploy to Vercel

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

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

3. 03 - Install tailwind css

4. 04 - Add home header component

5. 05 - Add body section

6. 06 - Add footer component

7. 07 - Create search page for web and image

8. 08 - Update the search header component

9. 09 - Complete the search box component

10. 10 - Complete the search header options

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

12. 12 - Handle possible errors

13. 13 - Create search result component

14. 14 - Add image results

15. 15 - Add pagination component

16. 1

17. 2

3. Project - Instagram Clone

1.1 Final version.html

1.2 GitHub Repository.html

1. Preview of instagram clone project

2. Install Nextjs and Tailwind CSS and create homepage template

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

4. Add search bar to the header component

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

6. Implement sticky header

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

8. Style the story section and install tailwind-scrollbar

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

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

11. Create the buttons section of the post component

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

13. Make the feed section responsive

14. Create the mini profile component

15. Build the suggestion part of the feed component

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

17. Complete the signin page

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

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

20. Install recoil and add atom and UploadModal component

21. Install and impliment react-modal

22. Complete the UploadModal component

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

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

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

26. Add comment to the firebase database

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

28. Apply like functionality

29. Deploy to vercel

30. Update 1 - show the number of likes

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

4. Project - Twitter Clone

1.1 Final version.html

1.2 Github repository.html

1. Preview of the twitter clone project

2. Install Nextjs and Tailwind CSS

3. Create Sidebar component

4. Create feed component and its header

5. Add the input section of the feed component

6. Add the post section of the feed component

7. Create the widgets component and the search bar

8. Create the news section of the widgets component

9. Create the random users section of the widgets component

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

11. Complete the signin page

12. Get the session and modify sidebar and input components

13. Send data to firebase and add loading effect

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

15. Add like functionality to the post

16. Add delete functionality to the post

17. Add animation effect using framer motion

18. Install and implement recoil

19. Install and implement react-modal

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

21. Create post page

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

23. Complete the comment component

24. Deploy to vercel and fix the errors

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

5. Project - IMDb Clone (Next 12)

1.1 Final version.html

1.2 GitHub repository.html

1. Introduction to the IMDB clone project

2. Overview of the IMDB clone project

3. Install Next.js and Tailwind CSS

4. Create components and finish the template

5. Create the header component

6. Style the header section

7. Create the Navbar component and requests.js

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

9. Create card component

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

11. Deploy to vercel and add a custom domain name

6. Project - Google Clone (Next 12)

1.1 Final version.html

1.2 GitHub Repository.html

1. Preview of Google clone project

2.1 GitHub Repository.html

2. Install NextJS and Tailwind CSS

3. Create the header section

4. Add authentication and get user data from google

5. Create the body section

6. Create footer component

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

8. Create search header component

9. Create search header options component

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

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

12. Complete the result section and install html react parser

13. Create pagination component

14. Add image results component

15. Deploy and fix the remaining buttons

63,400 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training