How to Build a Web Application Without Code

Yohann Joyeux
January 30, 2021

You want to create a digital project, maybe a SaaS, a website or a mobile application but without coding.
Today this is possible thanks to the No-Code platforms and all the interconnected SaaS tools.
Let me guide you in the choice of this tools, as well as in the construction of your No-Code project. Step by step.

Is the No-Code for You?

If you are an individual or a young start-up, have an idea but no developer, then you should consider No-Code.

If you are an SME or a craftsman, you want to test a market but without having a big budget then you should be interested in No-Code.

Why No-Code Is Rising Now?

According to Forrester’s recent report, the low-code market could reach an annual growth rate of 40%, with anticipated spending of up to $21 billion by 2022 and also low-code up to $45 billion by 2025 according to MarketsandMarkets:

The advent of No-Code is explained on the one hand by the technology:

Maturity of No-Code offer
Verticalization & Specialization
Opening APIs
Interoperability

But also by a constant need for digitalization:

Fierce competition
Digitalization of all company services
Search for productivity
Citizen applications

The creation of a web application in No-Code is of particular interest to startups to validate a concept, small and medium sized companies to digitize at lower costs and all those who want to create a web application without programming knowledge.

When Should You Use the No-Code?

No-Code is not a magic solution for all your digital projects.

Real-time calculation software, software with strong regulatory constraints (banks, health, aeronautics…) are bad candidates.

But it may be the solution you should consider if you want to test a market quickly or if you want to create an MVP without recruiting a developer.

You may have a project, an idea, but you have neither the time nor the money to put together a technical team that will build your site according to your specifications.

There is a solution for you : start building your desired website by yourself with No-Code tools.
Analyze your needs, select your products and launch yourself for few dollars per month if you opt for paid No-Code solutions.
But don’t worry, there are free solutions or at very low cost.

Use No-Code when:

You have a small budget
You have no development skills
The complexity of your project is low
The legal environment of your project is not binding

Discover the Advantages and Disadvantages of the No-Code

The Pros of Using No-Code Plateform

No barrier at the entrance
No infrastructure to set up, no server to install. No-Code platforms are directly accessible.

Increased productivity
As there is no code, there is no unit test or integration test, the No-Code platform takes care for you of the coherence and the robustness of the software bricks that are put at your disposal.
You can deploy all your new features at your own pace without worrying about its development more move into production.

Lighter maintenance
The tedious work of software or hardware maintenance disappears for good.
No-Code platforms manage these update aspects for you while you concentrate on your project.

Enhanced security
If you can’t afford a security expert to audit code and access to internal systems, No-Code platforms do it for you since they mutualize costs.

Strong interoperability
In this context of competition, No-Code platforms must open up to other SaaS services to enable functionalities to be extended.
Thus, many platforms offer APIs and also allow interconnection via automation platforms such as Zapier.

The Cons of Using No-Code

Limited features
Your project is unique and needs a solution that is different from others. If all the features are present on the platform it’s great, but if you’re missing a part then you’ll have to find another solution.
On the other hand, if your project is already in production and regulations change (RGPD for example) you could not ask for specific code, it will be up to the platform owners if they want to evolve.

Limited customization
The platforms often offer a wide choice of customization and parameterization, but they are obviously limited.
Moreover, it is not uncommon for the design and ergonomics to be quite similar between projects on the same platform, which is not always a good point for the originality of your project.

Sustainability of the platform
The No-Code platforms are quite recent, as the movement too and still many actors will enter and disappear as well.
If you bet on the wrong horse, your whole project may be in jeopardy.

The code is not yours
All the time spent on your project, within the platform, the code does not belong to you. If there is a change in the strategy of the platform or you want to migrate to another platform, you can not recover the code, but maybe the data if you are lucky.

The platforms are not Free nor OpenSource
Most of the time, the No-Code platform are free for a trial or limited features but if you want to go deeper, you will probably need to paid for that tools or services. Furthermore all these platforms are in commercial use, you cannot have for your own, in premise or in OpenSource mindset.

So What Should You Do to Take Advantage of the No-Code?

It is up to you to decide what strategy to adopt, but I can help you to make an informed decision.

You can look at whether a solution or a set of solutions may be right for you. It is up to you to study each of the existing solutions.
I help you in this process by presenting you the best No-Code solutions, studying their characteristics and giving you my opinion.

You can also choose a hybrid solution that I recommend if your project is not a simple, basic project. This solution allows you to combine the advantages of No-Code without the disadvantages.

