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: