mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 15:22:55 +01:00
49 KiB
49 KiB
WIZARD-001: Project Creation Wizard
Overview
Create a guided project setup experience that transforms "blank canvas anxiety" into "ready to build in 60 seconds." The wizard integrates style presets, backend configuration, GitHub connection, deployment setup, and AI scaffolding into a streamlined flow.
Phase: 8 (Styles Overhaul) or standalone
Priority: HIGH (major UX improvement)
Effort: 20-28 hours
Risk: Medium (integrates multiple systems)
Dependencies: STYLE-003 (Presets), GIT-004A (GitHub OAuth), DEPLOY-001, AI-004
Background
Current State
Creating a new Noodl project:
- Click "New Project"
- Enter name
- Get blank canvas
- Manually configure everything: styling, backend, git, deployment...
Target State
A Replit/Vercel-style wizard:
- Choose how to start (Quick/Guided/AI)
- Pick style preset (or describe your app)
- Configure backend
- Connect GitHub
- Set up deployment
- (Optional) AI generates scaffold
- Start building with everything ready
The Three Entry Modes
┌─────────────────────────────────────────────────────────────────┐
│ CREATE NEW PROJECT │
├─────────────────────────────────────────────────────────────────┤
│ │
│ How would you like to start? │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ⚡ QUICK START │ │
│ │ Blank project with Modern preset. │ │
│ │ Configure everything later. │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 🛠️ GUIDED SETUP │ │
│ │ Walk through style, backend, GitHub, and deployment │ │
│ │ options step by step. │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ✨ AI PROJECT BUILDER │ │
│ │ Describe what you want to build. AI sets up │ │
│ │ everything and generates starter components. │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Guided Setup Flow
Step 1: Project Basics
┌─────────────────────────────────────────────────────────────────┐
│ NEW PROJECT Step 1/6 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ PROJECT NAME │
│ [My Awesome App ] │
│ │
│ DESCRIPTION (optional) │
│ [A task management tool for small teams ] │
│ │
│ 💡 Tip: A good description helps AI generate better │
│ components if you enable AI scaffolding later. │
│ │
│ │
│ │
│ [Next: Style Preset →] │
└─────────────────────────────────────────────────────────────────┘
Step 2: Style Preset
┌─────────────────────────────────────────────────────────────────┐
│ STYLE PRESET Step 2/6 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Choose a visual style for your project: │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Modern │ │ Minimal │ │ Playful │ │ Corp │ │ Soft │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │
│ │ │ btn │ │ │ │ btn │ │ │ │ btn │ │ │ │ btn │ │ │ │ btn │ │ │
│ │ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │
│ │ ─────── │ │ ─────── │ │ ─────── │ │ ─────── │ │ ─────── │ │
│ │ ─────── │ │ ─────── │ │ ─────── │ │ ─────── │ │ ─────── │ │
│ └────●────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ Selected │
│ │
│ "Clean and professional with subtle depth" │
│ │
│ [x] I'll customize colors and fonts later │
│ │
│ [← Back] [Next: Backend →] │
└─────────────────────────────────────────────────────────────────┘
Step 3: Backend & Data
┌─────────────────────────────────────────────────────────────────┐
│ BACKEND & DATA Step 3/6 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Does your app need to store data? │
│ │
│ ○ NO BACKEND │
│ Frontend only - static content, no user data │
│ │
│ ● LOCAL BACKEND (Recommended for starting) │
│ SQLite database that works offline. │
│ Zero configuration. Sync to cloud later. │
│ ✓ Free ✓ No account needed ✓ Works offline │
│ │
│ ○ CLOUD BACKEND │
│ Connect to an existing backend service: │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [Supabase ▼] │ │
│ │ • Supabase (Postgres + Auth + Realtime) │ │
│ │ • Pocketbase (Self-hosted, simple) │ │
│ │ • Firebase (Google ecosystem) │ │
│ │ • Directus (Headless CMS) │ │
│ │ • Custom REST API │ │
│ │ • Custom GraphQL API │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ○ DOCKER │
│ Spin up Postgres/MySQL in a local container. │
│ For developers who want full database control. │
│ │
│ [← Back] [Next: Authentication →] │
└─────────────────────────────────────────────────────────────────┘
Step 4: Authentication (Conditional)
Only shown if backend selected:
┌─────────────────────────────────────────────────────────────────┐
│ AUTHENTICATION Step 4/6 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Does your app need user login? │
│ │
│ ○ NO AUTHENTICATION │
│ Public app - anyone can access everything │
│ │
│ ● EMAIL + PASSWORD │
│ Traditional signup/login with email verification │
│ │
│ ○ MAGIC LINK │
│ Passwordless - users click a link sent to email │
│ │
│ ○ SOCIAL LOGIN │
│ Sign in with Google, GitHub, etc. │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [x] Google [x] GitHub [ ] Apple [ ] Microsoft │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ○ I'LL CONFIGURE LATER │
│ Skip for now, add authentication later │
│ │
│ [x] Generate login/signup UI components │
│ │
│ [← Back] [Next: GitHub →] │
└─────────────────────────────────────────────────────────────────┘
Step 5: Version Control
┌─────────────────────────────────────────────────────────────────┐
│ VERSION CONTROL Step 5/6 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Connect your project to GitHub for backup and collaboration. │
│ │
│ ○ SKIP FOR NOW │
│ I'll set up Git later │
│ │
│ ● CONNECT TO GITHUB │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [🔗 Sign in with GitHub] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ─────────── After signing in ─────────── │
│ │
│ Repository: │
│ ● Create new repository │
│ Name: [my-awesome-app ] │
│ Visibility: [Private ▼] │
│ │
│ ○ Use existing repository │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ my-org/existing-repo │ │
│ │ my-org/another-project │ │
│ │ personal/side-project │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ○ Paste repository URL │
│ [https://github.com/... ] │
│ │
│ [← Back] [Next: Deployment →] │
└─────────────────────────────────────────────────────────────────┘
Step 6: Deployment (Conditional)
Only shown if GitHub connected:
┌─────────────────────────────────────────────────────────────────┐
│ DEPLOYMENT Step 6/6 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Set up automatic deployment when you push to GitHub. │
│ │
│ ○ SKIP FOR NOW │
│ I'll deploy manually or set this up later │
│ │
│ ● AUTO-DEPLOY ON PUSH │
│ │
│ Platform: │
│ ● Vercel (Recommended for React) │
│ [🔗 Connect Vercel Account] │
│ │
│ ○ Netlify │
│ [🔗 Connect Netlify Account] │
│ │
│ ○ GitHub Pages (Static sites only) │
│ No account needed - uses GitHub Actions │
│ │
│ ○ Cloudflare Pages │
│ [🔗 Connect Cloudflare Account] │
│ │
│ Options: │
│ [x] Create preview deployments for pull requests │
│ [x] Show deployment status in Noodl dashboard │
│ │
│ [← Back] [Next: Review →] │
└─────────────────────────────────────────────────────────────────┘
Step 7: AI Setup (Optional)
┌─────────────────────────────────────────────────────────────────┐
│ AI ASSISTANT Optional │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Let AI help you get started faster. │
│ │
│ ○ SKIP AI FEATURES │
│ I'll build everything manually │
│ │
│ ● ENABLE AI ASSISTANT │
│ │
│ API Key: │
│ [sk-ant-•••••••••••••••••••••••••••••] [Verify ✓] │
│ Don't have one? [Get API key from Anthropic →] │
│ │
│ What should AI generate? │
│ │
│ [x] Starter components based on project description │
│ AI will create basic UI structure and navigation │
│ │
│ [x] Database schema (if backend selected) │
│ AI will suggest tables and fields based on your │
│ project description │
│ │
│ [ ] Sample data │
│ Populate database with realistic test data │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 💰 Estimated cost: ~$0.05 - $0.15 (one-time) │ │
│ │ Based on project complexity │ │
│ │ [?] How is this calculated? │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ [← Back] [Next: Review →] │
└─────────────────────────────────────────────────────────────────┘
Final Step: Review & Create
┌─────────────────────────────────────────────────────────────────┐
│ REVIEW & CREATE │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Project: "My Awesome App" │
│ A task management tool for small teams │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ CONFIGURATION SUMMARY │ │
│ ├─────────────────────────────────────────────────────────┤ │
│ │ Style: Modern preset (blue theme) [Edit] │ │
│ │ Backend: Local SQLite [Edit] │ │
│ │ Auth: Email + Password [Edit] │ │
│ │ GitHub: my-org/my-awesome-app (new) [Edit] │ │
│ │ Deployment: Vercel (auto-deploy) [Edit] │ │
│ │ AI: Generate components + schema [Edit] │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ COST ESTIMATE │ │
│ ├─────────────────────────────────────────────────────────┤ │
│ │ Monthly: │ │
│ │ • Style system ─────────────────────── Free │ │
│ │ • Local SQLite ─────────────────────── Free │ │
│ │ • GitHub (private repo) ────────────── Free │ │
│ │ • Vercel (hobby tier) ──────────────── Free │ │
│ │ ───────── │ │
│ │ Total: $0/month │ │
│ │ │ │
│ │ One-time: │ │
│ │ • AI scaffold generation ───────────── ~$0.08 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ [ ] Remember these settings for future projects │
│ │
│ [← Back] [Create Project →] │
└─────────────────────────────────────────────────────────────────┘
Creation Progress
┌─────────────────────────────────────────────────────────────────┐
│ CREATING "MY AWESOME APP" │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ✓ Creating project structure │
│ ✓ Applying Modern style preset │
│ ✓ Setting up SQLite database │
│ ✓ Configuring authentication │
│ ● Generating components with AI... │
│ ├─ Analyzing project description │
│ ├─ Creating navigation structure │
│ └─ Building task management components │
│ ○ Generating database schema │
│ ○ Creating GitHub repository │
│ ○ Configuring Vercel deployment │
│ ○ Initial commit and push │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ AI is generating: TaskList component │ │
│ │ ████████████████████░░░░░░░░░░░░░░░░░░░░ 45% │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ [View Details] [Cancel] │
└─────────────────────────────────────────────────────────────────┘
AI Project Builder Mode
When user selects "AI Project Builder":
┌─────────────────────────────────────────────────────────────────┐
│ AI PROJECT BUILDER │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Describe what you want to build: │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ A project management app where teams can create │ │
│ │ projects, add tasks with due dates and priorities, │ │
│ │ assign tasks to team members, and track progress │ │
│ │ with a kanban board view. Users should be able to │ │
│ │ comment on tasks and get notifications. │ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Examples: │
│ • "A recipe app where users can save and organize recipes" │
│ • "An invoice generator for freelancers" │
│ • "A booking system for a hair salon" │
│ │
│ API Key: [sk-ant-•••••••••••••] [Verify ✓] │
│ │
│ [Analyze & Suggest →] │
└─────────────────────────────────────────────────────────────────┘
After analysis:
┌─────────────────────────────────────────────────────────────────┐
│ AI SUGGESTIONS │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Based on your description, here's what I recommend: │
│ │
│ PROJECT TYPE: Web Application (Dashboard) │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ STYLE │ │
│ │ Recommended: Modern │ │
│ │ A clean, professional look suits project management │ │
│ │ [Change ▼] │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ BACKEND │ │
│ │ Recommended: Local SQLite → Supabase │ │
│ │ Start local, sync to cloud when ready for team use │ │
│ │ [Change ▼] │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ AUTHENTICATION │ │
│ │ Recommended: Email + Password │ │
│ │ Team members need accounts to be assigned tasks │ │
│ │ [Change ▼] │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ SUGGESTED DATABASE SCHEMA │ │
│ │ │ │
│ │ 📁 users (id, email, name, avatar, role) │ │
│ │ 📁 projects (id, name, description, owner_id) │ │
│ │ 📁 tasks (id, title, status, priority, assignee_id...) │ │
│ │ 📁 comments (id, task_id, author_id, content) │ │
│ │ 📁 notifications (id, user_id, type, read, data) │ │
│ │ │ │
│ │ [View Full Schema] [Edit Schema] │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ COMPONENTS TO GENERATE │ │
│ │ │ │
│ │ [x] Dashboard layout with sidebar navigation │ │
│ │ [x] Project list and project detail views │ │
│ │ [x] Task list with filtering and sorting │ │
│ │ [x] Kanban board view │ │
│ │ [x] Task detail with comments │ │
│ │ [x] User profile and settings │ │
│ │ [x] Login/Signup pages │ │
│ │ [ ] Notification center │ │
│ │ [ ] Team management │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Estimated AI cost: ~$0.12 │
│ │
│ [← Back] [Customize More] [Create Project →] │
└─────────────────────────────────────────────────────────────────┘
Implementation
Phase 1: Wizard Framework (6-8 hrs)
Files to create:
packages/noodl-editor/src/editor/src/views/
├── ProjectWizard/
│ ├── ProjectWizard.tsx # Main wizard container
│ ├── ProjectWizard.module.scss
│ ├── WizardContext.tsx # Shared state
│ ├── WizardNavigation.tsx # Step indicators
│ ├── steps/
│ │ ├── EntryModeStep.tsx # Quick/Guided/AI selection
│ │ ├── ProjectBasicsStep.tsx # Name, description
│ │ ├── StylePresetStep.tsx # Preset selection
│ │ ├── BackendStep.tsx # Backend configuration
│ │ ├── AuthenticationStep.tsx # Auth options
│ │ ├── GitHubStep.tsx # Version control
│ │ ├── DeploymentStep.tsx # Deployment setup
│ │ ├── AISetupStep.tsx # AI configuration
│ │ ├── ReviewStep.tsx # Summary & create
│ │ └── CreationProgressStep.tsx # Progress display
│ └── index.ts
Wizard State:
interface WizardState {
// Basics
projectName: string;
description: string;
// Style
stylePreset: string;
// Backend
backendType: 'none' | 'local' | 'cloud' | 'docker';
cloudProvider?: 'supabase' | 'pocketbase' | 'firebase' | 'directus' | 'custom';
cloudConfig?: Record<string, string>;
// Auth
authType: 'none' | 'email' | 'magic-link' | 'social' | 'later';
socialProviders?: string[];
generateAuthUI: boolean;
// GitHub
gitHubEnabled: boolean;
gitHubRepo?: {
type: 'new' | 'existing' | 'url';
name?: string;
visibility?: 'public' | 'private';
url?: string;
};
// Deployment
deploymentEnabled: boolean;
deploymentPlatform?: 'vercel' | 'netlify' | 'github-pages' | 'cloudflare';
previewDeployments: boolean;
// AI
aiEnabled: boolean;
aiApiKey?: string;
aiGenerateComponents: boolean;
aiGenerateSchema: boolean;
aiGenerateSampleData: boolean;
}
interface WizardContextValue {
state: WizardState;
updateState: (partial: Partial<WizardState>) => void;
currentStep: number;
goToStep: (step: number) => void;
nextStep: () => void;
prevStep: () => void;
canProceed: boolean;
createProject: () => Promise<void>;
}
Phase 2: Integration Hooks (6-8 hrs)
Files to create:
packages/noodl-editor/src/editor/src/views/ProjectWizard/
├── hooks/
│ ├── useStylePresets.ts # Preset loading and preview
│ ├── useGitHubSetup.ts # GitHub OAuth and repo management
│ ├── useDeploymentSetup.ts # Vercel/Netlify integration
│ ├── useAIScaffold.ts # AI generation orchestration
│ └── useProjectCreation.ts # Final project creation
Integration Points:
// useGitHubSetup.ts
function useGitHubSetup() {
const [isAuthenticated, setAuthenticated] = useState(false);
const [repos, setRepos] = useState<Repository[]>([]);
const authenticate = async () => {
// Uses GIT-004A OAuth flow
const token = await GitHubOAuth.authenticate();
setAuthenticated(true);
const userRepos = await GitHubClient.listRepos(token);
setRepos(userRepos);
};
const createRepo = async (name: string, visibility: 'public' | 'private') => {
// Uses GIT-004A repo creation
return await GitHubClient.createRepo({ name, private: visibility === 'private' });
};
return { isAuthenticated, repos, authenticate, createRepo };
}
Phase 3: AI Builder Mode (4-6 hrs)
Files to create:
packages/noodl-editor/src/editor/src/views/ProjectWizard/
├── ai/
│ ├── AIProjectAnalyzer.ts # Analyze description
│ ├── AISchemaGenerator.ts # Generate database schema
│ ├── AIComponentGenerator.ts # Generate components
│ ├── AIPrompts.ts # Prompt templates
│ └── types.ts
AI Analysis Flow:
interface AIProjectAnalysis {
projectType: 'webapp' | 'ecommerce' | 'content' | 'custom';
suggestedPreset: string;
suggestedBackend: BackendConfig;
suggestedAuth: AuthConfig;
schema: DatabaseSchema;
components: ComponentSuggestion[];
estimatedCost: number;
}
async function analyzeProject(description: string): Promise<AIProjectAnalysis> {
const prompt = buildAnalysisPrompt(description);
const response = await anthropic.complete(prompt);
return parseAnalysisResponse(response);
}
Phase 4: Creation Orchestration (4-6 hrs)
Files to create:
packages/noodl-editor/src/editor/src/views/ProjectWizard/
├── creation/
│ ├── ProjectCreator.ts # Main orchestrator
│ ├── steps/
│ │ ├── CreateProjectStructure.ts
│ │ ├── ApplyStylePreset.ts
│ │ ├── SetupBackend.ts
│ │ ├── SetupAuthentication.ts
│ │ ├── GenerateAIComponents.ts
│ │ ├── GenerateAISchema.ts
│ │ ├── CreateGitHubRepo.ts
│ │ ├── ConfigureDeployment.ts
│ │ └── InitialCommit.ts
│ └── types.ts
Creation Pipeline:
class ProjectCreator {
private steps: CreationStep[] = [];
private progress: CreationProgress;
constructor(config: WizardState) {
// Build step list based on config
this.steps.push(new CreateProjectStructure(config));
this.steps.push(new ApplyStylePreset(config.stylePreset));
if (config.backendType !== 'none') {
this.steps.push(new SetupBackend(config));
}
if (config.authType !== 'none') {
this.steps.push(new SetupAuthentication(config));
}
if (config.aiEnabled && config.aiGenerateSchema) {
this.steps.push(new GenerateAISchema(config));
}
if (config.aiEnabled && config.aiGenerateComponents) {
this.steps.push(new GenerateAIComponents(config));
}
if (config.gitHubEnabled) {
this.steps.push(new CreateGitHubRepo(config.gitHubRepo!));
if (config.deploymentEnabled) {
this.steps.push(new ConfigureDeployment(config));
}
this.steps.push(new InitialCommit());
}
}
async execute(onProgress: (progress: CreationProgress) => void): Promise<Project> {
for (const step of this.steps) {
this.progress = {
currentStep: step.name,
completed: this.steps.indexOf(step),
total: this.steps.length
};
onProgress(this.progress);
await step.execute();
}
return this.project;
}
}
Dependencies
Required Before WIZARD-001:
| Dependency | Task | Status | Notes |
|---|---|---|---|
| Style Presets | STYLE-003 | Required | Preset selector integration |
| GitHub OAuth | GIT-004A | Required | GitHub connection step |
| Deployment | DEPLOY-001 | Optional | Can be added later |
| AI Scaffold | AI-004 | Optional | Can be added later |
| Local Backend | BACKEND-001 | Optional | Can default to "none" |
Can Work Incrementally:
The wizard can ship with partial functionality:
V1 (Minimum):
- Entry mode selection
- Project basics
- Style preset
- Review & create
V2 (Add Backend):
- Backend step
- Authentication step
V3 (Add Git):
- GitHub step
- Deployment step
V4 (Add AI):
- AI builder mode
- AI setup step
Testing Strategy
Unit Tests
- Wizard state management
- Step validation logic
- Creation pipeline ordering
- AI prompt generation
Integration Tests
- Full wizard flow completion
- GitHub OAuth integration
- Deployment configuration
- Project creation with all options
Manual Testing Checklist
- Quick Start creates project with Modern preset
- Guided flow navigates all steps correctly
- Style presets show visual previews
- Backend options configure correctly
- GitHub OAuth connects successfully
- Repository creation works
- Deployment configuration applies
- AI analysis generates reasonable suggestions
- AI schema generation works
- Progress display updates correctly
- Created project has all configured features
Success Criteria
- Three entry modes work (Quick/Guided/AI)
- All guided steps functional
- Style preset applies correctly
- Backend configuration works
- GitHub integration functional
- Deployment setup works
- AI builder generates reasonable scaffolds
- Progress display accurate
- Created projects fully configured
- User can skip any optional step
Future Enhancements
Templates Library
Pre-built project templates:
┌─────────────────────────────────────────────────────────────────┐
│ START FROM TEMPLATE │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ Dashboard │ │ E-commerce│ │ Blog │ │ Landing │ │
│ │ │ │ │ │ │ │ Page │ │
│ │ 📊 │ │ 🛒 │ │ 📝 │ │ 🚀 │ │
│ └───────────┘ └───────────┘ └───────────┘ └───────────┘ │
│ │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ Booking │ │ Social │ │ CRM │ │ Custom │ │
│ │ System │ │ App │ │ │ │ │ │
│ │ 📅 │ │ 👥 │ │ 📇 │ │ ⚡ │ │
│ └───────────┘ └───────────┘ └───────────┘ └───────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Settings Presets
Remember wizard settings:
interface WizardPreset {
name: string;
settings: Partial<WizardState>;
}
// "My Standard Setup"
const preset: WizardPreset = {
name: 'My Standard Setup',
settings: {
stylePreset: 'modern',
backendType: 'local',
authType: 'email',
gitHubEnabled: true,
deploymentPlatform: 'vercel'
}
};
Team Templates
Shared templates within organizations:
- Admin creates standard project setup
- Team members start new projects from org template
- Ensures consistency across team projects
Last Updated: January 2026