The idea is simple and relatively easy to implement.
But you must first clearly identify your different needs and your target audience.

Do you need to sell products or services? Do you want to set up a newsletter or SMS notifications? Do you need an electronic signature or file storage space? Do your customers come to buy your products/services or are they contributing members? Do you need a CRM for your sales team?

Once this work is done, you have surely identified the most relevant existing No-Code tools, but you realize that there is not a single tool that exactly meets your needs. It’s usually a set of tools. So what would you do?

It’s very simple, once you know what you need as No-Code tools, you need to set up an orchestrator that will monitor the different events on these tools and allow the triggering of workflows to perform business tasks automatically. This is the role of No-Code Automation Tools such as Zapier, IFTTT, Automation, etc…

What Does This Hybrid Solution Look Like?

Whether your project is a mobile application or a website, you need to determine:

Who are your users?
Is it internal staff in the case of a tool to improve the productivity of your employees. Is it a site for selling to the general public or to a B2B community such as doctors or lawyers?

What services do you want to offer your users?
This is where you imagine screens, forms, static or dynamic pages and all the interactions between your project and your users.
In general, you can start by modeling your project with or without the help of a designer. You can help yourself with my selection of No-Code design tools.
It is also at this stage that you identify the No-Code tools you need to provide these services to your customers.

Which tools you need to work with?

FRONTEND SIDE

This is the visible part for your customers, it can be a website or a mobile application. You can use a website builder or an app builder. Discover my selection in the related topics.
In this part you would manage most of your interactions with your visitors outside emails campaign or social networks.

AUTOMATION TOOL

Your project cannot focus solely on the interactions between the project and your client.
You will have to perform background processing, automatic tasks, nightly batchs, asynchronous processing… This is the time to choose the No-Code automation tool that will help you to perform all these necessary processes.

CRM
You also need to set up a CRM if your goal is growth.
You can manage 5 to 10 customers with an Excel table and copy and paste, but what will you do when they will be 100, 500, 2000?
Identify a CRM and connect it with your project to allow you to track your customers, your deals, improve sales performance and make tables to measure and monitor your business.

SAAS TOOL
Automation tool will build business rules, conditions and workflows between all your needed SaaS tools. They support business functions that you will not spend time to code internaly. It could be a newsletter, sending SMS or setting eSignature…

Learn How to Build a Web App Without Coding

I will explain how to set up your No-Code project.
I will list the severals possible interactions on the front side and the different treatments on the automation side.
I also explain how to take advantage of all these interactions by automatically feeding a CRM tool.
This is not an exhaustive list, I try to cover 80% of the usual needs, but once you understand the idea, you will certainly be able to adapt it to your specific need.

The architecture of the No-Code is quite simple.

Your customers will access to your web or mobile project builded with a No-Code Builder. They will interact with your project for the navigation or products and when they send form they will trigger an event on the automation platform, that will perform some specific task like save a file, send a slack, … you can find more than 1 000 SaaS application open for automation.

Where Should You Start?

If you have followed my advices, you should already have identified what kind of services or products you’re going to offer or sell to your customers.

The first thing you should do, now, is to identify the different screens in your project. This will lead you to structure the navigation and identify the data and interactions on each page.

If you have time, if you still hesitate or if you need to convince a future partner or investor, then you will surely need to create a mock-up of your project.
The mockup also lets you exchange with a designer if you’re lucky enough to have one.

I suggest you check out my selection of design creation tools.

What Kind of Interactions Would You Set up on Your Front Side Project?

Depending on your project, you will have to make a choice between a simple Landscape page, a website or ecommerce builder or a mobile app builder.

Go see my selection made for you regarding your project’s needs about front side builders.

But in any case, you will have to set up interactions, so let me introduce you the several kind of interaction you could do with those builders.

1 - Display Static Content

This is content (Text, Image, Video…) that is always the same whatever your customer is or do. I’ll take a real estate website as an example, the static content could be the pages : “general terms of use”, “terms and conditions”, “legal mentions” or “privacy policy”.

Use your project builder to create the structure of your site which usually contains at least :

a home page
a navigation menu
the different pages available

We will not see the notion of user access which could be useful to limit the visibility of a page or some content of a page according to the user privilege.

We also distinguish the connected user from the one who does not, also called a visitor.

2 - Display Dynamic Content

It’s also content, all the same, but it is generated dynamically.

The data may come from a database or from a webservice and will be displayed using templates that will automatically generate the html code of the page.

