1. UI Interactions

• Theme switcher (light/dark mode) with localStorage persistence.
• Sticky header with scroll direction detection.
• Mobile menu toggle and outside-click close behavior.
• Accordion FAQ section with smooth open/close transitions.
• Toast notifications for success, error, and warning actions.

Where used: blogs, dashboards, e-commerce, admin panels.

2. Forms & Validation

• Real-time email/phone/password validation with inline messages.
• Multi-step registration forms with progress indicator.
• Auto-format credit card and expiry date fields.
• Debounced username availability check.
• Prevent duplicate form submits with button locking and loading state.

Where used: signup flows, checkout pages, KYC and onboarding forms.

3. Arrays & Data Processing

• Filter and sort product catalogs by price, rating, and category.
• Generate analytics summaries using reduce.
• Paginate large lists with next/prev and page jump controls.
• Create leaderboard ranking from score arrays.
• Group sales records by region, month, or salesperson.

Where used: reporting dashboards, product listings, LMS course lists.

4. DOM & Event-Driven Features

• To-do app with add/edit/delete/complete and drag sorting.
• Live search and highlight in a long content list.
• Image carousel with keyboard and swipe support.
• Cart quantity increment/decrement with instant total updates.
• Bulk checkbox actions (select all, delete selected).

Where used: project management tools, stores, media galleries.

5. Async, APIs & Network Workflows

• Fetch weather/news/stock data with loading, retry, and error fallback.
• Auto-refresh dashboard metrics every N seconds.
• Search suggestions API with request cancellation logic.
• Parallel data fetching using Promise.all for fast page load.
• File upload progress indicator with optimistic UI.

Where used: SaaS dashboards, travel apps, financial tools, social platforms.

6. Authentication & Security-Oriented UI

• Login state-based navbar rendering (guest vs user menu).
• OTP input flow with auto-focus and countdown timer.
• Session timeout warning modal and auto-logout flow.
• Role-based button visibility in admin panels.
• Mask/unmask sensitive values (phone/email/account numbers).

Where used: fintech, healthcare portals, enterprise admin systems.

7. Modules & Maintainable Architecture

• Separate cart logic, UI rendering, and API calls into modules.
• Create shared utility module for date, currency, and validation helpers.
• Centralized configuration and constants modules.
• Feature-based module folders (auth, products, dashboard).
• Dynamic import for heavy feature pages (charts/editors).

Where used: medium to large codebases with multi-developer teams.

8. End-to-End Mini Apps

• Expense tracker with categories, monthly totals, and export.
• Notes app with markdown preview and local persistence.
• Quiz app with timer, score summary, and review mode.
• Habit tracker with streak calculations.
• Interview prep app with saved progress and bookmarks.

Where used: portfolio projects, startup MVPs, internal tooling.