React Feature Demo Site

This project is a comprehensive, interactive demo of React and web UI features, built with React + TypeScript + Vite. It showcases 43 fully functional demo pages covering all major React features, HTML elements, and web UI components in a responsive, well-organized layout.

Features

✅ 43 Interactive Demo Pages - All working with live code examples

• React Core Features (9 demos): State, Props, Context, Hooks, Refs, Memo, Lazy/Suspense, Error Boundaries, Portals
• HTML Elements (7 demos): Inputs, Forms, Tables, Lists, Media (Image/Audio/Video), SVG, Canvas
• Web UI Components (9 demos): Modals, Tooltips, Dropdowns, Tabs, Accordions, Notifications, Progress Bars, Avatars, Badges
• UI Extras (4 demos): Carousel, Rating Stars, Skeleton Loaders, SVG Charts
• Advanced Features (14 demos): Charts (Chart.js/Recharts), Maps, Search/Typeahead, File Upload, Auth (Mock), PWA, Performance, Accessibility, Security, Pagination, Drag & Reorder, i18n, SEO, Analytics

✅ Modern Architecture

• Responsive layout for desktop and mobile (sidebar navigation with collapse/breadcrumb menu)
• Global theme system with CSS variables (color, font, layout themes)
• Dynamic navigation from JSON data
• Clean component structure with separated concerns
• No hardcoded values, minimal code duplication
• TypeScript throughout for type safety
• All demos include inline code examples

Project Structure

src/
  components/      # Reusable UI components
  pages/           # Feature demo pages
  data/            # Static JSON data
  styles/          # Global and theme CSS
  utils/           # Helpers
  hooks/           # Custom hooks
  context/         # React context providers
  assets/          # Images, icons
  tests/           # Unit/e2e tests
  mocks/           # Mock data for tests

Setup & Development

npm install
npm run dev

Open http://localhost:5173 in your browser.

Build & Preview

npm run build
npm run preview

Deploy to GitHub Pages

1. Add to vite.config.ts:

   export default defineConfig({
     base: "/<repo-name>/", // Replace with your repo name
     // ...other config
   });

2. Add deploy script to package.json:

   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist"
   }

3. Run:

   npm run deploy

Testing

Unit test infrastructure is set up with Vitest and React Testing Library.

npm run test:unit

What's Included

All 43 demo pages are fully functional with interactive examples:

React Core (9 pages)

• State: Counter, toggle, and input demos with useState
• Props: Component composition and prop passing
• Context: Context API with providers and consumers
• Hooks: useEffect, useReducer, useCallback examples
• Refs: DOM refs, focus management, useImperativeHandle
• Memo: React.memo and useMemo optimization examples
• Lazy/Suspense: Code-splitting and lazy loading demos
• Error Boundaries: Error handling with class components
• Portals: ReactDOM.createPortal for modals and overlays

HTML Elements (7 pages)

• Inputs: Text, checkbox, select inputs with controlled state
• Forms: Validation, multi-field forms
• Tables: Basic, sortable, and styled tables
• Lists: Ordered, unordered, and interactive lists
• Media: Images, audio players, and video elements
• SVG: Shapes, animations, and interactive SVG
• Canvas: Drawing, animation, and click interactions

Web UI Components (9 pages)

• Modals: Basic, animated, and form modals
• Tooltips: Hover and click-triggered tooltips
• Dropdowns: Native select and controlled dropdowns
• Tabs: Tab navigation with state management
• Accordions: Collapsible content panels
• Notifications: Info, success, and error messages
• Progress Bars: Static, animated, and controlled
• Avatars: Image, initials, and status avatars
• Badges: Text, status, and icon badges

UI Extras (4 pages)

• Carousel: Image/content slider with transitions
• Rating Stars: Interactive 5-star rating component
• Skeleton Loaders: Loading placeholders
• SVG Charts: Custom bar and line charts

Advanced & Ops (14 pages)

• Charts: Interactive Chart.js and Recharts examples
• Maps: Integration guide for Leaflet/Mapbox
• Search/Typeahead: Live filtering/autocomplete
• File Upload: Drag & drop with file list
• Auth: Mock authentication flow
• PWA: Progressive web app setup guide
• Performance: Optimization checklist
• Accessibility: A11y best practices
• Security: Security checklist
• Pagination: Client-side pagination
• Drag & Reorder: HTML5 drag API list reordering
• i18n: Internationalization example
• SEO: Structured data examples
• Analytics: Analytics integration guide

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs["recommended-typescript"],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);