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
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
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.
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.
**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.
![Coheed and Cambria - Searching for Tomorrow [Official Video]](http://i.ytimg.com/vi/hDsYGLbmadg/mqdefault.jpg)
Let's see who finishes this series first 💪
Thank you for the series. Currently finishing the JavaScript. Should I learn ReactJS first or this one?
I am Starting this one right now
Thanks
@@ksubramanyeshwara Learn this one first. This course is framework agnostic.
@@sohammondal578 thank you 😊
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!!
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
The voice quality is amazing.
Your content is great, helped me alot during my interview prep,
thank you 👌👌
Jai Mahakaal🙏
I start today and try to finish it within 26 sept
Jai mahakal great content
15mins and already hooked !!
Amazing series Vedant, Will be sharing with my network🎉
Looking forward to follow the series🎉
Thank you so much for this series sir 🙏🙏🙏
Jai Mahakal 🕉️
Jai Mahakaal 🙏
Great Information Brother 🎉
i was looking for this for a long time
finally you dropped it ❤
Always come with Banger content bhaiya hat's off u 🙌🙌🙌🙌
how many total videos will be there in this series? What is the timeline when you'll upload all of the videos?
@@simran19 hey, it's not decided yet. Don't worry about it, I'll bring the best
Banger 🎉 please make on one backend too
really very great video
Bro welcome back what a banger comeback to make
Awesome Series!!
thank you so much 🥰🥰🥰
Keep going man
Doing great!!
Quality Content !!!
Bhai ❤🔥
Currently having high fever but still i will try to complete this today
@@phanibhusan6538 get well soon ❤️🩹
system design for backend
Pls bring suce more series
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
Thank you man♥️
MUCH IMPRESSED❤
Brilliant!!
Continue🎉bro great
Thank you sir much neede d❤🎉
Amazing
Op content
Finished
Congratulations buddy 🎉
Bro can you please make a full stack project in mern or nextjs
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.
Jay Mahakal Bhai,Do we need to know how much of API for a frontend developer?plz also make videos in hindi too
Goddd
Bro can you make a fullstack proper project
kindly explain soap api
Like or share thoko jay mahakal
i bought interview package in js dev, will next js and frontend design be there in it or i need to buy seperately?
@@nocode659 no buddy, the interview package only focusses on interview questions. Nextjs yatra is different course.
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.
Anyone can view this course. Yes it should be helpful
8:51 - samaj nahi aya ye...
Server kyu bhejega JS code.
Vo to sirf JSON data hi bhejega na..🤔🤔
Who can see this video.
I know mern stack and c++
You can start it right away.
**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.
Thumbnail is misleading
How?
@@js_cafeThese are backend stuffs
@@zubayerbinrais8538 no they are not.