So you’ve decided to build a web application. What next? Well.. Here’s how I would start from the ground up. Building a web application is no small feat, even if it’s something small. If you’re starting from a blank canvas and creating the codebase from nothing, as opposed to using a boilerplate, then you’ve got your work cut out. Let me show you the steps I’d take to building a web application.

1. Choose your stack

Once you’ve figured out a stack you can decide whether or not to build out everything from scratch to have more granular control of the application, or if you want to use a framework. I don’t just mean MERN,  LAMP, MEAN, Ruby on Rails – we often look at full “Stacks” forgetting that we also need to think about the frameworks. There are plenty out there such as Gatsby, NextJS and Meteor. Also, consider using a CSS library. Don’t overdo the CSS libraries either, pick one and stick with it – you can always introduce sass or styled components if you need to do more customisation.

2. Create a brief

This step is super important. Without a brief, you’re like a chicken in the headlights. You don’t know what’s coming to you, and trust me, it’ll hurt when it hits you. You need a way of organising the thoughts of every individual who will participate in the project, and a brief is a good place to start.

Some of the headings could include, but are not limited to the following: USPs, target market & personas, customer problem, business objectives, sitemap diagram, content and design (branding, colour scheme, iconography, typography, spacing, imagery, User Experience diagrams or flowchart). I would go so far as to even include the stack you’re going to use and the high-level functionality that the application needs in order to meet your business objectives. Add more to this document as time goes on, and especially during the formative stages of app development. (attach website brief file)

3. Seek a competent web designer or use

I can’t stress this enough! I have built so many websites by myself and I’ll be honest, I’m an average web designer at best. The thing is, if you want a nice looking site, everything needs to be well thought out with symmetry, user-friendly spacing, attractive colours, proper font and all the rest. Someone out there has dedicated their entire career to figuring out what kind of design makes a user take a valuable action – and that someone is not me. I would often half-arse the design, barely completing it fully in my chosen design software, and then I’d make a keen start on the coding because I enjoy that.

Find someone with a passion for creating pixel-perfect designs. They’re going to spend an obsessive amount of time meticulously perfecting your design and then you get to bring it to life. Or, if you’re confident in your design software skills – you can go ahead and do it yourself. Although, it’s going to take a significantly longer time to finish your app, and time is of the essence.

4. Work alongside your chosen web designer

The designer is responsible for producing a file (maybe Adobe XD, PSD or Sketch file) that contains your entire website in Desktop view as well as mobile view. Communicate with the designer so he/she can provide you with the entire website design before you start coding anything. Go into as much detail as you possibly can about the functionality of the website, and ask the designer to nicely try and display that in the designs. There will be some things that are not possible to make part of a flat design e.g. you cannot design moving animations, but these are important parts of the user experience. Try to get the designer to leave some descriptive notes where appropriate. Other things such as what clicking a button does – does a modal pop up and if so, make sure they design and include notes for that too!

5. What tooling will your application use?

Once you have the design completed you’ll be able to figure out wether there will be any API’s you need to interface with?

Will you use packages to help you achieve the functionality that the site requires in order to meet its business objectives?

Will you use third party tools for say, real-time messaging functionality or for third-party payment gateway providers such as Stripe?

Will your application be better if you used a content management system such as WordPress?

Write everything down so you know exactly what packages to download.

6. Use a project management tool or develop your own way of organising things

Create your own Trello Board or something. You will be extremely inefficient if you just code away because you don’t have a proper system in place. Map out all the features and functionality. Ideally, you will create a mind map for each page of the site so you can refer to it whilst coding. This is important because you need to be able to map out all the functionality of the site and then connect that functionality with real life pseudo code. Otherwise, you’ll end up coding a page say, and having to think about the functionality of the site rather than the elegance of your code. If you have everything in a sheet of paper, you have already kind of assimilated the functionality in your head and you can spend time writing neat code rather than coding on a whim.

7. Domain, server and database

Choose a domain name host, a server host and database. It’s important you know what you’re looking from so you don’t run into any issue down the road. You will have a better understanding of what it is you’re looking for after going over the steps above.

8. Structuring your application

Work out how you’re going to structure your application – will you have micro-services i.e. having a frontend, backend and database each running in its own process so that they are independently deployable? How will you define your folder structure – will you have a backend and a frontend folder or will everything be contained in one root folder? There are so many ways to build your folder structure but I recommend sticking to best practices which can easily be found with a quick Google search.

9. Automate, automate, automate

How will you speed up development of your application. In JavaScript land there are tools like Gulp and Nodemon that offer almost instantaneous changes to the frontend and backend. A tool like Webpack (probably the most comprehensive optimisation and bundling tool there is) can run in the background during development and offers hot refresh as well as a build command to optimise and minify your site for production.

10. Put it into production

This is probably one of the more tricky parts, which is why I suggest you create an app that is the bare bones of your actual app. Then, you can put that into production safely without fear of making mistakes or messing up the codebase. Simply download one of your previous commits when you had built the skeleton of your app. A working, functional backend and frontend that has a small and simple function running and is hooked up to the database. Put that into production and you’ll be able to test how everything works in this environment.