WebForDevs
WebForDevs
  • 40
  • 20 301
Front-End System Design - Maps
Welcome to my detailed tutorial on Front-End System Design, focusing specifically on MAPS! Join me as we explore the essentials of creating a simplified version of mapping systems like Google Maps and Bing Maps.
🖥️ Deep Dive: In this guide, we'll cover the key components of building a functional map application, including interactive maps, real-time data integration, and user-friendly interfaces. Whether you're an experienced front-end developer or just starting out, you'll find valuable insights and techniques to enhance your skills.
🛠️ Why Watch?: Mapping systems are integral to many modern applications, providing users with location-based services and information. By mastering the design of a map system, you can create powerful and engaging applications that benefit users in various ways.
⏱️ Agenda of Front-End System Design - Maps:
00:00 - Intro
00:27 - Functional requirements
01:29 - Non-Functional requirements
02:00 - Main components
02:11 - Creating Map - Tiles
02:57 - Creating Map - Zoom level
03:11 - Cost of tile-based approach
03:40 - Creating Map - SVG or Canvas
06:11 - Creating Map - Pseudocode/Example
06:51 - Tooltips and Markers
07:38 - Key points (refreshing)
08:10 - New component - From/To
08:48 - User Location tracking
09:09 - Data structure
09:51 - Shortest Path
11:31 - A11y
12:35 - Key Performance Optimizations
📚 Continuous Learning: This channel is dedicated to providing you with the most up-to-date and relevant knowledge. If you find this tutorial helpful, please like 👍, share 🔄, and subscribe 🔔 for more detailed content on front-end system design and development!
🔗 Links:
- Telegram channel: t.me/webfordevs
- Instagram: webfordevs
- UA-cam shorts: @webfordevs-shorts
- UA-cam videos: @webfordevs
- Buy Me Coffee: www.buymeacoffee.com/webfordevs
#webfordevs #systemdesign #mapssystemdesign
Переглядів: 220

Відео

