TL;DR: Understand the tech stack from the start to select the right AI tool and avoid deployment headaches.
Tips:
- Know upfront if your app requires databases, authentication, and/or API integrations, where it will be hosted, and on what platforms (browser, mobile, tablet) you want it to run. Then clearly specify your tech stack requirements to the AI in the initial chat to ensure correct architecture from the outset. You can also ask the AI to recommend an architecture based on your requirements.
- Tools like v0.dev seamlessly integrate coding and deployment on platforms like Vercel.
- AI templates can simplify database integrations (e.g., v0.dev has a template for Supabase for PostgreSQL).
- If you’re new to architecture design, check out Lenny’s Newsletter article Become a More Technical Product Manager to learn the basic elements of architecture and how they work together to make a working app.
- Employ a professional engineer if you are working with sensitive data to ensure proper IT security measures are in place
During my initial app development, I struggled by not specifying the underlying architectural features that I needed, such as wanting the app to run on both browser and mobile. I also chose tools that couldn’t deploy directly to hosting platforms like Vercel. I kept getting stuck when I wanted to launch my app.
Choosing the right technology stack early is crucial when building with AI. Traditionally, engineers handle tech decisions, but with AI tools, you become responsible for selecting the programming language, database, hosting platform, and any required integrations.
You can break down these architectural needs by using the following methodology.
First, you need to understand the workflows between writing code, holding the code in a repository such as Github, and deploying the code to a hosting provider that can build and deploy the code.
Because I wanted to create the Resonant Way app very quickly and with minimal setup, I decided to use v0.dev, which is the coding AI tool for the hosting platform Vercel. I also decided that since this would be a free application, I didn’t want to incur any storage or security risks associated with user data and authentication. Instead the Resonant Way app leverages the user’s browser local storage to hold the music and photos and app selections along with a downloadable Progressive Web App (PWA) option for users who want to save their settings on their device.
With those architecture decisions in place, I took my wireframes and reqs, and fed them into a fresh v0.dev chat. And here’s where it fell down yet again. I didn’t understand that I had to explicitly tell the chat to write the application in a programming language and using libraries that could be deployed to Vercel. The first few times resulted in code that couldn't deploy to Vercel. I started up a new chat: Write the code for a web and mobile application that can deploy to Vercel and included my feature requirements. Finally, success.
You can see from the screenshot below that the fundamental structure for the final app was now in place, and in an AI tool that could code working features and deploy to a hosting platform. From this point onwards I was able to start iterating on each of the specific features of the app to get it to its final state.
Knowing what core integrations and features your app needs architecturally is critical for selecting your AI tool and your initial chat prompt. You need to know what platforms (browser, mobile, tablet, etc) you want it to run on. You need to know if it’s going to need a database–if so, you have to choose an AI setup from the beginning that builds and integrates in a database. If you’re going to want any type of user authentication or user data storage, you’ll need a database and authentication from the beginning. If you want to integrate in a shop or other API integration, make sure to research and test out how to build that integration before you go to build the rest of the app. AI tools provide templates for these critical integrations like databases (Supabase, Neon) and caching (Upstash), but they're still in the early stages of maturity and may not work properly. You also need to tell the AI where you want to deploy and host the app to ensure it creates compatible code. Clearly defining tech stack requirements in initial AI prompts ensures smooth, efficient development and deployment.
One final note on architecture and IT security. It’s unclear what level of IT security is being included in the code and hosting for these AI apps. For any sensitive data storage, I recommend working with an experienced IT professional to ensure that the application has appropriate security measures in place. For example, using AI chatbots opens up databases to potential prompt injection queries that could compromise data security. The database itself needs to be locked down and the chats need to be set up with guardrails to ensure they don’t allow unlimited access to data. An experienced professional engineer can ensure that the application has best practices implemented to limit exposure to IT vulnerabilities.