At the end of January, I embarked on a journey to experiment with AI coding assistants while creating a SaaS product. Within three weeks I launched EasyUserPersonas.com - a tool that generates detailed user personas for product development teams.
What makes this project particularly interesting is how I leveraged AI-assisted development to transform a concept into a fully functional product in my free time.
The Initial Prototype
I started with a simple success criterion:
Generate realistic user personas via OpenAI’s API based on form inputs about target industries and roles.
I decided to test Bolt.new, one of the popular code assistants frequently featured by AI coding “influencers” on YouTube. The initial prototype integrated OpenAI’s API (specifically gpt-3.5-turbo) to generate personas based on simple HTML form inputs.
Bolt surprised me by quickly building a form based on my prompt. After providing my OpenAI API key, I had a working prototype - simple but effective proof that the concept was viable.
Scaling to a Full Product
Encouraged by the prototype’s success, I expanded it into a full-fledged product with several key components:
Identifying The Architecture
I chose Vue as my primary front-end framework and added these essential tools:
- Vite - A scaffolding tool for front-end frameworks that simplifies dev server setup and deployment scripts
- PrimeVue - Pre-made UI components that saved time and provided easy reference points when interacting with AI assistants
- Tailwind - A styling library that enabled rapid development without touching CSS/SASS
This combination allowed me to focus on building features while giving specific instructions to the AI assistant. For example, I could say:
“Using primevue/InputText and primevue/Button, create a form that allows users to reset their password”
As a Tailwind newcomer, I found it to be a game-changer. Since I was designing the app as I built it, I could start with simple components and structure before adding polish later. Tailwind saved tremendous time with styling, and I could direct the assistant to use specific styles and layouts.
Expanding Core Features
I needed this to be more than just a form returning personas. My wife, Abby, who is a digital project manager, suggested that many users might prefer building personas one at a time rather than in batches, which led me to develop a wizard-style user journey.
The coding assistant made this process much smoother. Once Bolt built all the wizard views, I connected them together, though I began encountering limitations with the Bolt hosted IDE.
Before moving to a local environment, I had to decide where to host the project and what database to use. I was already using Supabase to store generated personas, and its feature-rich, open-source nature with built-in authentication support made it an easy choice to continue with. I had Bolt build a Login/Registration page before transitioning to local development.
Local Development with Copilot
Moving to a local environment was surprisingly smooth. Bolt allows downloading your entire project as a zip file. Since this was a Vite project based on Node.js, I simply:
- Downloaded and decompressed the project
- Ran
npm installfrom the root directory - Added a local
.envfile with my database info and OpenAI API key - Initialized Git and committed the code to GitHub
At this point, I began using GitHub Copilot within VS Code, configured with Claude 3.5 Sonnet, and found the Copilot Edits sidebar particularly useful. I could focus the AI on specific files and reference functions, variables, and code objects directly in the chat:
“There seems to be an issue with the generateIndustry function on line 138 of GeneratePersonas.vue being invoked twice. Could you investigate why?”
I discovered it’s helpful to ask assistants how they would solve an issue before they execute solutions, allowing me to evaluate their approach.
Technical Challenges Beyond the Tutorials
What many AI coding tutorials don’t showcase are the real challenges of launching a public product. My project needed:
- A production server - While services like Bolt offer deployment solutions, I wanted to use AWS since my other web projects live there
- Secure API key storage - I planned to use AWS Lambda with API Gateway to handle API calls
- Database setup and permissions handling - Essential for any SaaS product
Setting up these components took most of the final week and a half of my free time, though it could be completed in a couple of days with uninterrupted work. Understanding CORS for secure communication between systems was particularly crucial.
Reflections on AI-Assisted Development
This project demonstrates how AI-assisted development tools can accelerate product development. Using Bolt for scaffolding and component generation allowed me to focus on unique application aspects while automating routine tasks. However, I don’t believe someone without digital product experience would achieve the same results in the same timeframe.
Many obstacles I encountered involved infrastructure and backend interactions necessary for a production-ready application. My development experience helped me overcome these challenges, but newcomers would likely struggle.
The AI occasionally misunderstood requirements or failed to consider the product holistically, with its effectiveness varying between prompts. This underscores the importance of having clear direction and the ability to make corrections - skills that require development experience.
Going from concept to working product in three weeks highlights the potential of AI-assisted development in modern software creation. It’s not just about coding faster; it’s about iterating quickly and bringing ideas to life more efficiently. For hybrid designer-developers, the potential is limitless.
Visit EasyUserPersonas.com to generate AI-powered user personas for your next project!