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

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 دقیقه
    تاریخ انتشار: ۲۶ فروردین ۱۴۰۲
    طراحی سایت و خدمات سئو

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