Overview
This video provides a comprehensive walkthrough of Rocket, a platform that enables users to build fully functional apps—including design, backend logic, integrations, and AI features—using natural language prompts, templates, or Figma imports. The guide covers web and mobile app creation, customization, integration setup, and publishing.
Getting Started with Rocket
- Users can start building apps using natural language prompts, selecting use case buttons (website, mobile, web app), attaching screenshots, or importing Figma files.
- Templates are available for common use cases, offering time and token savings.
- Public or private project visibility can be toggled before building.
App Building Process
- Rocket analyzes the user’s prompt and proposes necessary app pages for selection.
- Selected pages affect token consumption; fewer pages use fewer tokens.
- Customization of framework is possible; Rocket optimizes to avoid wasteful builds.
- Real-time progress is shown during the app generation process.
Tokens & Plans
- Free plan includes 2 million tokens (1 million per week); additional tokens can be purchased or gained via upgrading.
- Templates and direct editing save tokens compared to prompting for each change.
Features and Customization
- Apps are generated with professional UI/UX using React, JavaScript, and Tailwind for web, and Flutter for mobile.
- Visual editor allows fast, precise live adjustments to UI elements without using tokens.
- Code and design can be accessed, modified, exported, or pushed to GitHub.
- Code diff and rollback functionality help manage and revert changes.
Integrations
- Streamlined process to connect with Superbase, Stripe, Google Analytics, AdSense, Perplexity, Anthropic, Gemini, and OpenAI.
- Integration with Superbase for authentication and data storage takes a few prompts and clicks.
- API key management is required for AI integrations.
Troubleshooting & Best Practices
- Fix issues by prompting Rocket with specific instructions, one issue at a time for best results.
- Overloading prompts with multiple requests may cause errors or confusion.
Publishing Apps
- Web apps can be published to Netlify directly from Rocket; deployment management is handled via Netlify.
- Mobile apps are published as PWAs to Netlify, not directly to app stores; further steps are required for Google Play or App Store.
Figma to Code
- Users can import entire Figma files or specific screens to generate functional apps.
- State management options are offered (bloc, GetX, provider, riverpod, or none).
- Subscription level determines number of screens importable at once; similar screens can be duplicated for efficiency.
- Future updates will allow syncing imported screens with updated Figma designs.
Example Use Cases Demonstrated
- Analytics hubs, sales compensation dashboards, client portals, and portfolio websites.
- Apps are responsive by default and adaptable for web and mobile formats.
Decisions
- Proceed with default framework for fitness goal tracking app
- Integrate Superbase for backend authentication and data storage
- Integrate OpenAI for AI coach functionality
- Publish web and mobile apps to Netlify
Action Items
- TBD – User: Refine and clean up remaining UI color issues via prompt or editor.
- TBD – User: Add settings page and Stripe integration for subscription management.
- TBD – User: Follow Rocket's documentation for publishing mobile apps to app stores, if desired.