Netflix Clone using Angular | Angular tutorial to build Netflix Clone | Angular with Tailwind CSS

Поділитися
Вставка
  • Опубліковано 16 жов 2024
  • 🎬 Netflix Clone using Angular | Angular Tutorial with Tailwind CSS 🚀
    👋 Welcome to this exciting Angular tutorial where we'll be diving into the world of web development by building a Netflix Clone from scratch using Angular and enhancing its aesthetics with the power of Tailwind CSS!
    🛠️ Project Overview:
    In this step-by-step guide, we'll cover the entire process of creating a Netflix-inspired application using Angular. From setting up your development environment to implementing dynamic components, routing, and fetching data, you'll gain valuable insights into building robust Angular applications.
    🔥 Key Features:
    Angular fundamentals and architecture
    Tailwind CSS for styling and responsiveness
    Dynamic component creation
    Routing and navigation in Angular
    Integration with external APIs to fetch movie data
    Building a visually appealing user interface
    🚀 Who is this tutorial for?
    Whether you're a beginner looking to grasp the basics of Angular or an experienced developer eager to explore Tailwind CSS in an Angular project, this tutorial is designed for you. Join us on this coding journey and level up your web development skills.
    📁 Project Files:
    GitHub repository link: [github.com/ysh...]
    Join this channel to get access to the perks:
    / @letsprogram30
    📣 Talk to Us!
    Do you have questions, tips, or just want to share your excitement? The comment section is the place to be. Let's build a community where coding dreams come true! 💬
    📢 Connect with us on social media for more exciting tutorials and updates:
    Support me: / letsprogram
    Connect with me on the below Social links:
    Let's Program Blog: letsprogram.in/
    UA-cam: / @letsprogram30
    Instagram: / lets.program
    LinkedIn: / sashikumar-yadav
    Telegram: t.me/letsprogr...
    Twitter: / yshashi30
    Angular Chat App
    • Create Chat Applicatio...
    MEAN stack AUTH Series
    • MEAN stack project set...
    Angular Signals
    • Signals in Angular | H...
    Angular 14 Login and Signup Page | Part 1
    • Angular 14 Login and S...
    Angular 14 Form Validation| Part 2
    • Angular 14 Reactive Fo...
    Login & Signup API creation & integration with Angular | Part 3
    • Login and Signup using...
    Encrypt Password in .NET 6 | Password strength checker in Angular
    • Encrypt Password in .N...
    Angular Authentication with Hashed Password | Part 5
    • Angular Authentication...
    Create JWT token in .NET 6 | Angular + .NET authentication | Part 6
    • Create JWT token in .N...
    Implement JWT token in Angular 14| Interceptors in Angular | Part 7
    • Implement JWT token in...
    Angular News Application
    • Angular 14 News Applic...
    Crypto Currency Application
    • Angular Project - Cryp...
    Angular TODO Application
    • TODO Application in An...
    Angular 13 CRUD using Material UI
    • Angular 13 CRUD with A...
    Angular QUIZ Application
    • Angular 12 Quiz Applic...
    Angular Add-to-cart app
    • Add to Cart in Angular...
    #AngularTutorial #TailwindCSS #NetflixClone #WebDevelopment #AngularProject #FrontendDevelopment #CodingTutorial #WebDesign #AngularFramework #TailwindStyling #AngularRouting #APIIntegration #NetflixInspired #AngularComponents #UIUXDesign #LearnToCode #WebDevJourney #ProgrammingTutorial #SubscribeNow #CodeWithMe #TechExplained #DeveloperCommunity #OpenSource #GitHubRepo #CodingTips #SoftwareDevelopment #AngularBeginner #TailwindCSSMagic #WebDevChallenge #AngularTailwindCombo #CodingJourney #happycoding

