͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Forwarded this email? Subscribe here for more

How to prototype apps and side projects using AI tools

A detailed tutorial to building your first ai-powered project

Aug 14

READ IN APP

✨ Hey there this is a free edition of next play’s newsletter, where we share under-the-radar opportunities to help you figure out what’s next in your journey. For more: check out the Friends of Next Play Community Slack and Product Discount Bundle.

There is plenty of buzz these days highlighting the power of artificial intelligence—but how do you actually use AI in a productive way?

That’s the type of question we hear often from people in the Next Play community. They are exploring building a new project or joining a startup and are wondering if and how it makes sense to leverage AI.

Maybe they want to leverage some AI tools at work. Maybe they want to build something that helps them find and get a a new job. There are many possibilities.

But one suggestion we have is that you should start playing around with the tools yourself before you get carried away with the hype. It’s one thing to read lots of essays, and yes the headlines are exciting, but, until you actually get into the weeds and make things yourself, it is hard to know whether or not this technology will actually be useful to you and your use case.

The good news is that it’s getting easier and easier to get started—and so we thought it’d be productive to chat with Harold Dijkstra and Ciara Wearen—the instructors behind the “Prototyping with AI Bootcamp.”

They’ve helped 1200+ tech professionals ship their first ai-powered app (using tools like Replit, Bolt, Lovable, Supabase, v0, and others). We asked them to give us an example tutorial—some resource a curious person could lock in on for a few hours and walk away with a working prototype (and also leave with lots of inspiration for future projects).

And because you’re reading Next Play, you can get $100 off their popular bootcamp using the code NEXTPLAY. Also check out their upcoming free lesson on Maven to get started with vibe coding. Thanks to them and Maven for supporting Next Play.

How to build a Full Stack AI-powered App:

We put together a complete tutorial that leverages Bolt.

Introduction

This tutorial will guide you through building a complete AI-powered meeting summarizer application using Bolt.new, a web-based development platform. By the end of this tutorial, you'll have created a fully functional app that includes user authentication, AI meeting transcription, and summarization and premium subscription features powered by Stripe.

What you'll build:

User login system with secure authentication
Meeting transcript storage and management
AI-powered meeting summarization using OpenAI's API
Premium subscription system with Stripe integration
Complete backend infrastructure using Supabase

You can check out a demo here. (Note, styling considerations were not prioritized in this demo - instead it’s all about getting the basic functionality working)

Prerequisites:

Basic understanding of web applications
An OpenAI account with API access ($5 minimum balance required)
A Stripe developer account
A Supabase account (free tier available)

Video walkthrough

Phase 1: Creating the Initial Project Prompt

Step 1: Generate Your Project Prompt

Start by using ChatGPT or Claude to create an optimized prompt for Bolt.new. You can use voice input to describe your idea naturally.

Example input to your AI assistant:

"I want to build a meeting summarizer app that transcribes audio recordings and creates AI summaries. Users should be able to log in, save their meeting transcripts, and access premium features through a subscription."

Important addition: Add this exact phrase to the end of any prompt your AI assistant creates: "Wait for explicit approval after each phase before proceeding to write any code."

This prevents Bolt from rushing ahead and allows you to review each development phase.

Step 2: Input Your Prompt into Bolt.new

1. Navigate to Bolt.new

2. Paste your enhanced prompt into the main input field

3. Optional: Use the "Enhance prompt" feature to get an optimized version

4. Pro tip: Run both the original and enhanced prompts side-by-side in separate tabs to compare results

Phase 2: Project Planning and Approval

Step 3: Review Bolt's Development Plan

Bolt will analyze your prompt and present a detailed development plan breaking down the project into phases. This typically includes:

Frontend user interface design
Authentication system setup
Database schema creation
API integration planning
Payment system implementation

Decision point: You have two options here:

Quick approval: Simply respond "yes, go for it" if the plan looks good
Detailed review: Read through each phase and suggest modifications before approval

Example modifications you might request:

"Add a dashboard to view all previous meeting summaries"
"Include the ability to edit summaries after they're generated"
"Add export functionality for meeting notes"

Phase 3: Database and Backend Setup

Step 4: Connect Supabase Integration

Supabase serves as your Backend-as-a-Service (BaaS) solution, handling multiple critical functions:

Core Supabase functions:

Database storage: Meeting transcripts and user data
Security: Encrypted storage for API keys (OpenAI, Stripe)
Authentication: Secure user login and registration
Edge Functions: Server-side logic for payment processing

Connection process:

1. When prompted by Bolt, click "Connect Supabase"

2. First time users: Follow the authorization flow to grant access

3. Returning users: Click "Create a new project"

4. Project setup:

Enter a descriptive project name (e.g., "meeting-summarizer-app")

Create a secure password (save this in your password manager)

Select the region closest to your location for optimal performance

5. Click "Create new project"

Step 5: Database Migration

Bolt will request permission to apply "Supabase Migrations."

This migrations process:

Creates necessary database tables automatically
Sets up proper relationships between data entities
Configures security policies for data access

Action required: Click "Apply Changes" when prompted.

Phase 4: Authentication Testing

