Skip to main content

Complete Application

Experience the full potential of QwickApps React Framework through these complete application examples. These demos showcase how multiple components, theming systems, and responsive layouts work together to create professional applications with minimal setup.

The QwickApp Component​

QwickApp is the foundation component that provides everything you need to build a complete application. It automatically sets up the theme system, component library, and responsive infrastructure with a single wrapper component.

Key Features​

🎨 Complete Theme System

  • Automatic light/dark mode switching
  • Multiple color palettes with instant switching
  • localStorage persistence for user preferences
  • MUI theme integration with consistent styling

⚡ Zero Configuration

  • Single component setup replaces multiple providers
  • Automatic CSS loading for all components
  • Built-in accessibility monitoring
  • Storage isolation with unique app identifiers

🧩 Rich Component Library

  • 50+ production-ready components
  • Data binding support for dynamic content
  • Consistent styling across all components
  • TypeScript support with comprehensive interfaces

📱 Responsive Design

  • Mobile-first component architecture
  • Adaptive layouts for all screen sizes
  • Flexible scaffolding system
  • Professional navigation patterns

Complete Framework Example​

This comprehensive demo shows QwickApp powering a full application with hero sections, feature grids, content blocks, and integrated theme switching:

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →

What This Demo Shows:

  • Hero Block Integration - Professional landing page section with gradient backgrounds
  • Feature Grid Layout - Organized feature showcase with consistent spacing
  • Content Sections - Rich text content with alternating backgrounds
  • Theme System - Real-time theme and palette switching
  • Component Integration - Multiple Framework components working seamlessly together

Implementation​

import { QwickApp, HeroBlock, Section, Content, FeatureGrid } from '@qwickapps/react-framework';

function App() {
  return (
    <QwickApp 
      appId="com.example.my-app"
      appName="My Application"
    >
      <HeroBlock
        title="Complete QwickApp Framework"
        subtitle="Theme system, components, and layout working together seamlessly"
        backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        blockHeight="medium"
        textAlign="center"
      />

      <Section>
        <Content title="Framework Benefits" centered>
          <FeatureGrid
            columns={2}
            gap="large"
            features={[
              {
                id: 'theme-system',
                title: '🎨 Complete Theme System',
                description: 'Automatic theme and palette management with localStorage persistence.'
              },
              // ... more features
            ]}
          />
        </Content>
      </Section>

      <Section background="alternate">
        <Content title="Theme System Demo" centered>
          <p>Try switching themes and palettes - all components adapt automatically!</p>
        </Content>
      </Section>
    </QwickApp>
  );
}

Interactive Theme System Demo​

This demo showcases the complete theme system with real-time state monitoring and interactive controls:

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →

Key Features Demonstrated:

  • Real-time State Display - See current theme mode, palette, and system state
  • Interactive Controls - Buttons to switch between light, dark, and system themes
  • Palette Selection - Visual palette picker with live preview
  • Color Showcase - Live display of current color scheme
  • Accessibility Monitoring - Built-in accessibility checker integration

Advanced Theme Usage​

import { useTheme, usePalette } from '@qwickapps/react-framework';

function ThemeSystemDemo() {
  const { currentTheme, actualThemeMode, setPreferredTheme } = useTheme();
  const { currentPalette, setPreferredPalette, availablePalettes } = usePalette();

  return (
    <div>
      <h3>Current State:</h3>
      <p>Theme: {currentTheme} → {actualThemeMode}</p>
      <p>Palette: {currentPalette}</p>
      
      <h3>Theme Controls:</h3>
      <button onClick={() => setPreferredTheme('light')}>
        Light Mode
      </button>
      <button onClick={() => setPreferredTheme('dark')}>
        Dark Mode
      </button>
      <button onClick={() => setPreferredTheme('system')}>
        System Mode
      </button>
      
      <h3>Palette Controls:</h3>
      {availablePalettes.map((palette) => (
        <button
          key={palette.id}
          onClick={() => setPreferredPalette(palette.id)}
        >
          {palette.name}
        </button>
      ))}
    </div>
  );
}

Simple Getting Started Example​

Perfect for beginners - the minimal setup needed to get started with QwickApps React Framework:

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →

Minimal Implementation:

import { QwickApp, Logo, ThemeSwitcher, PaletteSwitcher } from '@qwickapps/react-framework';

function App() {
  return (
    <QwickApp appId="com.example.simple-app">
      <div style={{ padding: '24px', textAlign: 'center' }}>
        <Logo name="Simple App" size="large" />
        <h1>Hello QwickApp! 👋</h1>
        <p>This simple example shows how easy it is to get started.</p>
        
        <div style={{ display: 'flex', gap: '16px', justifyContent: 'center' }}>
          <ThemeSwitcher />
          <PaletteSwitcher />
        </div>
      </div>
    </QwickApp>
  );
}

