How to Build a Full Stack Application from Scratch using AI: A Non-Developer’s Guide
If you’re anything like me, you’ve been playing with AI tools a LOT lately and wondering how you can apply these breakthrough advancements to you advantage. Whether that’s making you more productive, more knowledgeable, vetting ideas, writing, or coding, the practical applications are quite possibly only limited by the bounds of your imagination.
For a long time I’ve wanted to build an app of my own, but, lacking software development skills had, prior to these new tools, been a fundamental blocker to achieving this goal. Sure there are low/no-code platforms that allow you to build websites, but for the most part you are still heavily bounded by those platforms in what you can build. They’re great for creating digital store fronts such as for direct to consumer (DTC) goods, or landing pages for advertising a physical good or service, but you really can’t build just anything that you want with them. The ‘why’ behind this is long, but the simple explanation is that all of the current website builders function as lego blocks. Each block represents a snippet of code that does something, and you can only put together the pieces you are provided in certain, often limiting, ways.
In this post, I’ll cover the fundamentals around building a complex web application from scratch using ChatGPT, or really any other LLM that is good at code generation. At the time of this post ChatGPT is noticeably superior to all other competitors in this regard, but that may well change in the coming years. As such I will refer to ChatGPT exclusively, but the workflows below should be interchangeable across similarly tuned instruction based LLM’s.
A Quick Note on the App I’m Building
The web app I’ve built is by no means revolutionary, or sexy, but it does work, and it has accrued quite a bit of technical complexity as I have iterated. I won’t be sharing the URL here just yet, because its still not ready for a large influx of users stress testing it, but I do promise to update this post in a few months when it‘s closer to a finished product (remembering that there is no such thing as ‘finished’ in software)!
I do however want to share some of the details of the application to convey the level of complexity that is possible using tools like ChatGPT. I should note that, while I am NOT a developer (at best I can read code and print ‘hello world’ in several languages), I do have a broad, general technical background, having spent a number of years in IT and as a Solutions Architect at several large technology companies.
Despite my experience however, I would argue that, all that is needed to achieve a similar outcome is a significant amount of dedication and grit. You don’t need to be a deep technologist to build something with ChatGPT or other LLM’s, you just need to know how to interact with them, how to properly build/refine prompts, and how to troubleshoot issues as they arise (and boy oh boy will they arise).
So, with that said, the app, as it stands today, comprises the following:
ReactJSfrontend &NodeJS+ExpressJSbackend53interconnectedcode files(not counting packages, dependencies, metadata files etc.) comprising4,000+ lines of code- Frontend hosted on AWS Amplify& Backend hosted onElastic Beanstalk 7 Lambda functionsthat do various things based on actions within the applicationRoute 53for DNS hosting/routingCloudFrontfor content delivery (CDN)5 DynamoDB tablesfor storing user and other dataAPI Gatewayfor triggering lambda’s and communication between the Amplify frontend and Beanstalk backendSimple Notification Service (SNS)for triggering event driven actionsSimple Email Service (SES)for sending action based emailsSimple Storage Service (S3)for storing a subset of raw dataAmazon Connectfor handling automated callsAmazon Lexintegrated with Connect for user call flowsCloudWatchfor logging (essential for troubleshooting)OpenAI APIfor integrating ChatGPT prompt workflow into the appGoogle Domains, where I purchased the domain for this app
I started this project 2 months ago and have accrued what you see above with roughly 2 to 3 hours each evening, most every day, spent working on this application. For someone who actually knows how to code, I imagine this time could be reduced by 30% to 50%, if not more. Everything, and I mean EVERY single thing you see above, was built and configured with instruction from ChatGPT. Are there times where ChatGPT is wrong and you need to troubleshoot? Absolutely, quite often in fact, but in those cases you can still use ChatGPT to solve those errors, the methods for which I will explain below in more detail.
Step 1: Defining the Application
As with anything, you need to start with an idea. What exactly is it that you want to build? It’s okay (and even desirable) to start simple, with just one use case or core functionality, and then expand out from there. And thats exactly what I did. Writing and note taking will be the most crucial part of making this work. You need to be overly detailed and meticulous in how you are describing what you want in order for ChatGPT to properly understand and follow along.
So, start by opening your preferred note/word processing application, and writing a detailed overview of what you want to build. To begin, it should be high level, focusing on the core functionality of the application, and how you imagine the features. When building out your prompts, you should structure them as if you’re writing for a blind person, being overly descriptive on how users interact with the application, the various moving parts, and the value proposition etc. Anything less than 4 or 5 paragraphs is likely too little detail, unless perhaps your goal is to just build something simple, like a calculator (no offense intended to the calculator builders out there, I use mine quite often).
Now, that you have your highly descriptive overview completed its time to feed it into ChatGPT. I recommend using the latest model (at the time of this writing that is GPT-4) for the best results. I can attest that, when you’re doing something complex, the differences in quality of outputs between GPT-3.5 and GPT-4 are incredibly noticeable.
Paste in your overview to ChatGPT and start, once again, from a high level. Ask it for input on the idea, if there is there anything it would add, modify or improve etc. Once you have finally refined the idea to a state that you are happy with, ask ChatGPT something like the following:
‘ok, now how would I build this application? Please think step by step, and outline all components that we would need to incorporate to make this application work. Be as descriptive as possible, remembering that I am not an expert in this area, and need explicit guidance on the applications structure and order of operations.’
ChatGPT should now begin to give you an outline for the application. Next you should refine it. Is there anything you don’t like, or want to tweak slightly? If so, tell ChatGPT what that is exactly, and allow it to refine or provide further explanation on areas that you are unsure of. Then, once you are happy with the overview and order of operations, copy the finalized output from ChatGPT and SAVE IT in a folder somewhere dedicated to this project, with a file name like ‘application overview’ or something to that effect. Yes, you can always go back into your conversation history to retrieve this, but keeping ordered notes will make this process much easier on you as you proceed. Since ChatGPT does not have an infinite memory, you will use this document frequently to remind ChatGPT exactly what it is you are trying to achieve, and where in the process that you are. Ok great, lets move to the next step now!
Step 2: Starting to Build
Now that you have your detailed overview of what the application should entail, and the steps for doing so decomposed into an ordered list of operations, you can begin the fun part, building! Once again you are going to want to remember to be overly descriptive, and talk to ChatGPT as if you were describing what you want to a blind person. Go ahead and prompt ChatGPT with something like the following:
‘Ok, Im ready to begin building. First please guide me through what we should use for the tech stack, including programming languages and any other technology that should be incorporated. Consider how we want to delineate between the frontend and backend code, and how our folder/file structure should be setup for the initial build. I will start building on my local machine first, with the intent of eventually migrating to a cloud provider for hosting eventually. Please be highly descriptive in your output, remembering that I am new to…..’
From here, ChatGPT should once again give you a detailed overview, this time of the specific technologies to use, including the programming language that should be used. If you have a preference on the language, say so, but if not, let ChatGPT choose for you. You can also improve the results of responses, and gather more instructional information by saying things like:
‘Please be sure to provide answers that you are highly confident in the validity of’
‘Please choose technologies that you have been extensively trained on’
‘Tell me how to setup an IDE on my (Mac/Windows) for development’
‘Tell me how to install any dependencies we need’
‘Tell me how to start my application’
‘Explain that last step in more detail’
etc. Once again, when you are happy with the tech stack outlined, you can begin asking more detailed questions. Where you begin is up to you, but I would recommend that you focus on building out the core functionality first.
If you envision a web app with a login page that, once logged in, allows users to visit a homepage that allows them to upload and process images, or upload documents for some sort of processing, focus first on the actual processing of those images or documents, you can come back to the login flow and landing pages later. Most of those peripheral items are fluff anyway, the core of your application (what it actually does) is whats most important, and what will also be most fun to build. You can easily get caught obsessing over minor details of your landing page or any other component, but at the end of the day, the thing that people actually care about from your application is its core functionality. Once your core functionality works, you can always go back and build out the login and other user flows around that core.
As you go it is likely that you will be instructed to create new code files that interoperate with existing code files, and to create, add or modify code in both the frontend, and the backend. This is good, and desirable. You almost never want a single monolithic code file for your app. Creating different files for different functions (navigation banner, login window, form box etc.) make your code easier to review, maintan and update. Ask ChatGPT for best practices around how to structure your code. A good rule of thumb is that if you are moving on to some new functionality or component in your app, it should probably be put in its own dedicated file. ChatGPT is great at helping tell you what to do here to maintain best practices.
Also there will continually be new things that you are directed to build that you are wholly unfamiliar with. Stop and ask ChatGPT a question about each new component or tool as you go. Doing so will ensure that you are learning while you go, and not just being a copy/paste monkey. Learning like this will ensure that, as your application grows, so to does your familiarity with the tooling that it comprises, making the process of building easier and faster as you proceed.
From here, my ability to guide you into the nuances of building your custom application becomes a bit more difficult, but I do have a few more tips on something that you will inevitably run into, namely, growing the application and troubleshooting things that don’t work!
Step 3: Iteration & Troubleshooting
Now that you have a few code files pulled together, you’ve probably already encountered some issues along the way. Maybe the code ChatGPT gave you for a specific page or functionality didn’t work as you expected it, or maybe it doesn’t quite look how you want it to. Once again, remembering to be as explicit as possible, you can use ChatGPT to help tackle these issues. As your application and code base growth, so too does complexity, and with complexity come problems.
Whenever you get an error, the best way to approach these are to first feed them back into ChatGPT to troubleshoot. Lets say for example you are working in the command line and your application is not building, and it gives you some error in the terminal explaining why, take that and paste that into ChatGPT, and, ideally in the same prompt, paste in your code along with it. Let ChatGPT try to figure out what is wrong and tell you exactly what to correct. As you move into the web browser with you application, make sure you know how to use the ‘Inspect’ console to see the various errors and informational alerts that pop up as you navigate through the app.
Most of the times this method of simply feeding the error into ChatGPT works, but if not, Google is your next stop. Search for the same error, and include relevant keywords. For example, if you’re building a Python program, include ‘Python’ in the search along with the error text. You should find results from forums or maybe knowledge bases that detail similar errors encountered by other users. You can then take the text from those pages, and feed them back into ChatGPT, asking it something like:
‘with this new information, and the error code shared in my last prompt (or two or three prompts) please help me figure out how to resolve this error’
Effectively what you are doing here is just giving ChatGPT new information to quickly train up on. A lot of the times this will work, but it may result in ChatGPT telling you to refactor (change/update) some of your code to account for updates or changes in syntax since it was trained (as of this post, ChatGPT 4’s knowledge cutoff is September 2021, so this is a fairly common occurrence).
Troubleshooting will be a common, case by case occurrence. The important thing to remember here is that all issues are surmountable with enough dedication. To date, on my own application, the longest I have been stuck on a single problem (user authentication and protected routing) was roughly a week, or about 18+ hours of cumulative work. Persistence and perspiration are the name of the game here. Don’t let yourself get discouraged, and sooner or later you will inevitably have the ‘ah-hah’ moment that fixes your issue. The best thing about this is that you’ve likely just learned a ton along the way!
As for iteration, once again its important to keep meticulous notes. As your code base (files and folders) grows, you need to ensure that you’re keeping a document with the file structure, along with notes on what each file does. Similar to how you saved the app overview document to feed back into ChatGPT to refresh its memory on the scope of work, keeping notes on the file structure will be essential when you pick back up in new converstations with ChatGPT to remind it of what you have, and what you still need.
Here is an example of how I’ve kept my file structure documented:
As I mentioned earlier, ChatGPT’s memory is finite, so keeping these detailed notes will allow you to more quickly get ChatGPT back on track and focused on the task at hand. Without meticulous not taking, I would argue that creating an application of such complexity would not be possible. There are improvements on ChatGPT’s memory in the works (8k and 32K token limits) that should improve this, allowing for inputting up to 40 pages of data, but even then, you will likely still be thankful for keeping a meticulous structure to your note taking, not only for ChatGPT’s sake, but for your own as well!
And thats mostly it. By following the above methodologies you should be able to build a really cool full stack application, almost completely by yourself (well, and ChatGPT obviously). Before you leave I have a few miscellaneous tips below for you as you build your application.
Miscellaneous Notes & Tips
- ChatGPT has conversation length limits, you will notice that after about 150 or so prompts, the quality of responses that ChatGPT gives, and its memory retention, seem to drop significantly. If you keep going despite this, you will eventually run into the hard limit and be forced to open a new conversation. I would recommend starting a new conversation thread before you hit this limit and labeling it appropriately (ex. Pt 2 — App build) to keep track of your conversations. Always start these new threads by re-inputting your notes and folder/file structure to get the new conversation instance back up to speed. - There is an art to prompting ChatGPT, over time you will get better at it. I would recommend avoiding paying for the silly fluff ‘1000 perfect prompts’ packages that people are trying to hustle online, and instead opt for free, hands on training to deepen your prompting proficiencies. DeepLearning just released a great (albeit a bit more technically deep) course on Prompt Engineering that I would highly recommend if you are looking to deepend your skills in this regard. - You may have heard of ‘ hallucinations’, which are effectively when ChatGPT (or any similar LLM) gives you an answer that it seems highly confident in, but that are complete and utter nonsense. I’ve seen this happen a lot, especially when its giving guidance on achieving things technically. If something isn’t working based on the instructions its provided, push back. Ask it to double check its information, or to only answer with something that it is highly confident in being factual. If you find new information online that contradicts what ChatGPT said, feed that text into the conversation and see what it says. - Don’t be afraid to ask for help! If you’re interested in building an app, its likely that you have someone in your network who is a developer, or at least has some development experience. Reach out to them periodically and ask them to double check your work as you go. If you wait too long to do this, you risk having to go back and re-factor (change/update) your code, which is a nightmare, and can be discouraging if you’ve already put in a lot of time and effort. - Consider integrating your code with a repositorylike Github or Bitbucket sooner rather than later. This can be a bit daunting, especially for someone new to coding, but its really not as hard as it seems, and once you are done you have a running history of your changes and updates, which will become invaluable as your code evolves. - Use a good development environment (IDE). I like VSCode because it’s free, feature rich, and widely accepted/documented. Again this can be a bit daunting to new developers, but picking the right tools for the job will prove invaluable as you progress. - Ensure that informational commentsare added to all of your code, and are thoroughly descriptive. If you have one code file with 5 different functions, each function should have its own comment. Consider also adding comments to the top of the file that overview what its purpose is. This is a best practice in development and makes it easy for us mere humans to quickly identify what a section of code does. ChatGPT will sometimes add comments automatically, sometimes not, so be sure you’re staying on top of this as your codebase grows - Consider moving to **cloud hosting (I prefer AWS due to service breadth but there are other options)**when your application is ready for testing by friends and family. Hosting in the cloud is a great option, not only for the flexibility that it provides, but also the tooling. For example, rather than incorporating some of your backend logic directly in your code, you can use AWS Lambda to perform certain operations, thus further optimizing your resource utilization to on an as-needed basis. Also cloud providers like AWS offer tons of peripheral tooling and services that you can integrate with your application to prevent having to build this functionality yourself, like using Amazon Cognito for authentication etc. - When working with multiple code filesthat interoperate, you may run out of space to input the full files into ChatGPT. This is when your comments become important, as you can selectively copy and paste in only the revelant functions from each file that you are working with. Also for code review of very large code files, until we have 8k or 32K as default, you will likely need to break these up into multiple prompts. Just tell ChatGPT that you are doing that, number each code segment and then after all have been input, tell ChatGPT to ‘study the last 2 or 3 prompts’ as necessary, followed by your question.
If you’ve made it this far, you’re off to a good start! If there is one core idea that you take from this post, it should be that **perseverance pays off. **Stick with your goal and don’t let yourself become discouraged when obstacles inevitably arise. With enough effort, and a little help from your network, any obstacle is surmountable. Happy building!
Please feel free to comment below or send me any questions you might have via email to: bairdsbread@gmail.com
*This post was NOT written with any assistance or input from ChatGPT