Step 6: Test User Registration and Login

Testing process:

1. Locate the login form Bolt created in your application

2. Create a test user account with a valid email and password

3. Verify the login process works correctly

4. Verification step: Navigate to your Supabase dashboard

Go to Authentication → Users
Confirm your test user appears in the table
Check that the user data is properly formatted

Troubleshooting:

If login fails, common issues include:

Email format validation errors
Password complexity requirements not met
Network connectivity issues with Supabase

Phase 5: Iterative Development

Step 7: Navigate Through Development Phases

Process for each development phase:

1. Enable Discussion Mode: This allows detailed conversation with Bolt about implementation details

2. Request phase planning: Ask "What's the next phase? Explain your plan"

3. Review the plan: Bolt will outline specific features and implementation steps

4. Approve implementation: Click the blue "Implement Phase X" button

5. Test functionality: Always test new features immediately after implementation

6. Iterate as needed: Provide feedback and request adjustments

Example build progression:

1: Basic UI and routing
2: Authentication system
3: File upload functionality
4: AI integration
5: Payment system

As AI is non-deterministic, your build progression and phases might be different.

Phase 6: AI Integration Setup

Step 8: OpenAI API Configuration

Obtaining your API key:

1. Visit OpenAI's API key page: https://platform.openai.com/settings/organization/apikeys

2. Account setup: Create an account if you don't have one

3. Billing requirement: Add at least $5 to your account balance

4. Key creation: Click "Create a New Key" and follow the prompts

5. Security: Copy the key immediately (it won't be shown again)

Storing the API key securely:

1. Navigate to your Supabase dashboard

2. Go to Edge Functions → Secrets

3. Click "Add Environment Variable"

4. Variable name: ‘OPENAI_API_KEY’

5. Value: Paste your OpenAI API key

6. Save the configuration

Step 9: Testing AI Functionality

Verification steps:

1. Upload a test file or paste sample meeting text

2. Trigger the AI summarization process

3. Quality check: Review the generated summary for:

Accuracy of key points
Proper formatting
Appropriate length and detail level

4. Iteration: If results don't meet expectations, work with Bolt to refine the AI prompt

Common prompt improvements:

"Make summaries more concise and bulletpointed"
"Include action items and next steps"
"Highlight key decisions made during the meeting"

Phase 7: Payment System Integration

Step 10: Stripe Setup and Configuration

Stripe account preparation:

1. Create a Stripe developer account at stripe.com

2. Test environment: Ensure you're working in test mode

3. Product creation: Navigate to Products here: https://dashboard.stripe.com/test/products

Create subscription tiers (e.g., Basic, Premium, Enterprise)
Set pricing and billing intervals
Configure feature limitations for each tier

API key integration:

1. Get your test API key from Stripe's API keys page here: https://dashboard.stripe.com/test/apikeys

2. Key format: Look for keys starting with ‘sk_test_’

3. Bolt integration:

Click "Add Stripe Key" in Bolt

Enter your ‘sk_test_’ key
Click "Retrieve my Products"
Select which products to integrate
Click "Apply Selection"

Payment testing:

1. Use Stripe's test card numbers for verification

2. Test card: 4242 4242 4242 4242 (Visa)

3. Expiry: Any future date

4. CVC: Any 3digit number

5. Verify the complete subscription flow works correctly

Phase 8: Enhancement and Optimization

Optional Improvements

Landing page creation:

Professional homepage with feature descriptions
Clear pricing information
User testimonials or demo videos

Meeting management features:

Delete functionality for old meetings
Edit capabilities for generated summaries
Search and filter options for meeting history

AI prompt optimization:

Customize summarization style for different meeting types
Add industry specific terminology recognition
Implement different summary lengths (brief, detailed, comprehensive)

Troubleshooting Guide

Common Error Resolution:

"Potential Problem Detected Error":

1. Do not click the automatic "Attempt Fix" button

2. Instead: Click the dropdown arrow to expand error details

3. Copy the complete error message

4. Enable Discussion Mode in Bolt

5. Provide context: Explain what action you were taking when the error occurred

6. Paste the error text and ask Bolt for a specific solution

Database connection issues:

Verify Supabase project is active and accessible
Check that environment variables are properly set
Confirm database migrations completed successfully

API integration problems:

Validate API keys are correctly formatted and active
Check account billing status for external services
Verify network connectivity and firewall settings

You now have a complete AI-powered meeting summarizer application with:

Secure user authentication
Cloudbased transcript storage
AI-powered summarization
Subscription based premium features
Professional payment processing

Next steps for deployment:

Switch from test to production API keys
Configure custom domain
Set up monitoring and analytics
Plan user onboarding and support processes

This foundation can be extended with additional features like team collaboration, integration with calendar applications or advanced AI capabilities as your user base grows.

Reminder, you can check out a demo here. (Note, styling considerations were not prioritized in this demo - instead it’s all about getting the basic functionality working)

And because you’re reading Next Play, you can get $100 off the popular prototyping with AI bootcamp using the code NEXTPLAY. Also check out their upcoming free lesson on Maven to get started with vibe coding. Thanks to them and Maven for supporting Next Play.