The Step-by-Step Guide on How to Build a No-code Web App

If you have an idea for an app, but you don’t know where to get started, then you’ll love this post.

Here you’ll find a step-by-step guide on how to build a Web app without code. You will discover tools and processes that will help you launch your next web app without code.

Let’s get started.

Problem validation

No matter how good your idea is, you simply don’t have proof that it’s going to work. So before jumping into design and development, you first want to validate your idea.

You want to see who else is having the problem that you’re trying to solve.

Talking to these people will also help you get to know your target audience.

A great resource to learn more about problem validation is Learning loop.

Get to know your target audience

If you’re still wondering, how the heck do I validate an idea, read on.

1. Rule: Don’t ask for opinions

If you ask for opinions, you get opinions.

Everyone has opinions on everything, and those opinions don’t reflect what people are actually doing in the real world.

Questions like: “Would you…” or “Do you think…” are not ideal ways to start a customer discovery interview.

1. Rule: Ask for facts.

Questions like:

“When was the last time you searched for…” or “Tell me about a time you…” shows whether the person thought about the problem before you asked the question.

If you ask “Do you think” or “Would you”, people will very likely answer positively, with their opinions.

The following question openers help respondents refer to a concrete instance:

• “Why did that bother you…?”
• “When was the last time you thought about…?”
• “When was the last time you struggled with…?”
• “When was the last time you talked to … about…?”.

You want to aim for collecting facts and concrete instances when validating your idea.

Usually, people already have a solution in place for the problem you discovered. Try to find out more details about their current solution, and what are the pros and cons of it.

There are two great books out there that will teach you how to perform user testing, and how to ask better questions.

Definitely check out Rocket surgery made easy and The mom test.

Don’t focus on the solution

At this stage, you might collect some inspirations for your future web app, but try to avoid focusing on the solution.

If you have a solution in mind, you will subconsciously frame the conversation. You might start asking about potential features, and getting positive responses, when in reality, you don’t know if that feature is solving the user’s most important problem.

Try to understand how the problem is affecting the person you’re talking to.

Remember, you have two ears and one mouth. Try to spend at least twice as much time listening then talking. And try to understand if the problem is really worth solving.

Now that you truly understand the user, try to sell the service.

Sell the service that your app is going to provide

Let’s say you’re building an app that teaches users self-hypnosis.

Before you go and build the app, you want to see if that’s something that people are interested in.

Try to close ten 1-on-1 sessions with people. Or maybe, you can try to run a workshop where you teach a whole group.

You want to make sure that people are willing to pay for the service that your app is going to provide.

If you managed to get 10 people excited about the offer, you’re onto something.

In case you’re not motivated by money, you still want to go through this process. But instead of asking for money, you want to see if people are willing to invest their time, effort or clicks.

The next step is to look at the market.

Analyse the market

When analysing the market, you mainly want to look for three things:

1. How big is the market
2. Is the market scaling or shrinking over time
3. Who are your competitors

Market size

The easiest way to find the market size for your web app is to Google: “{YOUR SERVICE} market size”. This should give you a good insight into the market size.

If you’re launching a local app, the research will be a little more complicated. If there aren’t any numbers available, search for the biggest names in the industry, and look at their revenue. This information is usually publicly available.

Also make sure to look at market trends.

Is the market growing, shrinking or stagnating.

For example, if I write “Food delivery market size”, I get this result.

In this case, you can see that the industry is pretty big, and it has been growing steadily. That’s a good sign, but there’s still one important question left:

How fierce is the competition?

Competition

If no one is doing anything similar to what you’re planning to do, and the industry is big enough, then great! You have what is called a Blue ocean strategy. You have a huge audience just waiting for you to launch your app.

In most cases however, you will face both direct and indirect competition on your journey.

And this doesn’t have to be a bad thing. If there are is a lot of money to be made in the industry, and the industry is expanding fast, that’s good. You have the last mover advantage. You can learn from the mistakes of your competitors, and see what works and what doesn’t.

By simply Googling: “{COMPETITOR NAME} sucks”, you will find what users are having issues with, and what you could do different. Also, look for positive reviews, and see what users love about your competitor. This way, you will have a good idea of what your target audience cares about.

Once you finished reading reviews, try to perform usability testing with the app that you’re competing with.

Performing user testing sessions with your competition, will help get a better understanding of your users, and it will help you avoid usability issues that your competition is having.

Once you’re done with all of that, evaluate your findings.

In case the market is oversaturated, and the competition is too fierce, you might want to pick a different niche.

Otherwise, if you see an opportunity, it’s time to start designing.

Ideation

Now that you know which problem or problems you’re trying to solve, and for whom, It’s time to start brainstorming web app and feature ideas.

Start planning key features and functionality of your no-code web app

During this phase, you want to answer the question: What does the app do?

To prioritize features and functionality of your no-code web app, list down all the features (major & minor) that you want with the approach:

Mo — Must have features S — Should have features Co — Could have features W — Won’t need features

The features and functionality which you’ll list during this phase, will be used during later stages when building your wireframes and MVP.

In the first version of your product, keep only the most essential features, and put everything else in a for-later box.

Perform a fake door testing

Act as if you already built the product to test the users willingness to pay.

Build a simple landing page, and present the features that your future app is going to have.

On this landing page, include a simple checkout, and let users buy your product. Of course, if anyone buys your product, refund them the money, and write a polite email saying that the money has been refunded and that this was just a test.

Once you landed a few sales, give yourself a pat on the shoulder. You just validated your solution.

You can repurpose your landing page for lead generation. Share the page with others while building your product, and collect email addresses.

Now that you have a landing page, it’s time to start designing.

Designing

