A structured, wizard-based interface that allows you to create a new Baseplate application. The feature solves a critical bottleneck: the inefficiency and inconsistency involved in manually bootstrapping a new SaaS app. Today, launching a new app requires cloning the repo, setting up configs, environments, and infrastructure — a process that is error-prone, undocumented, and requires senior developer intervention. This workflow provides a repeatable and user-friendly method for doing this in minutes.
The MVP includes:
- A multi-step wizard to define the app’s identity (name, description, logo, primary domain)
- A config step to gather the key / value pairs for configuring the system
- Notably API keys for the standard systems if this is not managed in a secret store
- A generate step that creates a downloadable ZIP of the customized app source code
- A results page that shows Firebase config keys, with copy-to-clipboard functionality
The workflow is designed for users with platform administration privileges — System Administrators or Customer Success team members – bootstrapping a new app. Practically the UI will be used infrequently so having it “basic” and bare bones – a UI only a developer could love.
In the future, this workflow will get extending to fully automate environment buildout:
- GitHub repo creation and push
- Supabase project provisioning
- CI/CD environment creation
- Infrastructure as Code deployment
While these are out of scope for the MVP, the architecture will be built in a modular way to support these additions.
Interaction Model
A user navigates to “New App Creation” from the admin dashboard. They’re guided through a 4-step process:
- App Details – enter metadata such as name, description, default domain, and customer info.
- Branding & Options – upload a logo, pick theme color, set app title/subtitle.
- Config Variables – list Firebase Remote Config keys and values.
- Generate App – click a button to generate a zip file with configured source code + display the Remote Config table.
This reduces time-to-app-launch from weeks to hours, while enforcing consistent patterns across all new SaaS products built on the Stock App.
Developer Inspiration
Inspiration for this flow can be drawn from:
- Divjoy — app generation wizard with React and Firebase boilerplate
- Create T3 App — CLI flow with steps to configure an app scaffold
- Vercel project creation flow — simple multi-step wizard with auto-generated config values
- AWS Amplify Admin UI — zip download for app bootstrapping with customizable settings
This feature combines the speed and simplicity of tools like Divjoy with the structure and enterprise guardrails needed for high-trust SaaS development.
🔐 Role Access
System Administrator
System Administrators need full access to the New App Creation Workflow. They are the primary audience for the feature in MVP and will be responsible for setting up new applications across tenants. They manage the Firebase configuration and ensure apps are initialized with correct compliance and branding info.
User Stories
- As a System Administrator, I want to create a new app from the Stock App framework so I can onboard a new business unit.
- As a System Administrator, I want to enter the application’s name, domain, and description to define the identity of the app.
- As a System Administrator, I want to upload a logo and pick theme colors so the new app reflects the customer’s brand.
- As a System Administrator, I want to enter in API secret keys for the standard services and configuration options provided by Firebase Remote Config keys so I can ensure the app is pre-configured on launch.
- As a System Administrator, I want to generate a downloadable ZIP of the new app so that the dev team can start working immediately.
- As a System Administrator, I want to view and copy the Firebase keys after generation so I can quickly configure them in Firebase Console.
- As a System Administrator, I want to re-generate an app if I made a mistake during config entry.
- As a System Administrator, I want to see audit logs of who created which app and when.
Customer Success
Customer Success users may assist in setting up new apps, especially when onboarding new enterprise customers. They may run the workflow on behalf of a customer and help with configuration values but may not generate code directly in all environments.
User Stories
- As a Customer Success Manager, I want to launch the New App Creation Wizard for a new enterprise client.
- As a Customer Success Manager, I want to fill out app details and branding on behalf of a customer to speed up onboarding.
- As a Customer Success Manager, I want to preview the Remote Config table before generating code so I can validate with the customer.
- As a Customer Success Manager, I want to send the generated ZIP to a developer on the client’s side for implementation.
- As a Customer Success Manager, I want to log support tickets if the generated app fails to build.
- As a Customer Success Manager, I want to export the app details (including Firebase keys) as a PDF or doc to share with external teams.
- As a Customer Success Manager, I want to impersonate the client’s administrator to confirm configuration settings.
- As a Customer Success Manager, I want to log notes about the app setup to track customer-specific modifications.
Customer Administrator
Customer Administrators will not use the workflow directly in MVP. In future iterations of the 1 to 100 Site and Application , however, we may expose app generation as a feature to this user group.
Manager / Standard User
These roles do not interact with the New App Creation Workflow and should not have access to the feature in any way. If they attempt to access it, they should receive a “Permissions Error” screen.
📄 Pages and Screens
The MVP of the New App Creation Workflow will include the following screens:
- New App Wizard Landing Page
- Step 1: App Identity
- Step 2: Branding & Options
- Step 3: Firebase Config
- Step 4: App Generation & Download
- App Summary / Success Page
🧭 New App Wizard Landing Page
This is the entry screen for the New App Creation Workflow. It provides a short overview of the process, describes what will be created, and lets users begin the wizard. It also shows a list of previously created apps for transparency and auditability. Only System Administrators and Customer Success roles can access this page.
Screen Content
- Static Content
- Welcome header and brief explanation
- Link to documentation
- Fields and Controls
| Name | Query and Setup | Constraints | Error Checking | Notes |
|---|---|---|---|---|
| Start New App (Button) | None | Visible to permitted roles only | None | Navigates to Step 1 |
| Created Apps Table | Query previous app generation logs from DB | N/A | N/A | Shows app name, created by, created at |
🧾 Step 1: App Identity
Captures core metadata for the app being created. These details are used in directory structure, branding, and Firebase config variables.
Screen Content
| Name | Query and Setup | Constraints | Error Checking | Notes |
|---|---|---|---|---|
| App Name | None | Required, max 64 characters | Required, show “App Name is required” | Used in folder structure, branding |
| App Description | None | Optional, max 256 characters | None | Appears in summary view |
| Domain | Auto-suggest from previous apps | Required, must be valid domain format | Show “Invalid domain” | Used in Firebase config |
| Internal Code Name | Auto-generated based on App Name | Required, slug-format only | “Code name must be URL-friendly” | Used in repo names, identifiers |
| Associated Customer | Drop-down of all Customers | Optional | None | Used for audit linkage. Not needed for MVP but would be implemented if / as we launch on 1 to 100.com |
🎨 Step 2: Branding & Options
Allows for setting visual and UX options that will personalize the app out of the gate. These values will be injected into theme files and config variables.
Screen Content
| Name | Query and Setup | Constraints | Error Checking | Notes |
|---|---|---|---|---|
| App Logo Upload | None | JPEG/PNG only, max 2MB | File type and size check | Stored in app/assets dir |
| Primary Theme Color | Predefined palette or hex input | Required, must be valid hex color | Validate with regex | Used in Material UI config |
| App Title | Defaults to App Name | Optional | None | Appears in browser title |
| Subtitle / Tagline | None | Optional | None | Used on splash and auth screens |
| Enable Dark Mode | Toggle | Optional | None | Boolean injected to theme config, defaults to true |
🔧 Step 3: Firebase Config Variables
Description
Captures environment variable values that will be injected into firebase.remoteConfig setup and into .env files. A table lists expected variables based on a predefined schema.
Screen Content
| Name | Query and Setup | Constraints | Error Checking | Notes |
|---|---|---|---|---|
| Config Variable Table | Preloaded list from schema (editable) | Each row requires name and value | Inline validation, missing name/value | Each app can override defaults |
| Add New Variable Button | Adds row to table | Optional | None | Custom configs allowed |
| Reset to Defaults | Reverts config to stock template | Optional | Confirm dialog | Useful if values get messy |
📦 Step 4: App Generation & Download
Description
The user clicks a button to generate the app. The backend runs a codegen script that creates a ZIP file with all configured elements (branding, config, boilerplate). Once done, the file is available for download and a success message is shown.
Screen Content
| Name | Query and Setup | Constraints | Error Checking | Notes |
|---|---|---|---|---|
| Generate App Button | Triggers backend generation script | Enabled only if all prior steps valid | Handle backend failure gracefully | Disable while generating |
| Spinner/Progress Display | Show while generating app | N/A | N/A | Shows build logs optionally |
| Download ZIP Link | Shows after generation completes | Visible only if ZIP exists | “Generation failed” fallback message | Direct link to ZIP blob |
| View Firebase Keys | Opens table with all keys & values | Optional | None | Can copy to clipboard |
✅ App Summary / Success Page
Description
Summarizes all inputted information and allows user to copy relevant data. Also provides a reminder of next steps (setting up GitHub, Firebase project, etc.).
Screen Content
| Name | Query and Setup | Constraints | Error Checking | Notes |
|---|---|---|---|---|
| App Summary Table | Load from workflow session | N/A | None | View-only |
| Firebase Config Display | Pull from previous screen | N/A | None | Copy/paste interface |
| Action Checklist | Static content | N/A | None | “Now do this next…” links |
🧱 Data Model
Below is the MVP data model to support the New App Creation Workflow. This is PostgreSQL-based and follows existing design patterns from the Stock SaaS Application.
| Name | Description | Constraints | Notes |
|---|---|---|---|
app_id | UUID for the generated app | Required, PK | |
app_name | Human-friendly name | Required, 64 char max | |
code_name | Internal name for folders/repos | Required, slug, unique | |
description | App description | Optional, 256 char max | |
domain | Main domain or subdomain | Required, must be a domain | |
logo_url | URL/path to uploaded logo | Optional | |
theme_color | Hex color string | Required, must be valid hex | |
title | App title override | Optional | |
subtitle | App subtitle | Optional | |
dark_mode_enabled | Boolean toggle | Optional, defaults to false | |
created_by_user_id | Foreign key to user table | Required | |
created_at | Timestamp of app creation | Default now() | |
firebase_config_json | JSON of key-value pairs | Required | Stored as raw JSON blob |
zip_blob_path | Path to generated ZIP (S3/Firebase link) | Optional, added after generation |