Thus when you will modify the template, you will update the display of all ads.

Example for a real estate site The dynamic content would be the list of property ads and the ad's details. Each ad has been set into the database and you don't need to create a page for each ad, you will use a template for that. In the same way, there is the user's ads page and the user's details page.

3 - Search, Filters & Sorts

SEARCH

The search allows you to find the product or service in your database according to a text field. It may be accompanied by filters and return a search result.

FILTERS

Filters are additional criteria that can be combined with the search for greater precision. These criteria are linked to the characteristics of your product or service.

SORTS

Sorts are generally available at the search result level and allow you to order the results according to one or more specific criteria.

Example for a real estate site There is a text search to find the real estate according to the title or the content of the ad, but also an advanced search section with criteria such as the price or the number of rooms. The result of this search could be sorted by ascending or descending price.

4 - Forms

Forms are the basic html elements that allow information to be exchanged from the user to the server. They allow the website or mobile application to interact with the user. Forms will help to create content, send information or activate a backend automation process.

Search, Filters and Sorts are some examples, but they are everywhere as soon as the user triggers an action for which the server must react and respond such as:

The contact form for sending a message
The registration form to book an room
The online payment form
A form to trigger something…Etc.

Example for a real estate site The forms are: registration; authentication (login); search; subscription to the newsletter; add, update or delete an ad; add ads to favorites, create an email alert...

5 - User Authentication

Depending on your needs, you can allow visitors to create an account and thus become a user. This is often the case when you are selling something.

In this case, you must provide the following services:

Register
Login / Logout
Forgot your password?

You can enhance security by:

Request confirmation of registration by email or SMS
Enforce a strong password
Use two-factor authentication (2FA)

6 - User Profil

USER DATA

Users must be able to update their personal information on a profile page, such as their name, first name, address, etc. In the user data, you can also find “My Favourites” items or “Liked” items.

With the RGPD they should also be able to recover their data and delete their account.

USER MEMBERSHIP

If you offer a subscription, they should also be able to modify or delete it.

ROLE & CAPABILITY

Depending on your needs, you may have to manage different types of user. In this case, you will have to manage different roles and capabilities.
A capability is the right to do something – for example submit an ads.
A role is composed of several capabilities and we will attach a user – for example: admin or real estate agent.

7 - User Settings / User Notification

USER SETTINGS

Users settings page could also include notification preference but it can be two different pages. In particular, you can find the payment method and frontend display settings.

USER NOTIFICATION

In the notification page, you can find communication preferences (SMS / email), newsletter subscriptions, automatic alert systems or browser notifications.

Example for a real estate site Users could be individual person or real estate agency with different kind of profile and rights. But both type of users could register, login, change password and access to a profile page and a user setting page. Users have also access to "my Ads" page where they can manage their own ads.
There will be 2 categories : sellers and buyers. Sellers have to subscribe to publish an ads instead of Buyers can add ads to favorite or create "ads alerts" based on ad criteria.

8 - User Cookies

If you want to store user data without persistance in your database, you can use cookies. Cookies store data in the browser session during a limited time period. It can be your login name or shopping cart items. Those data are readable by the server like invisible forms send by the user.

With RGPD, all the used cookies must be declared and validated by the user when he comes to your site.

9 - Geolocation

With the consent of the user, you can grab the user’s location and provide a better experience based on the distance of your product/service.

How to Orchestrate All These Interactions on the Backend Side? How to Provide the Service and Update your CRM?

Now it’s time to understand how all these user interactions will trigger business process without a line of code.

Let’s talk about Webhook and Automation. They represent your business actions behind the frontend users’ interaction. Most of the time behind each form send by user, you should trigger a business workflow.

Let me explain better and show you how to put all the pieces together.

Automation Tools

Automate platforms allow you to connect at least two applications to make them communicate together in a simple and intuitive way.

Those platform offer a visual tool with drag & drop where you can set Triggers and Actions. But you can also set Delay and Conditions for more complex workflows. You can create simple or very complex workflows without needing to write a single line of code. Amazing !

You could find pre-defined templates to help you with popular integrations.

Here is for example a simple and a complexe automate workflows :

Automate workflows work in two different ways.

1 – APP EVENTS

Those are predefined events available when you connect and select an App.

For example, with Gmail app, you could trigger a predefined event like “New label” or “New Email”…

2 – WEBHOOK EVENTS

Those are for your custom app events. Your project may not be already a famous App that it is already integrated in Automate platforms.