During the design phase, you want to go through the build - test - iterate loop constantly.

Create a design, test it with 5 users and then improve your design based on the findings from the test. Testing a design with only 5 users is enough to uncover most usability issues.

Map out the user journey

A journey map is a visualization of the process that a person goes through in order to accomplish a goal. This is a useful for you and your team, to look at your website from the user's point of view and can be a key part in user experience design and optimization. Make sure to base your journey map on real data instead of assumptions.

Card sorting

If it’s possible to build a product only with the Must have features which you listed during the Ideation phase. Write each section or feature on it’s own card, and give the cards to 5 users.

Card sorting is a low-tech and inexpensive method used to understand how a user would organise and structure content in a way that makes sense to them. This exercise will help inform your low fidelity wireframe.

This will help you get a better understanding of the users conceptual model. Once you’re done with that, it’s time to build your first wireframe.

Low fidelity wireframe

Low-fidelity wireframes are basic wireframes that outline the blueprint of your app. With the low-fi wireframe, you want to communicate your product's “big idea” rather than the specific details.

You don’t need any fancy tools to build a wireframe. You can use a thick sharpie and papers or a whiteboard, or a digital tool like Miro, Mural, Figma, Adobe XD or any other prototyping tool.

I personally use Miro for low-fidelity wireframing most of the time.

Figma or Adobe XD can be a little bit too distracting, since these tools give you too much design control, which you don’t need at this stage.

High fidelity wireframe

High fidelity wireframes contains all of the information and icons and image placeholders that your prototype will have.

At this stage, you want to take into consideration typography, hierarchy, contrast, element positioning, and so on.

A great tip is to avoid thinking about colors at this stage, and build everything out in grayscale. This way, you will progress much faster, since you have less to think about. Also, when users see a wireframe in greyscale, they are more likely to give honest feedback. When you present a super polished prototype, users will hold back with their critique since they don’t want to hurt your feelings.

Test your wireframe with 5 other users, fix usability issues and move on to prototyping.

Prototype - Interactive mockups

If you don’t care about design control too much, and your app has only basic features, you might want to skip this step, and instead build a real product with a no-code tool like Softr, which uses predesigned components.

At this stage, you want to add color and final imagery to the project. You can start introducing brand identity elements, and maybe even simple interactions and transitions.

You can use Adobe XD, Figma or Sketch at this stage, but sometimes if your app needs to have some advanced features, like video backgrounds on a mobile device, you can use a high fidelity prototyping tool like Framer or Protopie.

Test your solution with 5 users again, fix the most important issues and move on to development.

Development

After design and validation comes development – the stage where you have to make technical decisions about the frameworks and technologies that you will use as well as the building your no-code web app.

Now it’s time to consider your no-code tech stack.

A tech stack is the combination of technology services, no-code tools, frameworks, and languages that make up the back-end (how it works) and the front-end (how it looks).

You should plan your tools depending on the features that you’re going to have, and what you learned from your customers.

A few great options for Web-app development are:

• Softr
• Bubble
• Webflow + Wized

Here’s a short summary of each.

Softr

Softr is really easy to use, and it has beautifully designed prebuilt components. With Softr, you build your app in minutes, using Airtable as your database. This tool is great for building MVPs, and getting your product out there fast.

The downside is that you don’t have much design control, and that there aren’t too many features available.

Bubble

Bubble is packed with features, and it is a professional no-code tool. Learning bubble will take some time, but with Bubble, you can build almost any web app. There is a huge marketplace of add-ons and you can manage both your front-end and your backend in one place.

Bubble is great for building MVPs that need to have some advanced functionality.

The downside of Bubble is that the apps are slow, and you don’t have too much design control.

Wized

Wized lets you turn your Webflow site into a Web app. This is the only web app builder that gives you full design control. Also, Wized lets you connect to any REST API out there. With Wized, you can build scalable, performant and secure web applications for millions of users.

Wized is great for both MVPs and large applications.

The downside is that Wized is a professional tool with a steep learning curve, and you need to know Webflow. Also, Wized only handles the front-end, which is both an advantage and a disadvantage. The advantage is that you can connect to almost any backend API and database, but the disadvantage is that you need to learn some additional tools.

Each of these app builders have showcases, which you should definitely check out before making your final decision.

Building your database

No matter which of these tools you used, you will need to architect your database. The database is responsible for collecting, storing, processing and managing collected data and providing secure access to that data.

If you’re using Softr, you will have to use Airtable as your database. Bubble has it’s own internal database, and Wized let’s you connect to any database out there.

Airtable is great if you’re building a small internal web app, or an MVP. However, if you need your app to be scalable, you should stick with Bubble, or Wized and a real no-code database like Xano, or Canonic.

Backend development

Backend development includes the database (above), the server, and the actual logic of your web application. Bubble and Softr handle some backend functionality, and Wized relies on other tools for that purpose.

If you need to build some advanced backend flows, there are some awesome no-code tools which you can use. Make.com, Xano and Canonic are all great choices for building a scalable backend.

Choosing the right tool for the job will ultimately depend on your project, and your experience level.

Test your web app and improve

Once you build your app, you definitely want to test it. You should first try to test all of the functionality by yourself, and once you removed any bugs you stumbled upon, start giving the app to users.

Start with 5 users just as you did with the user testing sessions previously, and iterate continuously.

Make sure to test all of the integrations and components of your app.

Conclusion

The no-code ecosystem has matured and evolved, and nowadays, you can build almost any web app without code. You can rapidly develop new solutions to transform business processes and meet ever-changing customer needs. In other words, no-code removes programming as the barrier between ideas and solutions.

Hopefully, this blog post gave you a good overview of the tools and processes that will allow you to launch your next web app without code.