Frontend Coding

Frontend Coding

Overview

Expert frontend development guidance covering React, Vue, Angular, TypeScript, state management, component architecture, performance optimization, accessibility, testing, and modern web APIs.

Core Capabilities

1. Framework Expertise - React, Vue, Angular, Svelte
2. TypeScript - Type-safe development
3. State Management - Redux, Vuex, Pinia, Context API
4. Component Patterns - Composition, hooks, composables
5. Performance - Code splitting, lazy loading, optimization
6. Accessibility - WCAG compliance, ARIA
7. Testing - Jest, Testing Library, Cypress

Quick Start

React Component Example:

import React, { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
}

export const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

Critical Tips

1. Use TypeScript - Type safety prevents runtime errors
2. Component composition - Build reusable, composable components
3. Performance matters - Memoization, lazy loading, code splitting
4. Accessibility first - WCAG compliance from the start
5. Test thoroughly - Unit, integration, E2E testing

Framework-Specific Guidance

React Development - See react-development.md for:

• Functional components and hooks (useState, useEffect, useCallback, useMemo)
• Custom hooks and composition patterns
• Context API and prop drilling solutions
• React Server Components and Next.js

React Advanced Patterns - See react-patterns.md for:

• Custom hooks patterns (data fetching, form handling, debouncing)
• Higher-order components (HOC) and render props
• Compound components and controlled/uncontrolled patterns
• Error boundaries and suspense

Vue.js Development - See vuejs-development.md for:

• Composition API and Options API
• Composables and reactivity system
• Vue Router, Pinia state management
• Nuxt.js and server-side rendering

Vue Advanced Patterns - See vue-patterns.md for:

• Composables organization and reusability
• Provide/inject pattern and plugin development
• Custom directives and render functions
• Advanced reactivity patterns

Cross-Framework Topics

Component Patterns - See component-patterns.md for:

• Compound components (tabs, accordions, modals)
• Render props and slots patterns
• Controlled vs uncontrolled components
• Container/presentational component separation

State Management - See state-management.md for:

• Redux, Zustand, Jotai (React)
• Pinia, Vuex (Vue)
• NgRx, Akita (Angular)
• Server state management (React Query, SWR, TanStack Query)

TypeScript Best Practices - See typescript-best-practices.md for:

• Type safety, inference, and utility types
• Generics and advanced type patterns
• Type guards and narrowing
• Framework-specific TypeScript patterns

Best Practices - See best-practices.md for:

• Project structure and code organization
• Naming conventions and file naming
• Testing strategies (unit, integration, E2E)
• Security best practices (XSS, CSRF, input validation)

Performance & Accessibility - See performance-testing.md for:

• Code splitting and lazy loading
• Bundle optimization and tree shaking
• Performance monitoring and profiling
• WCAG compliance and accessibility testing