1

Этап 1

Мок-собесы

2

Этап 2

Курс по System Design от Яндекс

3

Этап 3

Книга Подготовку к сложному интервью System Design

4

Этап 4

Greatfrontend Interview Questions

5

Этап 5

Разбор Frontend System Design Interview (Youtube)

6

Этап 6

Frontend System Design Questions

7

Этап 7

Темы на разбор

1

Этап 1

Мок-собесы

2

Этап 2

Курс по System Design от Яндекс

3

Этап 3

Книга Подготовку к сложному интервью System Design

4

Этап 4

Greatfrontend Interview Questions

5

Этап 5

Разбор Frontend System Design Interview (Youtube)

6

Этап 6

Frontend System Design Questions

7

Этап 7

Темы на разбор

22 октября 2024
Цель завершена 13 марта 2025
Подробно Кратко

Автор цели

Nikita Nikler

Россия

29 лет

Отправить сообщение

Добавить в друзья

Образование

Подготовка к этапу собеседования System Design

В рамках этой цели я буду готовиться к этапу собеседования в Т по System Design. Эта цель является частью общей цели по прохождению собеседования в компанию Т.

Вообще для меня это нечто неизвестное ,непонятное и неизведанное. Я никогда не проектировал сложные системы ,да и не залезал куда-то дальше фронтенда. Даже в самом фронтенде мне особо не доводилось проектировать чего-то сложного вроде микро-фронтендов и монорепозиториев.

Плюсом к этому мне так и не удалось узнать ,что конкретно требуют по этой секции в Т. Поэтому буду идти по принципу "Лучше перебздеть ,чем недобздеть". Исходя из чего выбрал 2 курса и уже стандартную стратегию изучения того ,что мне непонятно.

Вообще польза этой цели будет не только для прохождения этапа собеседования ,но и для моего будущего приложения Pomidaro ,на которое я уже прикинул грандиозные планы ,где без хорошего бека и архитектуры не обойтись. Знания точно пригодятся там.

Мок-собесы предполагаются на курсах ,которые я выбрал. Но нужно пройти помимо этого еще 3 собеса от других людей ,чтобы быть уверенным на 100% в своих силах.

Будет не лишним здесь посмотреть по меньшей мере 5 примеров реальных собеседований по System Design.

UPD (31.10.2024): Убрал курс от Balun. Убрал все темы из курса от Яндекса кроме микрофронтендов. Бюджет сократился на 160.000.

 Критерий завершения