Setting Up Web Push Notifications for Your Website
Переглядів 85Місяць тому
Hello everyone! 👋 In this video, we'll walk you through the process of setting up web push notifications for your website using the Web Push API, Node.js, and service workers. Whether you're a beginner or looking to enhance your web development skills, this step-by-step guide will help you implement real-time notifications effortlessly. 🚀 Timelines: 0:00 - Introduction 📢 0:13 - Setting Up Node....
How to Move Elements Correctly with JavaScript and requestAnimationFrame
Переглядів 1972 місяці тому
In this tutorial, we delve deep into the world of web animations, guiding you through the precise methods to move elements around your web pages seamlessly. No more jitters or out-of-bound glitches - just smooth javascript transitions that'll captivate your audience. Whether you're a beginner or an experienced developer, this video is your one-stop guide to mastering element movement with JavaS...
Middle of the Linked List | JavaScript | LeetСode
Переглядів 812 місяці тому
Welcome to my latest JavaScript tutorial! In this video, we dive into a common challenge in data structures: finding the Middle of the Linked List. Whether you're preparing for coding interviews or enhancing your understanding of linked lists, this video is perfect for you! 🌟 We'll walk you through a step-by-step coding solution in JavaScript, highlighting how to use a Set to efficiently solve ...
Custom Sort String | JavaScript | LeetСode
Переглядів 543 місяці тому
Welcome to my JavaScript tutorial on how to create a custom sort string! 👋 In this video, we'll walk you through a step-by-step guide on how to sort the characters in a string according to a custom-defined order. 🚀 What you'll learn: - Understand the problem statement for custom string string. - Tackling LeetCode 791's "Custom Sort String" challenge with ease. - Learn about the time and space c...
Linked List Cycle | JavaScript | LeetСode
Переглядів 683 місяці тому
🚀 Dive into a common interview question and a fundamental concept in computer science: detecting a cycle in a linked list using JavaScript 🚀 🔍 What You Will Learn: - What is a cycle in a linked list, and why is it important to detect? - How to use JavaScript data structures like Sets to track visited nodes. - Step-by-step coding of the solution with clear explanations. 🗿Why This Video? - Unders...
Front-End System Design - Slider Component
Переглядів 2233 місяці тому
Welcome to our tutorial on Front-End System Design, focusing on creating a versatile Slider Component. If you're a budding front-end developer or a seasoned pro looking to refine your design skills, this video is crafted just for you! 🛠️ In this tutorial, we'll cover: - The basics of a slider component - Tips for making your slider responsive and accessible - Optimizing your slider for performa...
Front-End System Design - Video Conference
Переглядів 3483 місяці тому
Welcome to our comprehensive guide on Front-End System Design, with a special focus on Video Conferencing! This tutorial is crafted for developers and tech enthusiasts looking to understand the intricacies of designing a front-end system for video conferencing applications like Zoom, Microsoft Teams, Google Hangouts, and other similar tools. What You'll Learn: 🌐 Real-Time Communication: Insight...
Building Your First React Date Picker!
Переглядів 1674 місяці тому
In this video, we dive into the exciting world of React to create a custom date picker from scratch. Perfect for beginners and those looking to add interactive elements to their web projects, this tutorial is designed to be straightforward and easy to follow. 🔹 Why a Custom Date Picker? Custom date pickers not only enhance the user experience by offering a seamless way to input dates, but they ...
Front-End System Design - Tic Tac Toe
Переглядів 3744 місяці тому
Welcome to my detailed tutorial on Front-End System Design, focusing specifically on Tic Tac Toe! In this video, we break down the game's design from the ground up, showcasing the functional and non-functional requirements, detailed TypeScript interfaces, and an intuitive winning algorithm that ensures a seamless gaming experience. What You'll Learn: 🎮 Functional Requirements: Discover how to c...
How to Implement Nested Checkboxes?
Переглядів 6204 місяці тому
🚀 Dive deep into How to Implement Nested Checkboxes? with this detailed guide! 🚀. This tutorial covers a fundamental aspect of web development and user interface design, focusing on creating interactive forms with nested checkboxes functionality. Key Requirements Explained: - When the parent checkbox is checked, all child checkboxes will also be checked. - Unchecking the parent checkbox will un...
Trade-offs examples for your system design interview
Переглядів 3315 місяців тому
Hey there! Welcome to my friendly guide on navigating trade-offs in system design interviews! 🚀 This video is perfect for anyone eager to shine in their next system design interview or just keen on improving their system design skills. I'll walk you through the pros and cons of using CSS vs. JavaScript, all through the fun example of a Masonry layout, just like Pinterest's. It's about making sm...
Web Security Tips for Front End Developers
Переглядів 3406 місяців тому
Welcome to our latest video, "Web Security Tips for Front End Developers," where I dive into the essential practices every front-end developer should know to enhance the security of their websites and applications. In this video, I explore various strategies and techniques to safeguard your web projects against common security threats. From understanding the basics of sanitizing form inputs to ...
Top Accessibility Requirements For Your Website
Переглядів 856 місяців тому
🌐 Welcome to our detailed walkthrough on the Top Accessibility Requirements For Your Website! This video is crafted to help you grasp the essential accessibility standards that every website should meet. 🎯 We often encounter the same accessibility requirements during front-end system design interviews, but they tend to be broad and not specific to technologies. Here, we aim to streamline this p...
Same Tree Leetcode | JavaScript
Переглядів 2637 місяців тому
👋 Welcome to our comprehensive tutorial on the "Same Tree" Leetcode problem using JavaScript! In this video, we'll tackle this popular coding challenge with two distinct approaches: Depth-First Search (DFS) and Breadth-First Search (BFS). Perfect for coding interview prep or enhancing your JavaScript skills! 🤓📚 Perfect for preparing for interviews at FAANG/MAANG companies (Facebook/Meta, Amazon...
How To Implement Reduce Method?
Переглядів 808 місяців тому
How To Implement Reduce Method?
Phone Number Inputs in React
Переглядів 1,4 тис.8 місяців тому
Phone Number Inputs in React
Front-End System Design - Uber
Переглядів 2 тис.8 місяців тому
Front-End System Design - Uber
Front-End System Design - Star Widget
Переглядів 5678 місяців тому
Front-End System Design - Star Widget
Creating a Searchable React Tree View
Переглядів 3,7 тис.9 місяців тому
Creating a Searchable React Tree View
Promise Pool | JavaScript | LeetCode
Переглядів 1809 місяців тому
Promise Pool | JavaScript | LeetCode
Most Asked PayPal Interview Questions
Переглядів 5569 місяців тому
Most Asked PayPal Interview Questions
How To Display Loading State During API Calls
Переглядів 3419 місяців тому
How To Display Loading State During API Calls
How to Implement Your Own getElementById Method ?
Переглядів 3179 місяців тому
How to Implement Your Own getElementById Method ?
The Most Frequent LeetCode Task in Palantir Interviews
Переглядів 8129 місяців тому
The Most Frequent LeetCode Task in Palantir Interviews
A new method to validate URLs in JavaScript
Переглядів 51010 місяців тому
A new method to validate URLs in JavaScript
The Most Common Algorithmic Problems In Google Interviews
Переглядів 34010 місяців тому
The Most Common Algorithmic Problems In Google Interviews
The Most Popular Algorithmic Problems in Meta Interviews
Переглядів 50110 місяців тому
The Most Popular Algorithmic Problems in Meta Interviews
Valid Parentheses | JavaScript
Переглядів 16210 місяців тому
Valid Parentheses | JavaScript
How to Implement Form Validation in React.js?
Переглядів 8910 місяців тому
How to Implement Form Validation in React.js?

