Namaste Frontend System Design π
From Zero to Hero π₯
β Practical Learning
β Structured In-depth Curriculum
β Private Frontend Experts Community Access
β Interview Preparation Content
β Advanced Frontend Learning
β Namaste Frontend System Design - Certificate
β Five Year access to all Course Content
Success Stories
1,000+
Developer Community
5000+
Companies Hired
150+
Topics Taught
50+
College Students
It is not expected from college students / freshers to design systems, hence this course might not be relevant for you. But if you're interested to dive deep into the world of frontend and you're curious about how large frontend systems are built,
feel free to join! β
Early Engineers
If you have ~1 year of experience, then you probably won't be designing systems in your job yet. But it's a good-to-have course so that you can start learning advanced frontend topics.
It will definitely help you to accelerate your career. π
Senior Engineers
We highly recommend you this course if you are a Senior Frontend Engineer. We cover a lot of advanced frontend concepts which will help you shape your career.
It will also be very helpful for your FSD interviews. π₯
Important Guidelines
Important guidelines for Namaste Frontend System Design
Networking - Akshay & Chirag's ExperiencePreview
Akshay and Chirag are sharing their experience on Networking.
How the Web Works
Explore the fundamental mechanics powering the internet, unveiling the intricate workings behind web functionality.
Communication Protocols
Delve into diverse communication protocols shaping internet interactions, laying the groundwork for efficient data exchange.
REST APIs
Uncover the principles of REST APIs, mastering the art of building robust and scalable interfaces for web applications.
GraphQL
Explore the power of GraphQL, enabling efficient data querying and manipulation for modern web applications.
gRPC
Master gRPC, a high-performance remote procedure call framework, optimizing communication between distributed systems.
Communication - Akshay & Chirag's ExperiencePreview
Akshay and Chirag are sharing their experience with Communication.
Communication Overview
Explore the foundational aspects of communication protocols, shaping seamless data exchange in modern frontend systems.
Short Polling
Learn the short polling technique to acquire updated data at regular intervals, optimizing real-time updates in frontend applications.
Long Polling
Understand long polling mechanisms, facilitating continuous connections to servers for real-time data updates in frontend interfaces.
Web Sockets
Master Web Sockets for establishing persistent, bidirectional communication channels between clients and servers in frontend systems.
Server Side Events
Explore Server-Sent Events enabling servers to push data to frontend clients, facilitating seamless real-time updates.
WebHooks
Grasp WebHooks' capabilities in facilitating instant notifications and triggering events in frontend systems, enhancing responsiveness.
Security - Akshay & Chirag's ExperiencePreview
Akshay and Chirag are sharing their experience on security.
Security Overview
Journey through crucial security principles, setting the foundation for a secure frontend. This foundational episode introduces pivotal concepts shaping the security landscape.
Cross-site Scripting (XSS)
Discover the nuances of XSS vulnerabilities, empowering you to fortify your frontend against malicious script injections that threaten user security.
iFrame Protection
Secure your frontend against iFrame-based threats by mastering techniques to safeguard embedded content and prevent potential vulnerabilities.
Security Headers
Implement security headers effectively to fortify your frontend against various threats, leveraging key configurations for enhanced protection.
Client-side Security
Master best practices and tools for ensuring robust client-side security in your frontend architecture.
Secure Communication (HTTPs)
Safeguard data transfer using advanced HTTP security measures, ensuring secure communication in your frontend applications.
Dependency Security
Learn to identify and mitigate vulnerabilities in third-party dependencies, fortifying your frontend against potential risks.
Compliance & Regulation
Navigate complex compliance standards, ensuring your frontend adheres to regulations, mitigating legal and security risks effectively.
Input Validation and Sanitization
Master the art of input validation and sanitization, safeguarding your frontend against various security threats originating from user inputs.
Server-Side Request Forgery (SSRF)
Identify and counter SSRF threats, ensuring robust security for your frontend servers against unauthorized requests.
Server-side JavaScript Injection (SSJI)
Protect your frontend against malicious server-side JavaScript injections, preserving system integrity.
Feature Policy | Permissions-Policy
Leverage feature and permissions policies for strengthened frontend security, managing browser behaviors and permissions effectively.
Subresource Integrity (SRI)
Ensure resource integrity by implementing SRI, safeguarding resources loaded into your frontend against tampering.
Cross-Origin Resource Sharing (CORS)
Manage CORS effectively for secure cross-origin data sharing within your frontend applications.
Cross-Site Request Forgery (CSRF)
Prevent Cross-Site Request Forgery (CSRF) attacks for enhanced security.
Testing - Akshay & Chirag's ExperiencePreview
Akshay and Chirag are sharing their experience on Testing.
Testing Overview
Explore the pivotal role of testing in frontend development, grasping the fundamentals shaping robust testing strategies.
Unit & Integration Testing
Master the art of unit testing, dissecting individual components to ensure their functionality in isolation.
E2E and Automation Testing
Master end-to-end testing methodologies to simulate user scenarios, ensuring holistic frontend functionality.
A/B Testing
Discover A/B testing strategies to compare variations and optimize frontend design and functionality.
Performance Testing
Performance testing ensures software functions optimally under diverse conditions, simulating scenarios to identify and address bottlenecks, guaranteeing a seamless user experience.
Test-Driven Development Overview
Understand the principles and advantages of test-driven development (TDD) as a foundational approach in frontend design.
Security Testing
Security testing safeguards software by detecting and addressing vulnerabilities, ensuring data protection and resistance against cyber threats.
[BONUS] Namaste React - Time for Test
Reliability is paramount, and in this episode, we cover testing for React components. You'll learn how to ensure your components work as expected and your app remains robust.
Performance Overview
Explore the fundamentals of performance optimization crucial for enhancing the speed and efficiency of frontend systems.
Performance Importance
It is crucial to prioritize performance when developing software or web applications. This can greatly affect the user experience and overall success of the product.
Performance Monitoring
Grasp the importance of performance monitoring for tracking, analyzing, and optimizing frontend system performance.
Performance Tools
Explore various tools and utilities dedicated to optimizing and measuring frontend system performance.
Network Optimization
Understand network optimization strategies for minimizing latency and optimizing data transfer in frontend applications.
Rendering Pattern
Understand different rendering patterns, enabling efficient rendering and improving user experience in frontend applications.
Build Optimization
Grasp build optimization techniques for streamlining the build process and reducing load times in frontend systems.
Database & Caching - Akshay & Chirag's ExperiencePreview
Akshay and Chirag are sharing their experience with Databases and caching.
Database & Caching Overview
Explore the foundational aspects of databases and caching, pivotal for efficient data storage and retrieval in frontend systems.
Local Storage
Master local storage techniques for storing persistent data within the user's browser, enhancing offline capabilities.
Session Storage
Understand session storage mechanisms for storing temporary data within the user's browser session, ensuring data availability during the session.
Cookie Storage
Grasp cookie storage methods for managing and storing small pieces of data in the user's browser, facilitating personalized experiences.
Indexed DB
Master Indexed DB, enabling frontend applications to manage large amounts of structured data within the user's browser.
Normalization
Understand normalization principles for organizing data in databases, optimizing data storage and retrieval efficiency.
HTTP Caching
Grasp HTTP caching methodologies for storing web server responses in browsers, optimizing data retrieval and system performance.
Service Working Caching
Master service working caching techniques for storing static assets and enhancing the offline capabilities of frontend applications.
API Caching
Understand API caching strategies for caching API responses, reducing server load and enhancing frontend application responsiveness.
State Management
Explore state management techniques for maintaining and managing application states, ensuring seamless user experiences in frontend systems.
Logging And Monitoring - Akshay & Chirag's ExperiencePreview
Akshay and Chirag are sharing their experience on Logging And Monitoring.
Logging & Monitoring Overview
Explore the foundational principles of logging and monitoring, vital for maintaining the health and performance of frontend systems.
Telemetry
Master telemetry methodologies for collecting and analyzing frontend system data, enabling informed decision-making.
Alerting
Understand alerting mechanisms, ensuring timely notifications for potential issues or anomalies in frontend systems.
Fixing
Grasp effective strategies and best practices for addressing issues and anomalies detected in frontend systems through monitoring.
Accessibility Overview
Learn vital accessibility principles for inclusive frontend design.
Keyboard Accessibility
Optimize frontend interfaces for keyboard navigation.
Screen Reader
Develop interfaces compatible with screen readers.
Focus Management
Explore the importance of focus management and colour contrast in front-end design.
Color Contrast
Explore the importance of colour contrast in front-end design.
Accessibility Tools
Let's learn about tools to improve accessibility.
How to fix accessibility
Learn how to improve website accessibility using both manual and automated testing tools.
Service Workers
Grasp the role of service workers in enabling offline functionalities and background synchronization for frontend applications.
Progressive Web Applications (PWAs)
Master PWAs, enabling frontend applications to offer app-like experiences with offline capabilities, enhancing user engagement.
Component Design
Grasp modular component-based design techniques for frontend applications.
Config driven UI
This lightning talk introduces config-driven UI
Shimmer UI
Shimmer UI: A Better Way to Show Loading States
Routing & Protected Routes
Master seamless navigation techniques in frontend interfaces.
State Management + Libraries
Understand complex state handling in frontend systems.
Multi Language Support
How does multi-language support work?
Infinite Scroll
Implement dynamic content loading techniques in frontend interfaces.
Accordion
A user interface device thatβs frequently used in web and mobile applications to arrange and show content in a user-friendly and space-efficient way.
Reddit Nested Comments
Design threaded discussions for frontend commenting systems.
Image Slider
LLD Image Slider
Pagination Part-1
Enable user-friendly content browsing through pagination.
Pagination Part-2
Coding part of pagination.
Real-Time Updates
Real-Time Updates
YouTube Live Stream Chat UI
YouTube Live Stream Chat UI
Autocomplete & Search Bar
Implement efficient data retrieval with autocomplete and search functionalities.
HLD Overview
Grasp essentials of high-level design principles.
HLD - Photo Sharing App (Instagram)
Design frontend for photo sharing.
HLD - E-commerce App (Amazon, Flipkart)
Architect frontend for e-commerce platforms.
HLD - News Media Feed (Facebook, Twitter)
Architect frontend for social media feeds.
HLD - Video Streaming (Netflix)
Design frontend for video streaming.
HLD - Music Streaming (Spotify)
Design frontend for music streaming.
HLD - Live Commentary (CricInfo, Crickbuzz)
Architect frontend for live commentary.
HLD - Email Client
Learn about the frontend architect for your Gmail or Outlook.
HLD - Diagram Tools (Excalidraw)
Architect frontend for diagramming.
HLD - Analytics Dashboard (Google Analytics)
Architect frontend for analytics.
HLD - Google Docs
Architect frontend for collaborative documents.
HLD - Google Sheets
Design frontend for collaborative spreadsheets.
HLD - Cab Services (Uber, Ola)
Design frontend for cab services.
Security Interview Questions
Practice interview questions of security.
Communication Protocol Interview Questions
Communication Protocol Interview Questions
Database & Caching Interview Questions
Database & Caching Interview Questions
Logging & Monitoring Interview Questions
Interview Questions for Logging & Monitoring
Networking Interview Questions
Interview Questions for Networking
Component Design Notes
Component Design Notes
Shimmer UI Notes
Shimmer UI Notes
Config Driven UI Notes
Config Driven UI Notes
State Management Notes
State Management Notes
Cross site scripting (XSS) Notes
Cross site scripting (XSS) Notes
iFrame Protection Notes
iFrame Protection Notes
Security Headers Notes
Security Headers Notes
Client Side Security Notes
Client Side Security Notes
Secure Communication (HTTPs) Notes
Secure Communication (HTTPs) Notes
Dependency security Notes
Dependency security Notes
Compliance & Regulation Notes
Compliance & Regulation Notes
Input Validation & Sanitization
Input Validation & Sanitization
Server Side Request Forgery (SSRF) Notes
Server Side Request Forgery (SSRF) Notes
Server Side JavaScript Injection (SSJI) Notes
Server-Side JavaScript Injection (SSJI) Notes
Feature Policy Permission Policy Notes
Feature Policy Permission Policy Notes
Subresource Integrity (SRI) Notes
Subresource Integrity (SRI) Notes
Cross Origin Resource Sharing(CORS) Notes
Cross Origin Resource Sharing(CORS) Notes
Cross Site Request Forgery(CSRF) Notes
Cross Site Request Forgery(CSRF) Notes
Local Storage Notes
Local Storage Notes
Session Storage Notes
Session Storage Notes
Cookie Storage Notes
Cookie Storage Notes
Indexed DB Notes
Indexed DB Notes
Normalization Notes
Normalization Notes
HTTP Caching Notes
HTTP Caching Notes
Service Worker Caching Notes
Service Worker Caching Notes
API Caching Notes
API Caching Notes
State Management Notes
State Management Notes
![akshay](https://do6gp1uxl3luu.cloudfront.net/banner+and+logos/akshayReactPic.webp)
Akshay Saini
Founder - NamasteDev.com
Akshay Saini, founder of NamasteDev.com, who previously worked as a software engineer at Uber & Paytm. Akshay has over 9+ years of experience in the software industry and has been teaching students on YouTube since 5 years. Well known for his famous playlist named Namaste JavaScript and Namaste React, he has taught over 12 lakhs+ students across the globe.
![chirag](https://do6gp1uxl3luu.cloudfront.net/assets/chirag.webp)
Chirag Goel
Engineer at Microsoft | ex-Flipkart
Chirag Goel, Senior Software Engineer at Microsoft, previously worked with companies like Flipkart and many other startups. Chirag has 10+ years of experience in the software industry and has helped professionals crack senior and staff-level positions in product-based companies. Well known for his famous playlist named Chakde System Design.
Official Namaste Frontend System Design Course Certificate π₯
You can add this certificate in your Resume!
Share it with your LinkedIn network π
![certificate](https://do6gp1uxl3luu.cloudfront.net/course_certificates/nfsd_certificate.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/accenture.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/Adobe.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/amazon.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/Atlassian_logo_PNG1.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/Cisco_logo_PNG2.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/Flipkart_logo_PNG1.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/google_PNG.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/Infosys_logo_PNG2.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/microsoft.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/Oracle_logo_PNG1.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/Paytm_logo_PNG1.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/PhonePe_Logo_PNG1.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/uber.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/unacamedy.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/Walmart_logo_PNG1.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/wipro.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/Yahoo_logo_PNG1.webp)
![company-logos](https://do6gp1uxl3luu.cloudfront.net/company_logos/Zomato_logo_PNG1.webp)
And Many More...
And so much more...
Basically, we will teach you everything we have learned over years of working in the software industry. β€οΈ
We be sharing our real industry experience of designing systems in companies like Paytm, Flipkart, Microsoft and Uber! π
We will teach you everything right from scratch to the advanced topics. You'll go from Zero to Hero in Frontend System Design π
Sounds cool, isn't it?
- Testing
- Offline Support
- Deployments & Hosting
- Search Engine optimization
- Low Level Design - LLD
- Interview Preparation
- Bonus - Resume, LinkedIn, Salary Negotiation
- Security
- Networking
- Logging & Monitoring
- Communication
- Database & Caching
- Accessibility
- Performance
High Level Design will be covered by both!
This is high level overview of the topics covered by Akshay & Chirag. We will also keep adding more topics in the curriculum. We are here to bring the best π
A laptop with Internet connection, Basic Knowledge of frontend. Hunger for Learning. Ready for a grind.
Everything will be taught in English.
This course is intensive and knowledge heavy. This course is great for junior as well as senior developers. Everything is recorded in high quality, with very well edited videos. Learn at your own pace, watch it as many times you want to, keep making notes alongside. Hope this helps!
The course is a must-have for senior developers and a good-to-have for freshers. Basically, it is for everyone who wants dive deep into the world of Frontend Engineering. We cover everything from basics so it is good for Freshers and we also cover advanced topics that are relevant for all Senior Engineers as well. Checkout the topics in the curriculum, if this looks exciting, go for it! π₯
Frontend System Design is agnostic of framework/libraries, you need not to know these libraries to start this course. We sometimes use coding examples using React to explain the concepts, but knowing React is not mandatory to understand that concept. In short, you don't need React or Angular or Next or Vue.
Namaste FSD will help you crack your interviews for Machine Coding, LLD, HLD, Web Fundamentals, System Design rounds and it will also help you a lot while designing complex web applications.
This is an intensive Frontend System Design course, we will not be covering React, Node.js or Data Structures. However there might be some examples using React.
NO, this is NOT a Job-guarantee program. (No false promises). And Please donβt even believe in courses that sell you the dream of Job guarantee. But we are sure that, if you finish watching these episodes, make notes and practice everything we teach, you will be so good in Node.js that interview questions will be a piece of cake for you.
Yes, you can access our NamasteDev platform on the phone, but we highly recommend you to watch these videos on a laptop and practice all the coding concepts on your system. Practicing on your own is really important if you want to make the best out of this course.
Drop us a mail at [email protected]