Deploy Live Web Applications

Create professional websites and web applications just by describing what you want. No coding, no hosting headaches—just your idea turned into a live website that works everywhere.

New to Space Apps? Think of them as Genesis's superpower for building customer-facing websites. Perfect for businesses that need professional web presence quickly!

---

What Are Space Apps?

Space Apps are Genesis's way of turning your ideas into real, professional websites. Instead of building internal tools for your team, Space Apps create polished websites that your customers can visit and use—complete with their own web address!

Space Apps vs. Project-Based Apps

Feature	Space Apps	Project-Based Apps
What You Get	Real websites your customers visit	Internal team workspaces
Where It Lives	Your own web address (like yoursite.com)	Inside your Taskade workspace
Who Uses It	Your customers and the public	Your team members
How It Looks	Complete control over design and branding	Uses Taskade's standard layouts
What's Inside	Modern website technology	Taskade's project tools
Speed	Lightning-fast loading worldwide	Fast within Taskade
Tech Stuff	All the code if you want to see it	No code access needed

---

🚀 Getting Started with Space Apps

Step 1: Choose Space Apps for Your Use Case

Perfect for:

• Customer-facing applications (booking systems, feedback forms, portals)

• Marketing websites and landing pages

• E-commerce storefronts and catalogs

• Public dashboards and reporting tools

• Mobile-responsive web applications

Consider Project-Based Apps for:

• Internal team collaboration

• Complex workflow management

• Heavy data manipulation and reporting

• Advanced automation workflows

Step 2: Create Your First Space App

1. Open Genesis in your Taskade workspace

2. Select "Space App" creation mode

3. Write your prompt using the proven formula:

I run a [BUSINESS TYPE] and need [TARGET USERS] to [PRIMARY ACTION].

They should be able to [SPECIFIC FEATURES], and when they [TRIGGER], 
the system should [AUTOMATIC RESPONSES].

The app should [VISUAL/UX REQUIREMENTS] and work well on [DEVICES].

Step 3: Deployment and Sharing

Space Apps deploy automatically with global distribution:

• Instant URLs: Your app gets a live URL immediately

• Global CDN: Fast loading worldwide with edge caching

• Mobile Responsive: Automatically optimized for all screen sizes

• HTTPS Enabled: Secure connections out of the box

---

🎨 Advanced Space App Features

Responsive Design & Mobile Optimization

Space Apps are built mobile-first using Tailwind CSS:

/* Generated responsive components */
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
    {/* Card content */}
  </div>
</div>

Mobile Optimization Features:

• Touch-friendly UI elements

• Optimized form inputs for mobile keyboards

• Swipe gestures where appropriate

• Fast loading with code splitting

• Progressive Web App (PWA) capabilities

Real-Time Data Integration

Connect your Space Apps to live Taskade projects:

// Automatic integration with Taskade projects
const { data: submissions } = useTaskadeProject('feedback-responses');
const { data: inventory } = useTaskadeProject('product-catalog');

// Real-time updates
useEffect(() => {
  // App updates when project data changes
  console.log('New submission:', submissions.latest);
}, [submissions]);

Advanced UI Components

Space Apps include a rich set of pre-built components:

• Form Components: Multi-step forms, file uploads, validation

• Data Display: Tables, charts, dashboards, galleries

• Navigation: Headers, sidebars, breadcrumbs, tabs

• Interactive Elements: Modals, dropdowns, accordions

• Media: Image galleries, video players, carousels

---

🎯 Space App Examples & Templates

E-Commerce Product Catalog

Prompt:

Create an online product catalog for my clothing boutique where customers can browse items by category (dresses, tops, bottoms, accessories), filter by size and color, and view detailed product information with multiple photos. Include a search function and wishlist feature. The design should be modern and elegant with a clean layout that works perfectly on mobile devices.

Generated Features:

• Product grid with lazy loading

• Advanced filtering and search

• Product detail modals

• Mobile-optimized image gallery

• Wishlist functionality

• Category navigation

Customer Service Portal

Prompt:

Build a customer support portal where users can submit tickets, track their status, and access our knowledge base. Include ticket categories (technical, billing, general), priority levels, file uploads, and automated email confirmations. Customers should be able to rate their support experience and see estimated response times.

Generated Features:

• Ticket submission form with validation

• Status tracking dashboard

• Knowledge base with search

• File upload handling

• Rating and feedback system

• Email integration

Event Registration Platform

Prompt:

Create an event registration system for our conference where attendees can register, select sessions, choose meal preferences, and pay registration fees. Include speaker profiles, schedule display, and networking features. The app should handle multiple ticket types and send calendar invites upon registration.

Generated Features:

• Multi-step registration flow

• Session selection interface

• Payment processing integration

• Calendar integration

• Speaker and schedule displays

• Networking features

---

🔧 Customization & Development

Visual Customization

Space Apps support extensive visual customization through natural language:

"Make the header navy blue with white text"
"Use our brand colors: primary #FF6B35, secondary #004E89"
"Add our logo to the top left corner"
"Make the buttons larger and more rounded"
"Use a sidebar layout instead of top navigation"

Advanced Styling with Tailwind CSS

Generated apps use Tailwind CSS for styling:

/* Custom utility classes are automatically generated */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded;
}

.card {
  @apply bg-white shadow-md rounded-lg p-6 hover:shadow-lg transition-shadow;
}

Code Access and Modification

Access your app's complete codebase through the Genesis API:

// App structure
src/
├── App.tsx          // Main application component
├── components/      // Generated React components
├── hooks/           // Custom hooks for data fetching
├── styles/          // Tailwind CSS configurations
├── utils/           // Helper functions
└── types/           // TypeScript type definitions

---

🚀 Deployment & Performance

Automatic Deployment

Space Apps deploy automatically with global infrastructure:

Key Benefits:

• Global Distribution: Fast loading worldwide

• Edge Caching: Static assets served from CDN

• Auto Scaling: Handles traffic spikes automatically

• High Availability: Enterprise-grade reliability

• SSL/TLS: HTTPS enabled by default

Performance Optimization

Space Apps are optimized for performance:

// Automatic optimizations included:
- Code splitting for faster loading
- Lazy loading for images and components  
- Bundle optimization and minification
- Service worker for offline functionality
- Progressive loading strategies

Custom Domains & SSL

Connect your own domain name:

# Via Genesis API
POST /v1/genesis/space-apps/{app_id}/domain
{
  "domain": "app.yourdomain.com",
  "ssl_certificate": "auto"
}

---

🔒 Security & Compliance

Built-in Security Features

Space Apps include enterprise-grade security:

• Content Security Policy (CSP) headers

• Cross-Origin Resource Sharing (CORS) protection

• Input sanitization and validation

• SQL injection prevention

• XSS attack protection

• HTTPS/TLS encryption for all traffic

Data Privacy & GDPR

Compliance features for data protection:

// Generated privacy controls
const PrivacyConsent = () => {
  return (
    <div className="privacy-notice">
      <p>We use cookies to enhance your experience...</p>
      <button onClick={handleAccept}>Accept</button>
      <button onClick={handleDecline}>Decline</button>
    </div>
  );
};

Access Control & Authentication

Integrate with authentication providers:

• OAuth integration (Google, Microsoft, GitHub)

• Role-based access control

• Session management

• API key authentication

• User permission systems

---

📊 Analytics & Monitoring

Built-in Analytics

Track app performance and user behavior:

// Automatic analytics tracking
- Page views and user sessions
- Form submissions and conversions
- Performance metrics (loading times)
- Error tracking and reporting
- User journey mapping

Third-Party Integrations

Connect popular analytics services:

• Google Analytics 4

• Mixpanel for event tracking

• Hotjar for user behavior

• Sentry for error monitoring

• LogRocket for session replay

---

🔄 Maintenance & Updates

Version Control

Space Apps maintain complete version history:

• Git-like commit system for all changes

• Rollback capabilities to previous versions

• Branch management for testing features

• Deployment history tracking

• Change attribution for team collaboration

Conversational Updates

