├── .github
└── FUNDING.yml
└── README.md
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: engineerchirag
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Front-end System Design Resources/materials 📗🎥📘
2 |
3 | Front-end System Design Fundamentals
4 |
5 | - 🎥 [Introduction to System Design](https://www.youtube.com/watch?v=sV_4pOGosnU&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=1)
6 | - 🎥 [Client Server Architecture](https://www.youtube.com/watch?v=jWGSVN_4atk&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=2)
7 | - 🎥 [Front-end System Design Components](https://www.youtube.com/watch?v=44mOnnt5pic&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=3)
8 |
9 |
10 |
11 | System Design HLD/LLD overview
12 |
13 | - 🎥 [Cracking System Design (HLD/LLD) interviews](https://www.youtube.com/watch?v=QemIfzcEeMM&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=4)
14 | - 🎥 [Cracking LLD interviews](https://www.youtube.com/watch?v=yun65Nk8_vQ&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=8)
15 |
16 |
17 |
18 | System Design of popular application
19 |
20 | - 🎥 [Design Netflix|YouTube|Hotstar](https://www.youtube.com/watch?v=-Sn48geZruk&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=5)
21 | - 🎥 [Design Snake & Ladder Game](https://www.youtube.com/watch?v=VgtD8OF6Yuw&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=14&t=29s)
22 |
23 |
24 |
25 | Front-end System Design Mock Interviews
26 |
27 | - 🎥 [Design Autocomplete / Typeahead Suggestions](https://www.youtube.com/watch?v=IKRbWT6LqIY&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=10)
28 | - 🎥 [Design Configurable UI / Dynamic UI](https://www.youtube.com/watch?v=6z7ZXb4ntbE&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=13)
29 | - 🎥 [Design Codesandbox (Part-1)](https://www.youtube.com/watch?v=HnYduOVY470&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=6)
30 | - 🎥 [Design Codesandbox (Part-2)](https://www.youtube.com/watch?v=o5aoJlcS8Rc&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=7)
31 | - 🎥 [Design Whiteboard (Excalidraw/Figma/Draw.io)](https://www.youtube.com/watch?v=1lNJVDfsTSo&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=15)
32 |
33 |
34 |
35 | Performance Optimization
36 |
37 | - 🎥 [Network optimization techniques](https://www.youtube.com/watch?v=XSVkWiW-t4k&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=11)
38 | - 🎥 [Assets optimization techniques](https://www.youtube.com/watch?v=9JDlZxR8gVw&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=12)
39 | - 📗 [MDN Performance](https://developer.mozilla.org/en-US/docs/Learn/Performance)
40 | - 📗 [Web Dev Performance](https://web.dev/learn/#performance)
41 | - 📗 [Google Dev - Performance](https://developers.google.com/web/fundamentals/performance/get-started)
42 |
43 |
44 |
45 | Front-end Interview
46 |
47 | - 🎥 [Popular Interview Questions](https://www.youtube.com/watch?v=c_kVh_-gQtI&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU&index=9)
48 |
49 |
50 |
--------------------------------------------------------------------------------