How to Prepare Building Your Web App Idea

Now the time has come. You have skilled up as a Full Stack Developer and you are ready to build something useful. And you aren't coding yet because you are smart and you try to understand how to prepare for success.


Most tutorials about “How to Build a Web App” will go deeply into the architectural process, the coding process, or try to sell you on a particular technology. Or bubble it up for that matter… (no-code tools user know what I'm talking about ;)


And then also, most people will just jump in and stop in the middle of it. This is how side projects work out in 99% of the cases. 

2 Ways

To increase your success chances I'd like first to show you, how you can keep the ideation and architectural processes as simple as possible. 


And then I'd like to present you 2 styles of preparing your creation process to max out on your success rate: Outside-in or inside-out. There will be a "secret" business lesson in it for you at the end too.


Idea, Users & Master Plan

But in any case, first things first. You need an idea. If you don't have one... damn… all is lost. The world has ceased to need anything... But wait, maybe you need something? Or your mom? Or your dog? 


There are many ways to find your idea! Most importantly try to think about the problem you are trying to solve and real people who have this problem.


For a validated purposeful idea, I can recommend the techniques from CHAPTER 2 from "Start Small, Stay Small" by Rob Walling. This is how I found my glorious integration tool idea including first clients for it (check out the sales-ready click dummy over at numify.co).


Haven't found any clients for your big idea yet? That's fine, it will be enough if you could at least imagine a few people who will be your first users. The early adopters. Your grandma will do, too. But there should be at least a few people willing to invest a bit of time in your magical workings.


Now you can even talk to your clients or your potential users and work out some requirements. Sketch out the wireframe. Use a pen and paper or try one of the freely available wireframe tools, like Balsamiq


This will be your master plan to guide you through your moments of doubt and distraction. Just keep it near your sight all the time.


Now we are talking about the inside-out approach. Greetings from Sushi Uramaki. We will tackle the other one a bit later.


So now you have an idea, you have the users and you have your master plan? What can possibly go wrong? Nothing, exactly. The worst thing that can happen, is that you learned a whole bunch about ideation, creation, and building applications. 


Technical Plan


The next step is to choose your tech stack. At this point, you are blessed and damned to live in 2020+. You are blessed because you have the tools to build as far as your imagination goes. But you are damned because it is a hell of a lot of different tools stitched together. 


Choosing those tools is critical but should not take all of your time. You should be well aware of the tools around you. If you couldn't decide on your tech stack just yet, I hope you can find a lot of useful information and inspiration in our Choose Your Tech Stack Guide


Idea,  

Users,  

Master Plan,  

Technical Plan,  


that should be it, right? Almost. We know that we are all busy from time to time. Or all the time. Especially, as a Full Stack person, there is soooo much to do, learn, and to talk about ;) That's why we need to commit to a certain Game Plan


The most important part here is, to make time for your awesome project. The more important the project is for you, the more time you will give it. If you are very busy, commit to tackling the project at least 25 minutes a day (one pomodoro 😉). This can be magic: just sitting down, will often pull you in and turn the 25 minutes in 120 minutes.


Then, track your tasks. Write everything down to keep your head free from distractions. I use Kanbanflow for this which is the most amazing tool if you are into project management, time tracking, and pomodoro! 🍅 For new projects, I mostly use a simple 4-column-structure: 


THE project management tool ever!


This takes 5 minutes to set up, a few more minutes to learn, and an infinite amount of hours of productivity and focus. It's easy to overcomplicate in the beginning, especially if you don't have too much experience managing a software project. This will be the exact tool to keep the balance!


Here you have the final Web App Preparation Stack:


Idea

Users

Master Plan

Tech Plan

Game Plan


Now, this won't be the project planning structure of a usual "I'd like to create awesome stuff" suspect. If you use at least some of those points, you'll be much nearer to a successful project than the majority of full stack developers. 


The truth is, most projects start with a(probably weak) idea, don't have a thought out stack behind it neither a game or master plan, so that they end up in GitHub's Pet [project] Sematary 🗿 (I know, what I'm speaking about, having an oversized graveyard myself, I'm wondering when GitHub is going to charge me for my crimes)


But you can go one step further taking the outside-in approach. 

Outside-in

There is luckily no outside-in sushi maki because this would be a huge mess! The outside-in ideation approach on the other side is almost the only way to go if you are interested in making money with your application. 


Now, I myself am just starting to understand the world of sales and marketing, but I got these tips in a personal lesson, call it a business mentoring lesson, from a serial entrepreneur and business investor, so keep tuned for a few more moments. 


When I started the ideation process for numify, I knew it needed validation. I knew the problems of my target groups, but I didn't know how hard they need the product. So I went to a fair that was full of potential numify users. I spoke to 20-30 of them and they literally bought the idea out of my head! I even had a potential customer inviting me to his office to talk about further steps. 


I thought this is it!


And I started building the infrastructure for the app and the app itself.


However, in the business world, I failed because validation there works with numbers. To be more specific, with sales numbers. Ideally, you don't start building until you've got some sales.


You need to sell the app before you build the app. For that, you'll need a landing page, a click dummy, and potential customers. 


Once you have your first sales, you know people are ready to pay money for your product. Only then it's time to start building it.


If the app in all of its entirety doesn't sell, check if there are other ways to monetize your idea. Maybe you could try to sell parts of your idea as a particular service? For example, instead of trying to sell your app as a whole, you could try to sell a service that is similar to what your app is trying to achieve.


For example, you've built a click dummy for an app that showed your super special e-commerce platform which integrates organic water online shops with ebay and amazon. No one really bought into your app idea, though, the organic water dealers weren't convinced... You could still offer them a service for a good price that would leave them with their old shop systems but would integrate with ebay and amazon. If they still don't want to pay for it, maybe your idea just doesn't solve a real problem!


Conclusion

The most important thing is that you are preparing yourself for a good quality product. 


The most important learning is that there is no such thing as an outside-in sushi maki but there are several approaches on how to start your web app project on the right foot.


If your primer goal is to make money, embrace outside-in as much as possible. If just want to build a thing, go inside-out! 😋  Keep track of your preparation to stay on track laser-focused.

Full stack coaches and students thrive on constructive feedback & discussions.