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

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
  • 139,000 تومان
    بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
    خرید دانلودی فوری

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

    ایمیل شما:
    تولید کننده:
    شناسه: 9699
    حجم: 24826 مگابایت
    مدت زمان: 2660 دقیقه
    تاریخ انتشار: 26 فروردین 1402
    طراحی سایت و خدمات سئو

    139,000 تومان
    افزودن به سبد خرید