So you will not find predefined events for your application. But you can use webhooks to be integrated with Automate platforms.

Webhook event can be triggered either by sending data to Automate Platform (Catch Hook) : this will be the case when we will send forms OR by a recurrent call from Automate platform to a specific url on your app (Retrieve Poll) which is a more complexe case that will not be used now.

CRM

Most of the time you will focus all your energy on the project features to provide the best service and experience for your customers.

And you right, they are the most important ! But you should not forget the advantages of a CRM for your commercial performance.

Thus you should think about it in the early stages of building your project. This will help you to centralize customers information, monitor you commercial activities, follow your company’s turnover and make graphs and stats to better understand your customer behavior.

Check Out My Selection of the Best SaaS Softs to Meet All Your Business Needs for an Incredible Customer Experience

I have gathered the best SaaS software for you, taking care to select the best potentials to integrate this hybrid No-Code project architecture.

I present each software to you with screenshots, prices, features but also indicators on trends such as reviews, social networks, search stats … and my personal opinion.

Each of my suggestions is obviously compatible with at least one existing automation tool. I have gathered tools in 4 sections.

1 - Building Your No-Code Project

I include in this section all the tools you will need for the construction of your No-Code project. From de Design.

Design Tools

The design stage is not mandatory but it should help to structure your ideas, navigation and allows to validate the UI, UX and the graphic charter.

WebSite Builders

Website builders will be the cornerstone to start your project and especially to create the frontside visible from your customers.

WordPress Builders

I present to you the different tools for the building, some are proprietary and others free like WordPress.
My preference is for WordPress, as you know, but I will show you the other tools so that you can choose according to your preferences.

WordPress Hosting

As I have suggest you to use WordPress, then need then to introduce you the best WordPress Hosting services.

Mobile App Builders

Those are mobile app builders to create apps that are registered in the Apple and Google stores.
My opinion is that for a Web project that could be visible on PC, mobile, tablet, I advise you to create a responsive website.
But if your needs are really related to the mobile device, then you have no choice, but mobile app is much more complex and restrictive.

E-Commerce Softwares

E-Commerce system could be a nightmare if you have to implement all the needed features like payment, sales codes, returns, etc..

A smart choice will be to integrate an e-Commerce solution to your No-Code project. Have a look on my selection for you.

Automation Platform

Automation Platform belongs to the main hybride strategy I suggested to you for a simple way to build your No-Code project.

But don’t follow blindly my advices, it’s up to you, just have a look and make up your own mind.

Form Builders

Form Builder is also an important element of the hybrid No-Code solution because it is the most common way for users to exchange informations with your project. Choose carefully and let’s have a look on my selection for you.

2 - Marketing & Sales

I include in this section all the tools you will need for the sales & marketing of your No-Code project.

CRM Platform

CRM will help you to keep eyes on your customers, your sales, your commercial team activity…all together in one place.

Email Marketing Tools

Email Marketing Tools will help you to rengage inactive customers, keep your audience up to date with your last products and always keep a connexion with your loyal followers.

Chat Tools

Chat Tools gather Chat Bot and Live Bot. Visitors on your web or app project may have a question before register or need informations about a wished product and if they don’t have a quick answer at this moment, they could leave and you have missed the deal.

Chat Tools are here for that, allow predefined questions/responses and/or a live chat with you or your commercial during office hours.

Calendar Tools

Calendar Tools will give you the opportunity to your visitors/customers to book an appointment directly on your online web/app page.

Maybe your business need to get some informations from your customers before rendering the service and thus you could let them book a quick meet with you or your commercial.

Social Media Management Tools

Social Media Management Tools will help you to schedule the publishing of your interesting content on all your favorite Social platform. This will save a lot of time and always be present in time for your customers.

SEO Tools

SEO Tools are useful to optimize traffic on your website, naturally without spending a penny but it could take a long time before watching results. Nevertheless, it’s a good long term strategy that you should set up if your business depends on what people are searching on Google or others.

Legal Tools

You can’t ignore Legal aspects if your project is not for internal use.

If you have visitors or customers, you need to be compliant with laws in the country where you do your activity. You need to pay attention to GDPR, Cookies consent, Privacy Policy…etc

Affiliate Platforms

If you are a startup or a small business, you may not have an army of commercials searching new customers every hours of every days for you.

You probably have a small team or just yourself. Then think about affiliate program. This could send you many new clients without having to hire anyone. Just sharing the income from the sale. I think it’s a fair and smart way to start your business when you just starting and you need quick turnover.