КОМЕНТАРІ

  • @roosterxcode
    @roosterxcode 3 дні тому

    Please recreate this in React

  • @alexandrtaushkanov3813
    @alexandrtaushkanov3813 10 днів тому

    how do we request a ride and instantly gets a ride found according to your synchronous rest api request ride call?

    • @webfordevs
      @webfordevs 10 днів тому

      Thank you for the question. In my video, I focused on the general idea of the system design and didn't cover this in detail. However, to request a ride, we can use short or long polling methods. This means there will be a slight wait time until a ride is found and someone picks you up.

  • @maxleichenko5685
    @maxleichenko5685 14 днів тому

    Great work Stepan! Good quality System Design.

    • @webfordevs
      @webfordevs 14 днів тому

      Thank you Max :) I appreciate it

  • @SantoshKumar2
    @SantoshKumar2 22 дні тому

    This is very high quality system design work especially the entity part

    • @webfordevs
      @webfordevs 22 дні тому

      Thanks for your support. It really helps.

  • @eliasshemsu5853
    @eliasshemsu5853 24 дні тому

    This is very good! Thanks!

    • @webfordevs
      @webfordevs 22 дні тому

      I appreciate your feedback. Thanks a lot!

  • @currenthacker3877
    @currenthacker3877 2 місяці тому

    Awesome

    • @webfordevs
      @webfordevs 22 дні тому

      I’m grateful for your encouragement. Thank you!

  • @realg701
    @realg701 2 місяці тому

    damn bro. that explains. ❤❤ there is some issues, if i remove any number it cursor goes on start or stays in the middle whitle typing.

    • @webfordevs
      @webfordevs 2 місяці тому

      Do you mean you're having an issue, or was it in the demo? I removed the numbers at the end of the video and didn't see any problems. If you're experiencing an issue and can share a link to it, I can take a look.

    • @realg701
      @realg701 2 місяці тому

      @@webfordevs I'll share

    • @realg701
      @realg701 2 місяці тому

      ok, i did stupid. it was selectionEnd and i typed selectonEnd, missed the i. 🤡

    • @webfordevs
      @webfordevs 22 дні тому

      Do not worry. Let me know if you have any other questions

  • @DebopriyoBasu
    @DebopriyoBasu 3 місяці тому

    Thanks for this wonderfully detailed explanation

    • @webfordevs
      @webfordevs 22 дні тому

      Thank you for your kind words. I appreciate them.

  • @fahad1339
    @fahad1339 3 місяці тому

    when i open the server/website i find the read me file only why?

    • @webfordevs
      @webfordevs 3 місяці тому

      Did you create an index.html file? You could try redeploying it in case something was cached. Also, if you send me a link to your repository, I might be able to take a look and help out.

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

    Thank you for a well explained video!

    • @webfordevs
      @webfordevs 22 дні тому

      Thank you for your support. I appreciate it.

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

    Promo>SM 😉

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

    This is a hidden gem for beginner like me, thanks a lot

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

      thank you very much, I'm very pleased to hear this

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

      @@webfordevs please keep the good work, although it may not seems significant yet but you did and will give some impact to us who seek for the materials. Thank you.

  • @AbhishekKumar-hr1sr
    @AbhishekKumar-hr1sr 4 місяці тому

    Hey can pls post the code as well?

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

      Hey, sure. Updated the description. Let me know if there is anything I can help with :)

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

    Your solution is so short and elegant, I really liked it

  • @youtube.user-
    @youtube.user- 5 місяців тому

    good job! 🤜🤛

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

    UA-cam needs more FE sys design videos. Just wanted to say thanks for expanding my mind :)

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

      Thank you :) I appreciate it

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

    Cool video although I felt something missing is state transition, because tasks will transition from todo -> in progress -> completed, how would we implement something like this ?

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

      Hey :) I tried to describe it here ua-cam.com/video/zwY4wyqG37E/v-deo.html but on the high level

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

    thx bro, it's very clear!

  • @user-iz8xn5mh1j
    @user-iz8xn5mh1j 6 місяців тому

    Nice one, Can we get the git repo link

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

      added link to the video description

  • @user-co5sd3sm1k
    @user-co5sd3sm1k 7 місяців тому

    Nice explanation, thx👌

  • @destroyer_of_frogs
    @destroyer_of_frogs 8 місяців тому

    Great tutorial! Thank you so much!

  • @sagnik_
    @sagnik_ 8 місяців тому

    Great explanation!! can you please share the list of all other questions on leetcode that have been asked in a Palantir interview?

    • @webfordevs
      @webfordevs 8 місяців тому

      Thank you for the comment 🙂 A comprehensive list of questions asked in Palantir interviews can be found on the LeetCode website under the section for Palantir Technologies. However, access to this list requires a paid subscription. leetcode.com/company/palantir-technologies/

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

    amazing example man ! thank you for video

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

      You're welcome! I'm glad you found the video helpful. If you have any questions or need further clarification, feel free to ask!

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

      @@webfordevs if you share the code it would be great or at least mock data which you use for this tutorial

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

      @@casull6447 you can see mock data at 5:34 ua-cam.com/video/xFj03L31bao/v-deo.html , so it is just array with 2-3 fields (id, name, children)

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

      ​@@casull6447 added link to source code to the video description

  • @user-cg5or5iw1u
    @user-cg5or5iw1u 9 місяців тому

    How would you handle the case where the user drags and re-arranges the task order? How would you change the API to reflect that

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

      Hello 😊. You bring up an excellent point. As far as I recall, the drag-and-drop functionality wasn't initially part of the design. To be honest, I would consider revising some of the original requirements based on your question. To address your query, here's what I would do: - Introduce a new field, such as "order" or "position," to keep track of the task sequence. - Create a new API endpoint, specifically `POST /tasks/reorder`, to handle the reordering of tasks. - As an alternative to locking tasks, I'd suggest using version numbers for each task. This way, the server can reject any attempts to update a task based on an outdated version. This is a brief overview, but for a more comprehensive and effective solution, I would create a new design to describe it in detail. I hope this answers your question! Feel free to reach out if you have any more queries.

    • @juandavidmm
      @juandavidmm 2 місяці тому

      ​@@webfordevs I liked both the question and the detailed answer 👍

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

    O wea, wea wea, wea!

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

      Thanks! Hope you enjoyed the video! 😊

  • @user-co5sd3sm1k
    @user-co5sd3sm1k 9 місяців тому

    Amazing clarity in your explanation! Excellent work, and thank you for sharing this information

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

      Glad you enjoyed it!

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

    Hi

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

    Why not use the BrowserRouter component? Is there advatages to a custome createBrowserRouter?

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

      Hey there :) It is a good question, thank you. The main difference between createBrowserRouter and BrowserRouter is that createBrowserRouter includes data APIs like loaders, actions, fetchers and more. So, if you do not need to use any of these features, you can still use BrowserRouter , but createBrowserRouter function opens new functionality for you. Please, let me know if you have any other questions.

  • @webfordevs
    @webfordevs 11 місяців тому

    I hope you all enjoyed this quick video on form validation in React.js . If you have any topics you want me to cover in future videos let me know!

  • @seekhokhushise
    @seekhokhushise 11 місяців тому

    I wish I could have founded this channel back then... 😢

    • @webfordevs
      @webfordevs 11 місяців тому

      You can try to navigate to the repository where you published the GitHub Pages site, click on the "Settings" tab (usually located next to "Code"), and scroll down to the "GitHub Pages" section where your GitHub Pages URL will be displayed.

  • @webfordevs
    @webfordevs 11 місяців тому

    I hope you all enjoyed this quick video on react-router-dom. If you have any topics you want me to cover in future videos let me know!

  • @webfordevs
    @webfordevs 11 місяців тому

    I hope you all enjoyed this quick video on Dynamic Viewport Units in CSS:. If you have any topics you want me to cover in future videos let me know!

  • @vitaliskripka2544
    @vitaliskripka2544 11 місяців тому

    Explain react router best practices

    • @webfordevs
      @webfordevs 11 місяців тому

      Thank you for the comment, got it, will try to do it

  • @webfordevs
    @webfordevs 11 місяців тому

    I hope you all enjoyed this quick video on fetching data in react.js. If you have any topics you want me to cover in future videos let me know!

  • @webfordevs
    @webfordevs Рік тому

    Please, let me know if you have any issues with publishing a website under the video

  • @webfordevs
    @webfordevs Рік тому

    I hope you all enjoyed this quick video on state in react.js. If you have any topics you want me to cover in future videos let me know!

    • @user-co5sd3sm1k
      @user-co5sd3sm1k Рік тому

      will be cool to see something about fetching data

    • @webfordevs
      @webfordevs Рік тому

      @@user-co5sd3sm1k will do, thank you for the comment :)

  • @indra4128
    @indra4128 Рік тому

    So Good !! Keep doing great stuff like this ( I subscribed )

    • @webfordevs
      @webfordevs Рік тому

      Thank you for the comment and you support :)

  • @MagicHappyPotato
    @MagicHappyPotato Рік тому

    Looks amazing! Nice!