Storage Isolation Demo​

Learn how QwickApp uses unique app IDs to prevent conflicts between multiple applications:

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →

Benefits of Storage Isolation:

  • No Conflicts - Multiple QwickApps on same domain won't interfere
  • Clean Separation - Each app maintains its own theme preferences
  • Easy Identification - Clear localStorage keys show which app stored what
  • Multi-tenant Support - Perfect for platforms hosting multiple applications

Storage Key Structure​

// App ID: "com.example.my-app"
// Storage Keys:
// - Theme: "com.example.my-app.theme"
// - Palette: "com.example.my-app.palette"

const appId = 'com.example.my-app';
const themeKey = `${appId}.theme`;
const paletteKey = `${appId}.palette`;

Architecture Benefits​

Single Component Setup​

Replace complex provider hierarchies with one component:

// ❌ Traditional React setup
function App() {
  return (
    <ThemeProvider theme={theme}>
      <PaletteProvider>
        <DimensionsProvider>
          <CssBaseline />
          <YourApp />
        </DimensionsProvider>
      </PaletteProvider>
    </ThemeProvider>
  );
}

// ✅ QwickApp setup
function App() {
  return (
    <QwickApp appId="com.example.app">
      <YourApp />
    </QwickApp>
  );
}

Automatic Integration​

Everything works together automatically:

  • MUI Theme Sync - Automatic synchronization with Material-UI theme system
  • CSS Variables - Consistent design tokens across all components
  • Responsive Breakpoints - Unified breakpoint system for all layouts
  • Accessibility - Built-in accessibility monitoring and compliance checking

Production Ready​

Features designed for production applications:

  • Performance Optimized - Efficient re-rendering and state management
  • Type Safety - Comprehensive TypeScript support
  • Error Boundaries - Graceful error handling and recovery
  • SEO Friendly - Server-side rendering compatible

Component Integration​

Layout Components​

All layout components integrate seamlessly:

<QwickApp appId="com.example.app">
  {/* Hero sections with gradient backgrounds */}
  <HeroBlock title="Welcome" backgroundGradient="..." />
  
  {/* Content sections with alternating backgrounds */}
  <Section background="alternate">
    <Content title="Features" centered>
      <FeatureGrid features={features} />
    </Content>
  </Section>
  
  {/* Footer with theme-aware styling */}
  <Footer items={footerItems} />
</QwickApp>

Form Components​

Forms automatically inherit theme styling:

<QwickApp appId="com.example.app">
  <FormBlock title="Contact Us">
    <TextInputField label="Name" required />
    <TextInputField label="Email" type="email" required />
    <HtmlInputField label="Message" rows={4} />
    <Button type="submit" variant="primary">Send Message</Button>
  </FormBlock>
</QwickApp>

Data Binding Integration​

Works seamlessly with the data binding system:

<QwickApp appId="com.example.app">
  {/* Content loaded from CMS */}
  <HeroBlock dataSource="pages.home.hero" />
  <Content dataSource="pages.home.about" />
  <FeatureGrid dataSource="pages.home.features" />
</QwickApp>

Best Practices​

1. Use Unique App IDs​

Choose descriptive, unique identifiers:

// ✅ Good - follows reverse domain pattern
<QwickApp appId="com.mycompany.myapp" />

// ❌ Avoid - too generic, could conflict
<QwickApp appId="app" />

2. Set Sensible Defaults​

Provide good default themes and palettes:

<QwickApp 
  appId="com.example.app"
  defaultTheme="system"      // Respects user's OS preference
  defaultPalette="blue"      // Brand-appropriate color
  appName="My Application"   // For screen readers
/>

3. Organize Content Structure​

Use semantic HTML structure:

<QwickApp appId="com.example.app">
  <header>
    <HeroBlock />
  </header>
  
  <main>
    <Section>
      <Content />
    </Section>
  </main>
  
  <footer>
    <Footer />
  </footer>
</QwickApp>

4. Handle Loading States​

Provide loading experiences:

function App() {
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // Initialize data
    loadAppData().then(() => setLoading(false));
  }, []);
  
  if (loading) {
    return (
      <QwickApp appId="com.example.app">
        <div>Loading...</div>
      </QwickApp>
    );
  }
  
  return (
    <QwickApp appId="com.example.app">
      <YourApp />
    </QwickApp>
  );
}

Learn More​