- 🔭 I'm currently contributing to a Time Sheet Application at https://gwms.igenesys.com.
- 🌱 I'm actively diving deeper into MERN Stack (MongoDB, Express.js, React, Node.js), Java, and Spring Boot.
- 🤝 I'm always open to collaborating, especially on Node.js projects.
- 👨💻 Explore my work! All my projects are available at https://singhnandan222001.netlify.app/.
- 💬 Feel free to ask me anything about React, Laravel, Node.js, Java, and more!
- 📫 You can reach out to me directly at nandansingh222001@gmail.com.
I work with a diverse set of technologies to bring ideas to life. Here are some of my go-to tools and languages:
Here's a glimpse of my GitHub activity and statistics. These are dynamic and update regularly!
I'm always open to connecting with fellow developers and enthusiasts. Find me on:
If you find my projects helpful or interesting, consider supporting me!
Below is a comprehensive folder and markdown structure for the Namaste Frontend System Design course. Each module is organized as a separate folder, with a README.md file inside describing its content. This structure is designed for clarity, scalability, and ease of navigation, following best practices for frontend project organization[5][11].
frontend-system-design/
├── 01-important-guidelines/
│ └── README.md
├── 02-networking/
│ ├── 01-how-the-web-works.md
│ ├── 02-communication-protocols.md
│ ├── 03-rest-apis.md
│ ├── 04-graphql.md
│ └── 05-grpc.md
├── 03-communication/
│ ├── 01-overview.md
│ ├── 02-short-polling.md
│ ├── 03-long-polling.md
│ ├── 04-web-sockets.md
│ ├── 05-server-side-events.md
│ └── 06-webhooks.md
├── 04-security/
│ ├── 01-overview.md
│ ├── 02-xss.md
│ ├── 03-iframe-protection.md
│ ├── 04-security-headers.md
│ ├── 05-client-side-security.md
│ ├── 06-https.md
│ ├── 07-dependency-security.md
│ ├── 08-compliance-regulation.md
│ ├── 09-input-validation-sanitization.md
│ ├── 10-ssrf.md
│ ├── 11-ssji.md
│ ├── 12-feature-policy.md
│ ├── 13-sri.md
│ ├── 14-cors.md
│ └── 15-csrf.md
├── 05-testing/
│ ├── 01-overview.md
│ ├── 02-unit-integration-testing.md
│ ├── 03-e2e-automation-testing.md
│ ├── 04-ab-testing.md
│ ├── 05-performance-testing.md
│ ├── 06-tdd-overview.md
│ ├── 07-security-testing.md
│ └── 08-bonus-namaste-react-testing.md
├── 06-performance/
│ ├── 01-overview.md
│ ├── 02-importance.md
│ ├── 03-monitoring.md
│ ├── 04-tools.md
│ ├── 05-network-optimization.md
│ ├── 06-rendering-pattern.md
│ └── 07-build-optimization.md
├── 07-database-caching/
│ ├── 01-overview.md
│ ├── 02-local-storage.md
│ ├── 03-session-storage.md
│ ├── 04-cookie-storage.md
│ ├── 05-indexeddb.md
│ ├── 06-normalization.md
│ ├── 07-http-caching.md
│ ├── 08-service-worker-caching.md
│ ├── 09-api-caching.md
│ └── 10-state-management.md
├── 08-logging-monitoring/
│ ├── 01-overview.md
│ ├── 02-telemetry.md
│ ├── 03-alerting.md
│ └── 04-fixing.md
├── 09-accessibility/
│ ├── 01-overview.md
│ ├── 02-keyboard-accessibility.md
│ ├── 03-screen-reader.md
│ ├── 04-focus-management.md
│ ├── 05-color-contrast.md
│ ├── 06-tools.md
│ └── 07-how-to-fix.md
├── 10-service-workers/
│ └── README.md
├── 11-pwa/
│ └── README.md
├── 12-component-design/
│ ├── 01-overview.md
│ ├── 02-config-driven-ui.md
│ ├── 03-shimmer-ui.md
│ └── 04-routing-protected-routes.md
├── 13-state-management-libraries/
│ └── README.md
├── 14-multi-language-support/
│ └── README.md
├── 15-ui-patterns/
│ ├── 01-infinite-scroll.md
│ ├── 02-accordion.md
│ ├── 03-reddit-nested-comments.md
│ ├── 04-image-slider.md
│ ├── 05-pagination-part1.md
│ ├── 06-pagination-part2.md
│ ├── 07-real-time-updates.md
│ ├── 08-youtube-live-chat-ui.md
│ └── 09-autocomplete-search-bar.md
├── 16-hld/
│ ├── 01-overview.md
│ ├── 02-photo-sharing-app.md
│ ├── 03-ecommerce-app.md
│ ├── 04-news-media-feed.md
│ ├── 05-video-streaming.md
│ ├── 06-music-streaming.md
│ ├── 07-live-commentary.md
│ ├── 08-email-client.md
│ ├── 09-diagram-tools.md
│ ├── 10-analytics-dashboard.md
│ ├── 11-google-docs.md
│ └── 12-google-sheets.md
├── 17-bonus/
│ ├── 01-salary-negotiation-masterclass.md
│ ├── 02-resume-masterclass.md
│ ├── 03-personal-branding-masterclass.md
│ └── 04-linkedin-masterclass.md
├── 18-interview-questions/
│ ├── 01-security.md
│ ├── 02-communication-protocol.md
│ ├── 03-database-caching.md
│ ├── 04-logging-monitoring.md
│ └── 05-networking.md
├── 19-live-qa/
│ ├── 01-2025-january.md
│ ├── 02-2025-february.md
│ ├── 03-2025-march.md
│ ├── 04-2025-april-security.md
│ └── 05-2025-may-database-caching.md
└── README.md
Each module folder contains a README.md with the following template:
assets/— Images, icons, and other static resources.components/— Reusable UI components.hooks/— Custom React hooks.utils/— Utility functions and helpers.pages/— Top-level pages or routes.routes/— Route definitions and guards.tests/— Unit and integration tests.config/— Configuration files (e.g., environment, API endpoints).
- Each module is self-contained for easy navigation and maintainability.
- The structure supports scalability for future modules or topics.
- Follows modern frontend project organization principles for clarity and collaboration[5][11].