Quick Start

Get up and running with QwickApps React Framework in just 5 minutes! This guide will walk you through creating your first application.

Step 1: Create Your Project

Start with a new React project (or use an existing one):

npx create-react-app my-qwickapps-project --template typescript
cd my-qwickapps-project

Step 2: Install QwickApps React Framework

Install the framework and its dependencies:

npm install @qwickapps/react-framework @emotion/react @emotion/styled @mui/material @mui/icons-material react-router-dom

Step 3: Basic Setup

Import CSS

Add the framework CSS to your src/index.tsx:

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import '@qwickapps/react-framework/dist/index.css';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Wrap with QwickApp

Update your src/App.tsx:

src/App.tsx

import React from 'react';
import { QwickApp, Button } from '@qwickapps/react-framework';

function App() {
  return (
    <QwickApp 
      appId="my-first-qwickapp"
      appName="My QwickApps App"
      enableScaffolding={true}
      showThemeSwitcher={true}
      showPaletteSwitcher={false}
    >
      <div style={{ padding: '2rem', textAlign: 'center' }}>
        <h1>Welcome to QwickApps! 🎉</h1>
        <p>Your app is ready to go. Try switching themes!</p>
        
        <div style={{ marginTop: '2rem' }}>
          <Button 
            variant="contained" 
            color="primary" 
            onClick={() => alert('Hello QwickApps!')}
          >
            Click Me!
          </Button>
        </div>
      </div>
    </QwickApp>
  );
}

export default App;

Step 4: Run Your App

Start the development server:

npm start

Your app should now be running at http://localhost:3000 with:

• A header with your app title
• A theme switcher (try clicking it!)
• A button that shows an alert
• Automatic dark/light mode detection

Step 5: Add More Components

Let's make it more interesting by adding some components:

src/App.tsx

import React from 'react';
import { 
  QwickApp, 
  Button, 
  Section,
  FeatureCard
} from '@qwickapps/react-framework';

function App() {
  const features = [
    {
      id: 'theming',
      title: 'Beautiful Theming',
      description: 'Light/dark mode with customizable color palettes',
      icon: '🎨'
    },
    {
      id: 'responsive',
      title: 'Mobile Friendly',
      description: 'Responsive components that work on all devices',
      icon: '📱'
    },
    {
      id: 'accessible',
      title: 'Accessibility First',
      description: 'WCAG compliant components out of the box',
      icon: '♿'
    }
  ];

  return (
    <QwickApp 
      appId="my-first-qwickapp"
      appName="My QwickApps App"
      enableScaffolding={true}
      showThemeSwitcher={true}
      showPaletteSwitcher={true}
    >
      <Section>
        <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
          <h1>Welcome to QwickApps! 🎉</h1>
          <p>Your app is ready to go. Try switching themes and palettes!</p>
          
          <div style={{ marginTop: '2rem' }}>
            <Button 
              variant="contained" 
              color="primary" 
              onClick={() => alert('Hello QwickApps!')}
              style={{ marginRight: '1rem' }}
            >
              Primary Button
            </Button>
            <Button 
              variant="outlined" 
              color="secondary"
              onClick={() => alert('Secondary action!')}
            >
              Secondary Button
            </Button>
          </div>
        </div>

        <div style={{ 
          display: 'grid', 
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: '2rem'
        }}>
          {features.map(feature => (
            <FeatureCard
              key={feature.id}
              feature={feature}
              variant="card"
            />
          ))}
        </div>
      </Section>
    </QwickApp>
  );
}

export default App;

What Just Happened?

🎯 You've created a QwickApps application with:

• Theming System: Users can switch between light/dark mode and different color palettes
• Responsive Layout: The Scaffold component provides a consistent app structure
• Interactive Components: Buttons, cards, and other UI elements
• Accessibility: All components are screen-reader friendly
• Mobile Support: Everything works perfectly on phones and tablets

Next Steps

Now that you have a working app, explore these features:

1. Components - Discover all available components
2. Theming - Customize colors and appearance
3. Data Binding - Connect to APIs and dynamic content
4. Layout System - Create complex layouts easily
5. Live Examples - See components in action

Need Help?

• 🐛 Found a bug? Report it on GitHub
• ❓ Have questions? Start a discussion
• 📖 Want to learn more? Check out our comprehensive guides

---

Congratulations! You've built your first QwickApps application. The framework handles theming, responsive design, and accessibility automatically, so you can focus on building great features.