How to Build a Web App: A Beginner’s Guide

This guide will walk you through, step-by-step, on how to build a web app. If you have been teaching yourself programming, you will have picked up different skills without learning how to put them together in an end-to-end project to build real-world production software. I know this is a common frustration faced by many people learning to code. This guide is the missing map you have been looking for.

As you go through this guide you will see that Software Engineers spend substantial time outside of coding. Part of our craft involves making some key decisions that contribute towards the success of our work. We need to think through ideas and prioritize what to work on, we have to think through and solve problems conceptually and we need to design and architect systems that implement these solutions. All this involves very little code.

In this guide, I will provide a broad stroke of the techniques and strategies for building a web application.

Specifically, I will discuss the following:

1. How to generate and pick an app idea to work on
2. Shaping your project and settling on a list of features to build
3. Choosing the technology stack to build your app with
4. Where to start frontend vs the backend
5. Designing and developing the UI and UX for your App
6. Designing and developing the backend API system for your App
7. Bringing it all together into a finished usable system

How to generate and pick an app idea to work on

These days app ideas are everywhere and I am sure there are plenty floating in your mind. The best ideas are ones that solve your own problems and cures your own itch. By building apps for yourself that you will truly use day-to-day, you will quickly begin to appreciate the perspective of the end user. You will discover ways to improve your product and implement those changes right away without having to wait on “customer service”. As it turns out, this approach is not only good for learning, but it is also how many great products are born. If you build something that solves your own problems really well, chances are there are other that will be happy to pay you for that solution. 

What if your idea already exists as a product?  Well that’s ok. Build something for yourself anyways, customize it specifically to your needs. You can even use the concepts from the existing product to guide you. This is a great way to learn.

For example, when my daughter was born, I built a simple app to track her feeding schedule. There were plenty of apps available on the App Store, but most came with many additional features that I didn’t care about and got in the way. I whipped up a simple app with features that I cared about within a couple of days. My wife absolutely loved it.

Over time you will find that building apps for yourself actually makes your life better and more productive. 

Shaping your project and settling on a list of features to build

You have picked your app idea, now its time to flesh out the feature list and get specific about what you will build. Your goal here should be to focus on building the a small set of important features end-to-end. To do this start by listing out all the features that would be ideal in your product. Once you have that, start highlighting the few features that are absolutely must-have for a simple version of your app to exist.

For example, say you are building a personal note-taking app. A set of features will likely be – the ability to create/edit/remove multiple notes in a notebook, the ability to create multiple notebooks, ability to add images and web clipping to notes, multi-user log in etc. Your first version of this app doesn’t need to have all these features at once. Instead, focus on just the bare minimum as a start. In this case, you can choose to build an app with only one notebook and enables the ability to create/edit/remove multiple notes. Thats it. Leave out everything else, build only for yourself (so no multi-user log in) and revisit those feature in future versions. 

The key to building great software is to keep it simple and improve the product through iterations. Web apps especially allow for continuous release of changes and improvements. Take advantage of this by sizing each of your iterations effectively. This practice will help you throughout your career.

Choosing the technology stack to build your app with

When choosing your tech stack, I recommend sticking with languages and technology that you have some familiarity with as a start. In some cases though, you may have to learn something new to help you build the app. You will find that the additional learnings here will be highly effective because there is a clear purpose behind it. Doing is truly the best form of learning.

If you have already been learning to code using a specific programming language, you should use that for your first end-to-end project. If that language is JavaScript, you can use it both in the Frontend and the Backend using Node JS. If have learnt a language suitable for the backend, such as Java/Python/Ruby etc, then start by picking a simple framework to use. I will discuss backend development a bit more shortly.

In general, I suggest to always start with what you want to accomplish, and then figure out the technology that enables it. This product-centric approach to picking technology ensures that your choices are grounded in what is feasible, realistic and economical. You prevent wasting time learning the next shiny tech concept that is fashionable and popular in the moment. Focus instead on learning and working with technology that delivers results. Meaningful results, which in this case is a working web app that solves your problem, is the ultimate goal.

Where to start frontend vs the backend

This is a natural question I come across a lot. My preference and recommendation is to start with the user experience first. In essence, the user experience is the product. Starting there ensure that you flesh out details of the interaction and flow of the app before diving deeper into the rest of the implementation. Developing great UX is a craft in it’s own right and I will discuss more on that a little later.