КОМЕНТАРІ • 50

  • @krishna-my983
    @krishna-my983 10 місяців тому +17

    Thanks brother, For bringing this. In a time, everyone building clones using NextJs or React, This is the best to learn for Angular developers like me.

    • @letsprogram30
      @letsprogram30  10 місяців тому +9

      Then also be ready for my Jira clone. Coming up very soon😉

  • @br3ak_
    @br3ak_ 5 місяців тому

    I'm building my first middle-level portfolio since I want to change jobs and I used this as inspiration for one of the projects. I ended up with an almost completely different source code since I did most things differently, and I am currently working on completely revamping the UI and adding up more functionality (navigation - currently top bar is static/cosmetic, new Details page when you click on individual movies/tv series, and I will see what other ideas I come up with)
    As for feedback for you, you should aim to be a bit less chaotic and in a hurry, take a bit more time to explain your thoughts and what you're doing, maybe do a bit more editing, this is the biggest thing to improve upon.
    Good luck!

    • @letsprogram30
      @letsprogram30  5 місяців тому

      Thanks man! I really appreciate that feedback! I will work on it for sure 😊

  • @xCrOaTiEnSniPZzx
    @xCrOaTiEnSniPZzx 10 місяців тому

    Finaly an Angular 17 tutorial! :)
    One little qustion, what extensionm do you use in vsCode, that you can generate pipes or components with a right click?

  • @mahdiandalib186
    @mahdiandalib186 10 місяців тому +1

    thx man, plz continue creating full web app's using angular

    • @letsprogram30
      @letsprogram30  10 місяців тому

      Sure man, next is Jira clone🙂

    • @mahdiandalib186
      @mahdiandalib186 10 місяців тому

      thx, man... i hope you create drag and drop functionality with animation using angular.... and plz talk about creating enums in ts....@@letsprogram30

  • @TazkeyaIslam-c9n
    @TazkeyaIslam-c9n 10 місяців тому

    Waiting for more angular projects from you !!

    • @letsprogram30
      @letsprogram30  10 місяців тому

      Sure, will drop soon on Jira clone

  • @FreeFire-sn8fd
    @FreeFire-sn8fd 4 місяці тому +2

    hello i am using angular 18 and i am getting this error
    X [ERROR] Can't find stylesheet to import.

    4 │ @import 'node_modules/swiper/swiper.scss';
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    src\styles.scss 4:9 root stylesheet [plugin angular-sass]
    angular:styles/global:styles:1:8:
    1 │ @import 'src/styles.scss';
    ╵ ~~~~~~~~~~~~~~~~~

    • @letsprogram30
      @letsprogram30  4 місяці тому

      Check for the compatible version of swiper for v18. Make sure to install it properly and make use of it.

    • @a.nmolll
      @a.nmolll 3 місяці тому

      I am also facing this issue if anyone have found the solution please lemme know :)

  • @ฐิติช่างภู่
    @ฐิติช่างภู่ 9 місяців тому

    Waiting for her project and thank you in advance❤

  • @krishna-my983
    @krishna-my983 10 місяців тому +1

    Can you come up with a playlist series of Reactive/Declarative way of writing angular code instead of the old Imperative using RxJs? Even if you can make it paid, I will take it up.

  • @webers6778
    @webers6778 7 місяців тому

    perfect work , Super thanks

  • @alexcostal3749
    @alexcostal3749 29 днів тому

    Brother, How can we Deploy this site? Can you please show us?or Atleast Guide please 🙏

  • @JakeSmith-kx7vc
    @JakeSmith-kx7vc 4 місяці тому

    Super in every thing ❤🎉

  • @debankurbhattacharjee3021
    @debankurbhattacharjee3021 10 місяців тому

    Thanks for bringing such a good tutorial ! The youtube community is flooded with Next.js and React.js stuffs..... Angular related contents are fewer introduced , thanks for making it possible for us! 🤗
    and one thing can i use also Facebook Login here ? is it possible ?

    • @letsprogram30
      @letsprogram30  10 місяців тому

      Yes Facebook login can be integrated 👍

  • @alexcostal3749
    @alexcostal3749 29 днів тому

    It was Fun

    • @letsprogram30
      @letsprogram30  29 днів тому +1

      @@alexcostal3749 I’m glad you liked it 🙂

  • @mahdiandalib186
    @mahdiandalib186 10 місяців тому +1

    thx man, plz create an lms using angular and tailwindcss also

    • @letsprogram30
      @letsprogram30  10 місяців тому

      Maybe I can start things with CMS and then we focus to LMS

    • @mahdiandalib186
      @mahdiandalib186 10 місяців тому

      yes, thx man, for cms it would be really nice if you would teach us how to create categories/subcategories/tags/gallery and assign them to a specific product or news for example.... in admin panel and also how to implement comment section like youtube....@@letsprogram30

  • @JakeSmith-kx7vc
    @JakeSmith-kx7vc 4 місяці тому

    Bro can you add filter search for this site..please ?

  • @ritwikgupta7540
    @ritwikgupta7540 10 місяців тому

    Amazing project bro!!...how long did it take for you to build it?

    • @letsprogram30
      @letsprogram30  10 місяців тому +2

      Thanks man!
      It took me about 3-4 hours to build it with the google authentication 🙂

  • @pankajrawat7435
    @pankajrawat7435 7 місяців тому

    Does this course include SSR ?

  • @draconianyt5174
    @draconianyt5174 10 місяців тому

    Sir pegination,search or sorting ssr video kab ayega

  • @deanambrox8069
    @deanambrox8069 10 місяців тому

    Thank you Shashi❤

  • @radudamian3473
    @radudamian3473 9 місяців тому

    Thanks ! One fix... loop wasn't working for me, so my solution is adding (the version and playlist options) in the embed string: ${this.key}?version=3&playlist=${this.key}&autoplay=1

  • @yashbadgujar-qq9iz
    @yashbadgujar-qq9iz 7 місяців тому

    cannot resolve this issue --Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters

  • @mahdiandalib186
    @mahdiandalib186 10 місяців тому

    can u also teach how to create a vod support using angular

  • @matthewkk5087
    @matthewkk5087 10 місяців тому

    is that angular 17? i have never seen inject method. I always use constructor :D

    • @letsprogram30
      @letsprogram30  10 місяців тому

      No I have created the application in v16.
      The inject function was introduced in v14.

    • @matthewkk5087
      @matthewkk5087 10 місяців тому

      wow didnot know that.
      @@letsprogram30

  • @SefyanKEHAIL
    @SefyanKEHAIL 6 місяців тому

    Amazing stuff

  • @vikasshri-wy2ro
    @vikasshri-wy2ro Місяць тому

    which version of angular is this

  • @rishiraj2548
    @rishiraj2548 10 місяців тому

    Great thanks

  • @deveshchoudhary888
    @deveshchoudhary888 7 місяців тому

    DO have API link or something else

  • @ntesla5
    @ntesla5 5 місяців тому

    I was very much interested to build complete end to end project, but initial few minutes I lost interest in your video. Please if you are building any project start from scratch, don't keep any dependency of older videos.

    • @letsprogram30
      @letsprogram30  5 місяців тому

      You can still find the old project to get things started🙂