5 мок-собесов по System Design пройдено успешно

  1. Мок-собесы

    https://getmentor.dev/

    Первые 2 мок-собеса будут на курсах. Для 3, 4 и 5 планирую найти специальных людей ,готовых провести их для меня.

    Считаю здесь только успешные собесы. Если прошел 3/5 ,значит прохожу еще 2 ,пока в сумме не будет 5 успешных.

    Стоимость этапа — 15000 ₽

    1. 1 собес пройден

    2. 2 собес пройден

    3. 3 собес пройден

    4. 4 собес пройден

    5. 5 собес пройден

  2. Курс по System Design от Яндекс

    Этот курс длится аж пол года. Беру первый ближайший поток

    Стоимость этапа — 40000 ₽

    1. Микрофронтенды и разбивка монолитной системы на микросервисы

  3. Книга Подготовку к сложному интервью System Design

    Книгу прочитать между делом ,возможно даже перед курсами

    1. Масштабирование от нуля до миллиона пользователей

    2. Приблизительные оценки

    3. Общие принципы прохождения интервью по проектированию IT-систем

    4. Проектирование ограниченного трафика

    5. Согласованное хеширование

    6. Проектирование хранилища типа "ключ-значение"

    7. Проектирование генератора уникальных идентификаторов в распределенных системах

    8. Проектирование системы для сокращения URL-адресов

    9. Проектирование поискового робота

    10. Проектирование системы уведомлений

    11. Проектирование ленты новостей

    12. Проектирование системы мгновенного обмена сообщениями

    13. Проектирование системы авто-заполнения поисковых запросов

    14. Проектирование YouTube

    15. Проектирование Google Drive

    16. Век живи - век учись

  4. Greatfrontend Interview Questions

    Разбор секции Frontend интервью по System Design в крупные мировые компании.

    -> https://www.greatfrontend.com/system-design

    Стоимость этапа — 15000 ₽

    1. Introduction to Front End System Design

    2. Types of Front End System Design Questions

    3. The RADIO Framework

    4. Front End System Design Interview Evaluation Axes

    5. Common Mistakes Made During Front End System Design Interviews

    6. Front End System Design Cheatsheet

    7. News Feed (e.g. Facebook) [medium]

    8. Autocomplete [medium]

    9. Pinterest [hard]

    10. E-commerce Marketplace (e.g. Amazon) [hard]

    11. Travel Booking (e.g. Airbnb) [medium]

    12. Chat App (e.g. Messenger) [medium]

    13. Photo Sharing (e.g. Instagram) [medium]

    14. Video Streaming (e.g. Netflix) [hard]

    15. Rich Text Editor [hard]

    16. Google Docs [hard]

    17. Dropdown Menu [medium]

    18. Image Carousel [medium]

    19. Modal Dialog [medium]

    20. Poll Widget [easy]

    21. Email Client (e.g. Microsoft Outlook) [medium]

  5. Разбор Frontend System Design Interview (Youtube)

    Автор разбирает распространенные кейсы Frontend System Design Interview

    -> https://www.youtube.com/watch?v=5vyKhm2NTfw&list=PLI9W87-Dqn7j_x6QtR6sUjycJR7nQLBqT&ab_channel=Front-EndEngineer

    1. [Front End System Design] - Facebook News Feed

    2. [Front-End System Design] - Pinterest

    3. [Front-End Product Design] - Netflix

    4. [Front-End System Design] - Chat application

    5. [Front-End System Design] - Typeahead Widget

    6. [Front-End System Design] - Data Table Component

    7. [Front-End System Design] - Design a Poll Widget

    8. [Front-End System Design] - Google Sheets

    9. [Front-End System Design] - Google Calendar

    10. [Frontend System Design] - Deep dive into HTTP [Part 1]

    11. [Front-End System Design] - Typeahead component

    12. [Frontend System Design] - Notion

  6. Frontend System Design Questions

    https://frontendlead.com/system-design

    Стоимость этапа — 15000 ₽

    1. All in One Comprehensive Guide

    2. Requirements

    3. Architecture

    4. Data Model

    5. Interface Communication

    6. API Design

    7. Optimizations

    8. Design Auto Complete Search

    9. Design Chat App

    10. Design Google Calendar

    11. Design Sprint Board

    12. Design Facebook Newsfeed

    13. Design Pinterest

    14. Rich Text Editor

    15. Design mentions

    16. SSR vs CSR

    17. Security

    18. XSS vs CORS

    19. Image Caching Strategies

    20. Broadcast Channels

    21. IndexedDB

    22. Core Web Vitals

    23. Web Accessibility

    24. ARIA Roles

    25. Network Requests

    26. Apollo Cache

    27. Image Optimization Strategies

    28. Web Protocol Cheat Sheet

    29. Normalization

    30. Design A scalable Frontend Architecture

  7. Темы на разбор

    1. LazyLoading в реакт и его виды (по действию ,по простою и тд)

    2. Приемы работы со skeleton-плесхолдерами

    3. Как чекнуть отсутствие сети или плохую связь

    4. Реализация бесконечной прокрутки и библиотеки для React

    5. getBoundingClientRect и Intersection Observer

    6. Реализация виртуальных списков и библиотеки для React

    7. Влияние большого кол-ва элементов в DOM на рендеринг браузера и реакта

    8. Влияние смещения элементов на рендеринг в браузере

    9. Приемы кеширования скролла и данных

    10. GraphQL - тема большая ,поэтому под вопросом. Но если предлагать для решения REST ,нужно будет упомянуть о GraphQL ,а потому хотябы немного

    11. XSS и защита

    12. Draft.js - почитать ,пощупать

    13. Написать простенький WYSIWIG редактор (в рамках GreatFrontend)

    14. AST дерево

    15. CDN

    16. WebP

    17. srcset

    18. Приемы передачи данных об устройстве юзера на сервер

    19. Оптимистичные обновления (скорее в рамках React Query)

    20. Intl API

    21. Приемы по работе с иконками (сравнение преимуществ и недостатков) ,подходы в React библиотеках

    22. Long Polling, SSE, HTTP/2 и HTTP/2 performance

    23. Приемы нормализации данных (Тут возможно на примере Redux Toolkit)

    24. Приемы пагинации (посмотреть в действии)

    25. gzip и brottle

    26. SSR - критерии выбора

    27. Load script атрибут defer

    28. Web Workers

    29. PWA / Service Workers

    30. cookies

    31. iframe

    32. ARIA https://www.w3.org/WAI/ARIA/apg/patterns/

    33. AbortController ,посмотреть в React Query

    34. RenderProps - освежить ,глянуть примеры

    35. Debounce/Throrrle - реализовать на GreatFrontend ,изучить юзкейсы

    36. Стратегии Retry Request ,посмотреть в React Query

    37. Normalizr https://github.com/paularmstrong/normalizr/tree/ma...

    38. Typeahead https://engineering.fb.com/2010/05/17/web/the-life...

    39. requestIdleCallback / requestAnimationFrame

    40. Стратегии ограничения текста / контента

    41. Стратегии автопозиционирования дропдаунов/тултипов

    42. i18n + React

    43. CSP

    44. Организация клиентского кеша и локального кеша компонентов

  • 1413
  • 22 октября 2024, 15:20

Бюджет

85000 ₽

Цель состоит в группе

Веб-дизайн

  • 932

    участника

  • 1292

    цели
Регистрация

Регистрация

Уже зарегистрированы?
Быстрая регистрация через соцсети
Вход на сайт

Входите.
Открыто.

Еще не зарегистрированы?
 
Войти через соцсети
Забыли пароль?
Настройки

Виджет вашей цели

Большой (450×150 px)

Маленький (250×100 px)

Чтобы вставить виджет на ваш сайт или блог, скопируйте код и внедрите его в исходный html-код вашего блога/сайта.

Только для PRO

Вы можете купить PRO аккаунт, либо получить его бесплатно, пригласив 3 друзей на SmartProgress

Пригласить друзей

Поднятие
целей наверх

Купить

Email на все случаи и по любым вопросам

  • Максим Маликов

    основатель

  • Сергей Захаров

    основатель