Deploy Magic Patterns Apps

Overview

Transform your Magic Patterns AI-designed UI into a production application on Chita Cloud with full backend support.

What is Magic Patterns?

Magic Patterns is an AI-powered design tool that generates beautiful, production-ready React and Next.js components from prompts. Perfect for creating modern UIs without design skills.

Why Use Chita Cloud?

Magic Patterns generates frontend code. Chita Cloud provides:

• Production hosting for your UI
• Backend services (PostgreSQL, Redis)
• Custom domains + SSL
• API integration support
• Always-on infrastructure

Deployment Steps

Step 1: Design with Magic Patterns

1. Go to magicpatterns.com
2. Describe your UI component or page
3. AI generates React/Next.js code
4. Customize colors, layout, interactions
5. Export production-ready code

Step 2: Export Your Code

Magic Patterns Export Options:

1. Click "Export" button
2. Choose framework:
   • React (standalone components)
   • Next.js (full pages)
   • Tailwind CSS (included)
3. Copy code or download files
4. Get responsive, accessible components

Step 3: Set Up Your Project

For React Components:

# Create new React app
npx create-react-app my-app
cd my-app
 
# Add Tailwind CSS (Magic Patterns uses it)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
 
# Paste Magic Patterns components into src/components/

For Next.js Pages:

# Create Next.js app
npx create-next-app@latest my-app
cd my-app
 
# Magic Patterns components go in:
# - pages/ (page components)
# - components/ (reusable components)

Step 4: Push to GitHub

git init
git add .
git commit -m "Magic Patterns UI"
git remote add origin git@github.com:yourusername/repo.git
git push -u origin main

Step 5: Deploy to Chita Cloud

1. Go to app.chitacloud.com
2. Click "Deploy" button
3. Select "GitHub Repository"
4. Authorize GitHub
5. Choose your repository
6. Framework auto-detected:
   • React (Create React App, Vite)
   • Next.js
7. Click "Deploy"

Step 6: Add Backend Services

Magic Patterns creates beautiful frontends. Add backend:

PostgreSQL for Data:

1. Go to "Add-ons" tab
2. Add PostgreSQL (100MB free or from €7/month)
3. Use for user data, content, forms

Redis for Sessions:

• Included in all paid plans ✅
• Perfect for user sessions, caching

Database: PostgreSQL setup | Sessions: Redis cache

Step 7: Connect to APIs

Add environment variables for backend:

1. Go to "Environment Variables" tab
2. Add API endpoints:
   • NEXT_PUBLIC_API_URL
   • DATABASE_URL (auto-provided)
   • REDIS_URL (auto-provided)
3. Add third-party APIs:
   • STRIPE_PUBLISHABLE_KEY
   • OPENAI_API_KEY
   • etc.

Secure variables: Environment Variables

Step 8: Custom Domain

1. Go to "Domains" tab
2. Add your domain (e.g., myapp.com)
3. Configure DNS
4. SSL issued automatically
5. Your beautiful UI now on custom domain ✅

Integration Patterns

Magic Patterns + API

// Magic Patterns component with API integration
import { useState, useEffect } from 'react';
 
export default function Dashboard() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // Call your backend API
    fetch(process.env.NEXT_PUBLIC_API_URL + '/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);
  
  // Magic Patterns UI renders data beautifully
  return (
    <div className="grid grid-cols-3 gap-4">
      {data.map(item => (
        <Card key={item.id} {...item} />
      ))}
    </div>
  );
}

Magic Patterns + PostgreSQL

// pages/api/data.js - Backend for Magic Patterns UI
import { Pool } from 'pg';
 
const pool = new Pool({
  connectionString: process.env.DATABASE_URL
});
 
export default async function handler(req, res) {
  const { rows } = await pool.query('SELECT * FROM items');
  res.json(rows);
}

Magic Patterns + Forms

// Magic Patterns form with backend submission
async function handleSubmit(formData) {
  await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  });
}

Common Use Cases

Landing Page

1. Design landing page in Magic Patterns
2. Export Next.js code
3. Add contact form backend
4. Deploy with custom domain
5. Launch in under 1 hour

SaaS Dashboard

1. Design dashboard UI with Magic Patterns
2. Export components
3. Add PostgreSQL for user data
4. Add Redis for sessions
5. Integrate authentication
6. Production-ready SaaS UI

E-commerce Storefront

1. Design product cards, checkout in Magic Patterns
2. Export React components
3. Add PostgreSQL for products
4. Integrate Stripe
5. Deploy on custom domain

Pricing Example

Magic Patterns App on Chita Cloud:

Compare to Vercel Pro ($20) + Supabase Pro ($25) + Redis ($25) = Save ~€45/month

Best Practices

Responsive Design

Magic Patterns generates responsive code. Test on:

• Desktop (1920px)
• Tablet (768px)
• Mobile (375px)

All automatically responsive with Tailwind CSS.

Component Organization

src/
├── components/
│   ├── magicpatterns/  # All exported components
│   │   ├── Hero.jsx
│   │   ├── Pricing.jsx
│   │   └── Dashboard.jsx
│   └── custom/         # Your custom components
├── pages/
└── api/                # Backend logic

Tailwind Configuration

Magic Patterns uses custom colors. Keep tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        // Magic Patterns custom colors
        primary: '#...',
        secondary: '#...',
      }
    }
  }
}

Troubleshooting

Tailwind Styles Not Working

Ensure tailwind.config.js has correct content paths:

module.exports = {
  content: [
    './pages/**/*.{js,jsx}',
    './components/**/*.{js,jsx}',
  ],
}

Images Not Loading

Use Next.js Image component:

import Image from 'next/image';
 
// Replace <img> with <Image>
<Image src="/hero.jpg" width={800} height={600} alt="Hero" />

API Routes 404

Ensure API routes in pages/api/ directory:

pages/
└── api/
    ├── submit.js
    └── data.js

Next Steps

• PostgreSQL Database
• Environment Variables
• Custom Domains
• Monitoring