Once you have built a couple of applications end-to-end, you will find that in practice you can also work on both the frontend and the backend in parallel. In a typical application the user experience informs some aspects of the backend and at the same time backend constraints inform the frontend. Being able to design and develop both in parallel enables you tackle these issues together. In a typical team we would have some folks work on the backend and some folks on the frontend to parallelize the schedule. The teams would stay in sync frequently throughout.

If you are working by yourself, you can split time by spending a couple of hours on the frontend of the app and a couple of hours on the backend. 

Designing and developing the UI and UX of your App

The frontend user experience is where you really start to get a visual sense of what you are building. You can approach this work as follows:

1. Start by using pencil and paper to draw rough sketches of the different screens and views of your app. Try to envision the flow of the interaction with the app as you sketch it out. This is also where you will start to learn more about the data models that will be needed in the backend.
2. Once you have built a good sense of the different screens, views and flows of your app, move on to building basic HTML pages from your sketch.
3. As the HTML pages take shape, start implementing Javascript interactions as needed. You can pull in a JavaScript framework at this stage and start converting your HTML pages into app templates.
4. Implement simple stubs and placeholders for where the data will flow in from the backend calls. If you have parallelized the work on the backend data models, you can create dummy JSON datasets and have the placeholders return them. This is an excellent way to speed up frontend development with dummy data.

For the first version of your app, keep the user experience as simple as possible. Avoid trying to use any nifty effects or libraries. Remember, you want to get that first end-to-end version done and iterate later. 

For a great example walk-through, checkout this video (below) where Ryan Singer, Head of Product Strategy at Basecamp, shows how to transform an app concept into a working frontend prototype:

Designing and developing the backend API system for your App

The design for the backend system involves the follow parts:

• Designing the data models
• Designing the database or storage schema for storing the data models
• Designing the REST API that reads/writes/modifies the data in the database.

Use a lightweight framework, called micro-framework, to build a simple REST API backend. Python’s Flask and PHP’s Lumen are good examples. 

The fundamental job of your backend system will be database IO. ActiveRecord is a simple pattern for representing data records in code and manipulating them. The pattern is quite simple to understand and use. Ruby on Rails comes with ActiveRecords out of the box; for python look into SQL-Alchemy and there is Eloquent ORM with Laravel for PHP. 

If you have kept your initial feature-set simple, your data models should also turn out to be simple. For data storage you can choose between something like MongoDB or MySQL. I personally prefer working with MySQL. Pick anything that you are familiar with or comfortable with. Storage systems can be optimized and swapped out in later iterations.

Bringing it all together into a finished usable system

At this point, you have a functioning frontend with stubbed dummy data, and a backend system with REST APIs ready for use. Now you can go ahead and hook up the APIs to the frontend. Replace the dummy data calls with the calls to the API for each part of your app, testing it as you go along. You will start to see your app come alive.

Congratulations! You have built your first end-to-end web application.

You can deploy the app on AWS, Heroku or other managed infrastructure service to access it anywhere you go. 

Version Control and Text Editors

We didn’t spend time talking about version control, text editors etc and that’s intentional. If you are already familiar with using a version control system like Git, by all means go ahead. However, if you haven’t used it before, then you can learn it later. It’s important to avoid getting distracted by aspects of development that you can learn in a later iteration. This applies to text editors as well. For most beginners a simple text editor like SublimeText is sufficient. Avoid any complex IDEs that would require you to spend time learning it’s bells and whistles.

If you choose to use Git, go ahead and set yourself up on GitHub and be diligent with regularly checking in code. Don’t check in your work in a single large commit – that defeats the purpose. Commit every small change you make, and commit frequently. This will develop a trail of logs that shows how you built your app. In time, start learning branching strategies. Branching allows you to work on a copy of the code in a separate “branch” created from the master copy. You can use different branches to work on different features and ideas during an iteration, and merge to the master branch when ready.

Finally – Iterate, iterate, iterate

Once you have the first version of your app done, keep making small incremental changes and improve your product. At this point, you are no longer working with a blank canvas. Use your app as a vehicle to learn new development techniques and concepts. 

Building and improving your own apps will get you farther than going in circles solving leetcode problems. This is learning by doing. Most importantly, use the app. Get your friends and family to try it too. That’s our prime directive as engineers: build great products that adds real value to peoples lives. 

FREE DOWNLOAD

Getting Started with Web Application Development