Frontend System Design Yatra Season 1 | Browser & Communication Techniques | Beginner To Advanced 🔥

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 พ.ย. 2024

ความคิดเห็น • 67

  • @js_cafe
    @js_cafe  หลายเดือนก่อน +20

    Let's see who finishes this series first 💪

    • @ksubramanyeshwara
      @ksubramanyeshwara หลายเดือนก่อน

      Thank you for the series. Currently finishing the JavaScript. Should I learn ReactJS first or this one?

    • @Abhishek-fo3fc
      @Abhishek-fo3fc หลายเดือนก่อน +1

      I am Starting this one right now

    • @mdsafikulislam9113
      @mdsafikulislam9113 หลายเดือนก่อน

      Thanks

    • @sohammondal578
      @sohammondal578 หลายเดือนก่อน +1

      @@ksubramanyeshwara Learn this one first. This course is framework agnostic.

    • @ksubramanyeshwara
      @ksubramanyeshwara หลายเดือนก่อน

      @@sohammondal578 thank you 😊

  • @Armstrong153
    @Armstrong153 2 วันที่ผ่านมา

    I have been watching your videos for a while, I can say you sound so genuine and your content and the way you explain is crisp!!

  • @farazahmed1668
    @farazahmed1668 หลายเดือนก่อน +3

    The voice quality is amazing.

  • @adityabhagat4210
    @adityabhagat4210 หลายเดือนก่อน +3

    Your content is great, helped me alot during my interview prep,
    thank you 👌👌

  • @hiddensecret
    @hiddensecret หลายเดือนก่อน +1

    00:05 Introduction to frontend system design yatra season 1
    02:33 Introduction to Ziku Cloud
    07:55 Frontend system design components overview
    10:28 Browser rendering process overview
    15:44 Understanding the concept of render tree in frontend system design
    18:15 Importance of render tree and parsing steps
    22:33 Creating wireframes and painting in frontend design
    24:48 Compositing in browsers involves layering multiple elements on top of each other.
    29:13 HTTP and TCP protocols for web browsing
    31:26 Understanding UDP connection and its impact on data exchange
    35:59 HTTP response status codes categorized in Five Pillars
    38:11 Introduction to REST APIs and its rules
    42:24 Setting up an Express server for system design
    45:03 Setting up server and defining callbacks
    50:06 Creating and handling POST requests in frontend system design
    52:53 Using PUT request to update specific resources
    58:16 Demonstrating patch API for partial data updates
    1:00:53 Introduction to GraphQL in frontend system design
    1:05:28 GraphQL vs REST comparison in frontend system design
    1:07:35 Leveraging GraphQL for dynamic data fetching and customization.
    1:12:31 Setting up Apollo GraphQL server and importing queries
    1:15:03 Defining schema for users, problems, and API queries in GraphQL
    1:19:59 Implementation of resolvers and creating an Apollo server
    1:22:37 Setting up the server and resolving issues
    1:28:04 Iterating over user data to filter and replace IDs in problems
    1:30:30 Implementing solver functionality with collaborative problem-solving
    1:35:40 Introduction to GraphQL and its benefits
    1:38:27 trpc leverages TypeScript for client-server communication
    1:43:12 Leveraging trpc for syncing vanilla TypeScript and TypeScript Express server
    1:45:48 Integrating trpc server with Express in frontend system design
    1:51:01 Setting up basic client using vanilla TypeScript template
    1:53:46 Setting up trpc server and client for app router communication.
    1:59:26 Updating problems using mutation and async function
    2:02:06 Understanding trpc basics for client-server communication
    2:06:59 Communication in gRPC backend services
    2:09:10 Setting up gRPC server and client in Node.js
    2:14:33 Defining and implementing a problem list with array representation and placeholder
    2:17:12 Setting up Protobuf and gRPC in JavaScript
    2:23:03 Boilerplate code for starting the server and defining methods for making calls.
    2:25:47 Setting up a basic gRPC server with nodejs
    2:32:18 Client communication and error handling
    2:35:23 Using gRPC for powerful service communication
    2:41:16 Explaining short polling and long polling techniques
    2:43:43 Implementing short polling technique for QR code login verification
    2:49:46 Short polling use cases and scalability challenges
    2:52:05 Long polling is a way of making Network calls only when there is a certain update from the response.
    2:57:57 Implementing client-side polling server for new messages
    3:00:51 Long polling reduces unnecessary API calls
    3:05:51 Using WebSocket for real-time data implementation
    3:08:54 Handling websocket connections and communication in a frontend system design.
    3:15:06 WebSocket communication in browser at Local Host 8080
    3:17:48 Web Hooks are automated HTTP requests triggered by events in source systems.
    3:22:42 Web hooks are secure and trigger third party vendor APIs.
    3:25:06 Introduction to Web Hooks

  • @rajaryan5884
    @rajaryan5884 หลายเดือนก่อน +1

    Bro welcome back what a banger comeback to make

  • @abhishekkhatana1256
    @abhishekkhatana1256 หลายเดือนก่อน +1

    Always come with Banger content bhaiya hat's off u 🙌🙌🙌🙌

  • @KartikD97
    @KartikD97 24 วันที่ผ่านมา

    Great Information Brother 🎉

  • @MukeshKumar-bt5gb
    @MukeshKumar-bt5gb หลายเดือนก่อน

    Amazing series Vedant, Will be sharing with my network🎉

  • @balrajmali1480
    @balrajmali1480 หลายเดือนก่อน

    JsCafe I just checkout your channel I think you should create this kind of stuff. This will help us as audience to grow and you as a content creator. Other stuff like basic ,MERN and Next is already over crowed and Teacher like #harkirat and #hitesh already taken it to next level in terms of Quality , Content ,etc. but This content also benefits developer like us intermediate to advance and will help to increase our understanding

  • @gautam8469
    @gautam8469 หลายเดือนก่อน

    i was looking for this for a long time
    finally you dropped it ❤

  • @Kushal-r6d
    @Kushal-r6d หลายเดือนก่อน

    Keep going man
    Doing great!!

  • @akashthoriya
    @akashthoriya หลายเดือนก่อน

    Quality Content !!!
    Bhai ❤‍🔥

  • @shirazjafmykare
    @shirazjafmykare หลายเดือนก่อน

    15mins and already hooked !!

  • @BcomingHIM
    @BcomingHIM หลายเดือนก่อน

    Looking forward to follow the series🎉

  • @Vkk456
    @Vkk456 หลายเดือนก่อน

    Jai Mahakaal🙏
    I start today and try to finish it within 26 sept

  • @moarifur
    @moarifur หลายเดือนก่อน

    Awesome Series!!

  • @devlopersessential4349
    @devlopersessential4349 หลายเดือนก่อน

    Thank you so much for this series sir 🙏🙏🙏

  • @simran19
    @simran19 หลายเดือนก่อน +5

    how many total videos will be there in this series? What is the timeline when you'll upload all of the videos?

    • @js_cafe
      @js_cafe  หลายเดือนก่อน +1

      @@simran19 hey, it's not decided yet. Don't worry about it, I'll bring the best

  • @visheshtiwari8176
    @visheshtiwari8176 หลายเดือนก่อน

    Jai mahakal great content

  • @saurabh9446
    @saurabh9446 หลายเดือนก่อน

    Banger 🎉 please make on one backend too

  • @hamudxd9497
    @hamudxd9497 หลายเดือนก่อน

    MUCH IMPRESSED❤

  • @jagadeshvarmasvpkh7860
    @jagadeshvarmasvpkh7860 หลายเดือนก่อน

    Jai Mahakal 🕉️

  • @Homelander_30
    @Homelander_30 หลายเดือนก่อน

    Thank you man♥️

  • @dixitsharma6510
    @dixitsharma6510 หลายเดือนก่อน

    Jai Mahakaal 🙏

  • @phanibhusan6538
    @phanibhusan6538 หลายเดือนก่อน

    Currently having high fever but still i will try to complete this today

    • @js_cafe
      @js_cafe  หลายเดือนก่อน

      @@phanibhusan6538 get well soon ❤️‍🩹

  • @zensumarai
    @zensumarai หลายเดือนก่อน

    really very great video

  • @yugalkishor557
    @yugalkishor557 หลายเดือนก่อน +1

    system design for backend

  • @usernamenotfound1229
    @usernamenotfound1229 หลายเดือนก่อน

    thank you so much 🥰🥰🥰

  • @kartikkaushik4743
    @kartikkaushik4743 หลายเดือนก่อน

    Pls bring suce more series

  • @sohammondal578
    @sohammondal578 หลายเดือนก่อน

    Brilliant!!

  • @ProgrammingWithSatyamP
    @ProgrammingWithSatyamP หลายเดือนก่อน

    Continue🎉bro great

  • @jaat9039
    @jaat9039 หลายเดือนก่อน

    Jay Mahakal Bhai,Do we need to know how much of API for a frontend developer?plz also make videos in hindi too

  • @supratickmondal4739
    @supratickmondal4739 หลายเดือนก่อน

    Thank you sir much neede d❤🎉

  • @rajaryan5884
    @rajaryan5884 หลายเดือนก่อน

    Bro can you please make a full stack project in mern or nextjs

  • @mohammadabbas1623
    @mohammadabbas1623 หลายเดือนก่อน

    Amazing

  • @akshaynarwadkar5264
    @akshaynarwadkar5264 หลายเดือนก่อน

    Op content

  • @sidwebworks9871
    @sidwebworks9871 19 วันที่ผ่านมา

    GRPC shouldn’t be there IMO. its not supported by browsers and in many cases requires loading the entire grpcjs and protobuf implementation on the client which has a huge overhead.
    Saying this from experience as my first task when I joined a new company was to strip away something like this from our main product.

  • @sachinsingh2104
    @sachinsingh2104 หลายเดือนก่อน

    Finished

    • @js_cafe
      @js_cafe  หลายเดือนก่อน

      Congratulations buddy 🎉

  • @kanaiyatiwari6748
    @kanaiyatiwari6748 หลายเดือนก่อน

    kindly explain soap api

  • @rajaryan5884
    @rajaryan5884 หลายเดือนก่อน

    Bro can you make a fullstack proper project

  • @4444-c4s
    @4444-c4s หลายเดือนก่อน

    8:51 - samaj nahi aya ye...
    Server kyu bhejega JS code.
    Vo to sirf JSON data hi bhejega na..🤔🤔

  • @rudra9535
    @rudra9535 หลายเดือนก่อน

    Is this good for a person with 1 year mern experience? Is this standard enough to watch to give upcoming interviews on front end dev. (Please help ) thankyou.

    • @js_cafe
      @js_cafe  หลายเดือนก่อน

      Anyone can view this course. Yes it should be helpful

  • @sagarjaid
    @sagarjaid หลายเดือนก่อน

    Like or share thoko jay mahakal

  • @nocode659
    @nocode659 หลายเดือนก่อน

    i bought interview package in js dev, will next js and frontend design be there in it or i need to buy seperately?

    • @js_cafe
      @js_cafe  หลายเดือนก่อน

      @@nocode659 no buddy, the interview package only focusses on interview questions. Nextjs yatra is different course.

  • @pokescreation
    @pokescreation หลายเดือนก่อน

    Goddd

  • @binauralbeats-relaxingmusi4336
    @binauralbeats-relaxingmusi4336 หลายเดือนก่อน

    Who can see this video.
    I know mern stack and c++

    • @js_cafe
      @js_cafe  หลายเดือนก่อน

      You can start it right away.

  • @iamshravanmeena
    @iamshravanmeena หลายเดือนก่อน +1

    **Warning ⛔️** Please don’t watch this video. You’ll learn so much from it, and I really don’t want that because it’ll create competition for me! He’s explaining everything way too well, so it’s best if you just skip it.

  • @zubayerbinrais8538
    @zubayerbinrais8538 หลายเดือนก่อน

    Thumbnail is misleading

    • @js_cafe
      @js_cafe  หลายเดือนก่อน

      How?

    • @zubayerbinrais8538
      @zubayerbinrais8538 หลายเดือนก่อน

      ​@@js_cafeThese are backend stuffs

    • @js_cafe
      @js_cafe  หลายเดือนก่อน

      @@zubayerbinrais8538 no they are not.