CoderRange - AI , Big data , Data Science !.

### 1. Coding Challenge: Build a Dynamic Form with Validation & Reusability (25 mins)

Objective: Implement a dynamic form component in React that accepts JSON schema and renders inputs with built-in validation.
Key Concepts:

• Controlled components and form state
• Reusable components with props and context
• Validation (custom + libraries like Yup)

Discussion Points:

• Schema-driven UI design
• Managing deeply nested form data
• Performance with large forms (memoization, virtualization)

***

### 2. Debugging Simulation: Resolving React Memory Leaks (25 mins)

Scenario: A React dashboard gradually slows down and crashes after prolonged use.
Tasks:

• Identify and fix memory leaks from event listeners, intervals, or subscriptions
• Apply cleanup with `useEffect` and test with Chrome DevTools

Key Concepts:

• React lifecycle (`useEffect`, cleanup, unmount)
• Debugging with React DevTools + Profiler
• Preventing zombie subscriptions and stale state

***

### 3. System Design Session: Designing a Component Library for an Enterprise App (35 mins)

Objective: Architect a scalable and themeable component library with Storybook integration.
Discussion Points:

• Atomic design principles
• Style systems (Tailwind vs Styled Components)
• Component composition and accessibility

Key Concepts:

• `React.forwardRef`, `useImperativeHandle`
• Design tokens and theme context
• Publishing as NPM package

***

### 4. Real-World Product Issue: Handling Global Error Boundaries & Logging (25 mins)

Scenario: In production, certain user flows result in blank screens with no feedback.
Tasks:

• Implement a global error boundary that logs to an external service
• Display fallback UIs with user-friendly messaging

Key Concepts:

• `componentDidCatch` vs `useErrorBoundary`
• Integration with Sentry, LogRocket, or custom loggers
• Ensuring observability in SPAs

***

### 5. Q&A and React Roundtable (30 mins)

Open forum:

• Discuss real-world challenges like hydration errors, performance bottlenecks, or state explosion
• Interview insights for React engineers (2–6 YOE)
• Live review of participant projects or portfolio advice

***

> ✅ Bonus Add-on for Recruiter/Team Use:
> Series 2 – "ReactJS Pro Advanced":

• React + GraphQL integration
• State machine with XState
• Lazy loading, code splitting, SSR & hydration
• Testing React apps with Cypress + Jest

Join Zoom Meeting

### 🔧 Hands-On Demo: Building a Scalable Cloud Automation Module

Join us for an interactive session where we delve into the evolution of cloud automation. We'll demonstrate how to implement a cloud automation module using traditional scripting methods and then enhance it with AI capabilities.

***

### 🛠️ What You'll Learn:

#### Without AI: Traditional Automation

• Infrastructure as Code (IaC): Deploy resources using tools like Terraform or AWS CloudFormation.
• CI/CD Pipelines: Set up automated deployment pipelines with Jenkins or GitHub Actions.
• Monitoring & Alerts: Configure monitoring using CloudWatch or Prometheus.

#### With AI: Intelligent Automation

• AI-Powered Monitoring: Implement anomaly detection using AI models to proactively identify issues.
• Smart Scaling: Utilize AI to predict traffic patterns and auto-scale resources accordingly.
• ChatOps Integration: Deploy AI-driven chatbots for operational tasks and alerts.

***

### 🎁 Takeaways:

• Access to the complete codebase for both implementations.
• Step-by-step guides and documentation.
• Certificate of participation.
• Networking opportunities with industry professionals.

***

### 👥 Who Should Attend:

• Developers aiming to enhance their DevOps skills.
• Cloud engineers interested in AI integrations.
• Tech enthusiasts eager to explore the future of cloud automation.

***

### 📅 Event Details:

Join Zoom Meeting

# 🚀 FAANG DSA Masterclass (2 Hours)

Time: 6:30 PM – 8:30 PM (Bangalore/Hyderabad + YouTube + Zoom)
Audience: 500+ aspiring FAANG engineers
Theme: “Patterns, not problems – Crack FAANG the smart way.”

***

### ⏰ Agenda (2 Hours – Impact-First)

| Time | Session | Delivery Style |
| ---- | ------- | -------------- |
| 6:30 – 6:40 (10 min) | Welcome + FAANG Mindset |

- Icebreaker poll (Kahoot/Slido: “Which FAANG company do you dream of?”)

- Why FAANG focuses on patterns, not problems | High-energy, interactive |
| 6:40 – 6:55 (15 min) | Top 12 FAANG Patterns Overview

- Quick story: how Google repeats patterns

- Show visual cheatsheet (12 patterns in one mindmap) | Storytelling + Visuals |
| 6:55 – 7:15 (20 min) | Deep Dive Into 3 Core Patterns (Live Code)

1. Sliding Window (Max sum subarray)

2. Two Pointers (Palindrome check)

3. DP Made Simple (Fibonacci → Knapsack) | Live coding + Q&A |
| 7:15 – 7:30 (15 min) | Google-style Mock Interview (Live)

- Pick 1 audience member (or pre-volunteer)

- Solve “Container With Most Water”

- Panel-style feedback on thinking process | Role-play + Feedback |
| 7:30 – 7:45 (15 min) | Patterns in Action (Quickfire Round)

- 9 remaining patterns explained in 1-min per pattern with sample problem | Fast-paced visual sprint |
| 7:45 – 7:55 (10 min) | 90-Day FAANG Pattern Planner

- How to schedule 2 patterns/week

- LeetCode + GitHub + Telegram Group | Career Roadmap |
| 7:55 – 8:10 (15 min) | Resume + LinkedIn for FAANG

- What recruiters actually look for

- Common resume mistakes

- Example of 2 resumes (good vs bad) | Practical demo |
| 8:10 – 8:25 (15 min) | Open Q&A + Hot Seat

- Audience asks DSA / FAANG hiring doubts

- Spot mentoring & corrections | AMA-style |
| 8:25 – 8:30 (5 min) | Wrap-up + Resource Drop

- 🎁 PDF “12 Patterns in 120 Problems”

- Free GitHub Repo

- Telegram/Discord group invite | Call-to-action |

***

### 🔑 Effectiveness Boosters

• Visual-first delivery: Use slides with pattern mindmaps + LeetCode snippets.
• Live coding (not PPT-only): 20 min segment makes session hands-on.
• Mock interview role-play: Creates real FAANG vibe.
• Quickfire patterns sprint: Keeps attention high, no drag.
• Free resources (PDF, GitHub, Tracker): Hooks audience after session.

Join Zoom Meeting