Modify your app through natural language:

"Add a search bar to the product page"
"Make the contact form shorter - remove the company field"
"Change the color scheme to match our new brand colors"
"Add a testimonials section to the homepage"

Automated Maintenance

Built-in maintenance features:

• Dependency updates handled automatically

• Security patches applied immediately

• Performance monitoring with alerts

• Backup and recovery systems

• Health checks and uptime monitoring

---

🎓 Best Practices for Space Apps

Prompt Engineering

Write effective prompts for better results:

Include these elements:

1. Business context: What type of business/industry

2. Target users: Who will use the application

3. Core functionality: What users need to accomplish

4. Visual preferences: Brand colors, style, layout

5. Device requirements: Mobile, tablet, desktop focus

Example of a well-structured prompt:

I run a dental practice and need patients to book appointments online. 
They should see available time slots, select services (cleaning, checkup, 
cosmetic), and provide insurance information. The app should send 
confirmation emails and add appointments to our practice calendar. 
Use a clean, professional design with our brand colors (blue and white) 
and ensure it works perfectly on mobile devices since most patients 
will book from their phones.

Performance Guidelines

Optimize your Space Apps for speed:

• Image optimization: Use WebP format for faster loading

• Lazy loading: Load content as users scroll

• Code splitting: Split large features into separate bundles

• Caching strategies: Leverage browser and CDN caching

• Mobile-first: Design for mobile, enhance for desktop

Accessibility Standards

Ensure your apps are accessible to all users:

• Semantic HTML: Proper heading structure and landmarks

• Keyboard navigation: All interactive elements accessible via keyboard

• Screen reader support: ARIA labels and descriptions

• Color contrast: Meet WCAG 2.1 AA standards

• Focus management: Clear focus indicators throughout

---

🔧 Troubleshooting Common Issues

Performance Problems

Issue: App loading slowly Solutions:

• Check image sizes and formats

• Review third-party scripts and integrations

• Optimize database queries if using external data

• Enable browser caching headers

Issue: Mobile layout issues Solutions:

• Test on actual devices, not just browser dev tools

• Review responsive breakpoints in Tailwind CSS

• Check touch target sizes (minimum 44px)

• Verify form inputs work with mobile keyboards

Deployment Issues

Issue: App not updating after changes Solutions:

• Clear browser cache and hard refresh

• Check deployment status in Taskade Genesis dashboard

• Verify changes were committed to the codebase

• Review deployment logs for errors

Data Integration Problems

Issue: Taskade project data not syncing Solutions:

• Verify project permissions and access

• Check API rate limits and quotas

• Review WebSocket connection status

• Confirm project ID is correct in integration

---

📚 Resources & Support

Documentation Links

• Genesis API Reference - Complete API documentation

• Space Apps API - Specific Space Apps endpoints

• Best Practices - General Genesis optimization tips

• Examples Gallery - Ready-to-use prompts

Development Resources

• Tailwind CSS Documentation - Styling reference

• React Documentation - Component development guide

• TypeScript Handbook - Type system reference

• Taskade API Documentation - API reference

Community & Support

• Community Forum - Connect with other developers

• Help Center - Comprehensive guides and tutorials

• Email Support: [email protected]

• Live Chat: Available in your Taskade dashboard

---

🚀 Ready to Build Your Space App?

Space Apps represent the future of no-code application development - combining the simplicity of natural language with the power of modern web technologies.

Quick Start Checklist

• Define your use case - Customer-facing or internal application?

• Write a detailed prompt - Include business context, users, and features

• Choose your style - Brand colors, layout preferences, mobile focus

• Test thoroughly - Check on multiple devices and screen sizes

• Deploy and iterate - Use conversational updates to perfect your app

Next Steps

1. Create your first Space App in your workspace

2. Explore the API documentation for advanced integrations

3. Join our community to share your creation and get inspiration

4. Check out advanced features as your app grows in complexity

---

🎯 Transform your ideas into production-ready React applications today.

With Space Apps, the only limit is your imagination - from simple landing pages to complex business applications, all accessible through natural language prompts.