what are the tasks to develop web application

How to build a web app: A beginner's guide (2021)

Past: Joe Johnston

Apr 23, 2019 | 22 minutes read

Picture show by Med Badr

In this post, I'yard going to show y'all EXACTLY how to brand a spider web app.

In fact, this is the process I've used, revised and perfected over the last 5 years.

I've used this exact process, or a version of information technology to build over 15 applications of all shapes and sizes. For me, this is 100% the best way to build spider web applications.

But, before we start the tutorial, a quick recap on what we define equally a web application at Budibase.

What is a web app

An interactive calculator programme, congenital with web technologies (HTML, CSS, JS), which stores (Database, Files) and manipulates data (Crud), and is used by a team or single user to perform tasks over the net.

In that location is a lot of defoliation effectually what exactly is a web app. For the purpose of this post, nosotros feel our definition higher up simplifies what a spider web app is. If you're notwithstanding unsure, nosotros've included examples of what we believe are web apps, and what are not, below:

Ok, now nosotros're on the aforementioned page, allow's jump into prerequisites.

Prerequisites

To make a data-centric web app from the bottom-upwards, it is advantageous to empathise:

1. Backend language (e.chiliad. Python, Red) - command how your web app works
2. Spider web forepart (HTML, CSS, Javascript) - for the look and feel of your web app
3. DevOps (Github, Jenkins) - Deploying / hosting your web app

If you don't have whatever experience with the points above, don't worry. You have ii options:

1. Learn the points above - there are lots of resource online to aid y'all. I'd recommend Codecademy .
2. Apply a web app builder similar Budibase - As a builder, Budibase will remove the need to learn a backend language. On elevation of that, Budibase will too take intendance of a lot of your DevOps tasks such every bit hosting.

Moving on. The time has arrived to quickly dive into the 12 steps for making a web app.

Are you ready? Permit's do this!

How to brand a spider web app in 12 steps (four stages)

Ideation phase

i. Source an idea

2. Market research

3. Define functionality

Design stage

4. Sketch your web app

5. Plan your workflow

6. Wireframe the UI

7. Seek early validation

Development stage

8. Builder your database

9. Develop your frontend

x. Build your backend

Launch stage

eleven. Host your web app

12. Deploy your web app

Step 1 – Source an idea

Before making a web app, you must first sympathize what y'all intend on building, and more importantly why?

The idea procedure for many is the toughest office.

Your idea should stem from solving someone'due south problem. Ideally, your own trouble.

It's of import that you cull an thought which interests you. Involvement is cardinal to fuelling motivation which is crucial when making a web app. Information technology takes try building spider web apps and it'southward important you have fun during the process.

Ask yourself:

• How much time practice I take to build this app?
• What am I interested in?
• What apps practise I relish using?
• What practice I like nigh these apps?
• How much time/coin will this app save or generate for me (equally a user)?
• How much will it improve my life?

If you are having a difficult time finding ideas, hither'south 6 micro saas ideas .

Step 2 – Market Research

One time you've chosen your idea(s), it's important to inquiry the marketplace to run into:

1. If a similar production exists
2. If a market exists

The number 1 reason startups fail, is down to the failure to achieve production-market fit.

Marc Andreessen divers the term product-market fit every bit follows:

"Product/market fit means being in a proficient market with a product that tin satisfy that market."

To apace find out if a similar spider web app exists, use the following tools to search for your idea:

1. Google
2. Patent and trademark search
3. Betalist
4. Production chase

If a similar product exists, don't worry. This tin be a sign a market for your idea exists. Your future competitors have laid the groundwork, educated the market. It's time for you to swoop in and steal the thunder.

If a similar product does not exist, it's a possibility you lot've struck lucky - you lot masterful innovator 👍.

On the other hand, it'south a possibility someone before has ventured downwardly this path and hit a expressionless-stop 👎.

Nobody wants to feel that, so it'due south important to dive deep into the market and source the wisdom of:

1. Your Web App's target market - Share your spider web app idea on forums related to your target market. If y'all know anyone who works within your target market, explicate your idea to them. The more you talk and receive validation from your target market place, the better.

2. Google Trends - A quick search of your web app thought will reveal relating trends.

3. SEO tool - I'd recommend MOZ/Ahrefs. Google's keyword planner will suffice. Write a list of keywords relating to your spider web app. If information technology's an 'OKR tool', use the tools to search 'OKR tool', 'OKR app', and 'objectives and central results software'. If the SEO tool indicates there are lots of people searching for your keyword terms, this is a small indicator you have a target market.

4. Social Media - Jump over to Twitter/Facebook groups and nowadays your idea to your target marketplace.

5. Events - If there is a local event in your surface area alluring people from your target market, become to it. Share your idea and record the feedback.

After completing the above steps, you should have plenty information to understand if there's a market place for your product.

If there is a market place for your product, and there's too established competition, it'due south of import to research them.

Step 3 - Ascertain your web apps functionality

You've got your idea, yous've validated the marketplace, it'due south now time to list everything you want your app to practise.

A common mistake here is to get carried away.

Your web app is Non a swiss army knife. Information technology won't have all the features and functionality of Salesforce and it doesn't have to.

I echo, don't get carried away. The more functionality you add, the longer it volition take to build your web app. Quite often, the longer a web app takes to build, the more than frustration you'll experience.

I of the most important aspects of making a spider web app is having fun, enjoying the ride, and celebrating the small wins.

Only define functionality which solves your target markets issues.

I promise I'm not hither to kill your dreams. Think, you're spider web app is a piece of work in progress and the beginning goal is version i. Information technology will still take cool features and delight your users, merely you must proceed things elementary.

Moving on.

For direction, I've included a list of basic functions required for a elementary CRM app.

• Users tin can create an account
• Users can retrieve lost passwords
• Users can modify their passwords
• Users can create new contacts
• Users tin can upload new contacts
• Users tin can assign a value to contacts
• Users can write notes under contacts
• Users can characterization a contact equally a lead, customer, or associate
• Users tin filter contacts by lead, customer, or associate
• Users tin view the full value of leads, customers and assembly

The above list will assist you define your features. One time yous're done, roll upwardly your sleeves.

Information technology's time to get creative!

Moving from the Ideation stage, to design stage.

Stride iv - Sketch your web app

At that place are multiple stages of designing a web app.

The commencement stage is sketching.

My favourite and the quickest mode is to use a notebook (with no lines) and pen/pencil. Old school!

Subsequently step 1,ii and 3, you should have an idea of what your web app is, who your users are, and the features it will take.

Sketch out the wireframe of your spider web apps UI - it doesn't accept to be verbal - this is just a sketch.

When sketching, consider the following:

• Navigation
• Branding
• Forms
• Buttons
• Whatsoever other interactive elements

Sketch dissimilar versions of your web app. Consider how your web app'due south functionality will affect the overall design.

Comment your sketch and outline how your app should work.

Taking notes volition assist you lot analyze and understand why y'all've designed certain elements at a later on phase.

Once over again, don't get carried here. Your sketch is for communicating and experimenting, not selling. Overcomplicating the design at this stage will merely lead to frustration.

After sketching your app, it'due south fourth dimension to motion on to step five.

Step v – Plan your web apps workflow

It's fourth dimension to put yourself in the shoes of your user. In footstep 5 nosotros're going to plan your spider web apps workflow.

At present is the time to go dorsum to step 2 and wait at your market research. Accept your listing of competitors and sign up to their free trials. Have a quick play around with their product.

Write notes on what you thought was practiced and what you thought was bad. Pay particular attention to the workflow.

Subsequently you've finished analysing your competitor's web apps, it'due south time to write downwards different workflows for your app. Consider the following points:

• How does a user signup
• Practise they receive a verification email
• How does a user login
• How does a user modify their countersign
• How does a user navigate through the app
• How does a user change their user settings
• How does a user pay for the app
• How does a user cancel their subscription

All of a sudden our ane-folio web app turns into a ten-folio web app.

Write a listing of all the different pages your web awarding volition have.

Consider the different states of pages. For example, the homepage will have two states; logged in and logged out. Logged in users will see a unlike page than logged out users.

Step 6 – Wireframing / Prototyping Your Spider web Application

Ok, it'due south time to plow those sketches and that new-establish understanding of your web application into a wireframe/prototype.

What is wireframing / prototyping

Wireframing is the procedure of designing a blueprint of your web application. Prototyping is taking wireframing a pace further, adding an interactive display.

The decision is to wireframe or prototype is down to yous. If you accept the fourth dimension, I'd recommend prototyping every bit information technology will go far easier to communicate your web app when seeking validation.

You lot tin prototype/wireframe using the following tools:

• Sketch (macOS)
• InVision Studio (macOs)
• Adobe XD (macOS, Windows)
• Figma (Web, macOS, Windows, Linux)
• Balsamiq (macOS, Windows, Spider web)

I recommend you create a design organization / style guide first. You can observe inspiration at UXPin . Design systems improve blueprint consistency. But it's not required.

Step 7 – Seek early validation

You lot've at present got a beautiful wireframe/prototype which visually describes your spider web app.

Digital high five ✋.

It's time to show your cute wireframe to the globe. At this stage nosotros want constructive feedback.

Merely asking your friends would they use your new web app is not plenty.

You should start with a small number of representative users. Get to your target market's forums, watering holes, their places of work and verify the problem with them, and nowadays your solution.

Try to build a rapport with these representatives every bit they could become your customers.

I like to use this phase to test my sales pitch - the ultimate tokens of validation are pre-launch sales.

Takes notes and document all feedback. The learning from these meetings will help straight the development of your MEP (Minimal Excellent Product).

Ok, now you've got great feedback and product validation. Information technology's time to start edifice your web app.

Earlier nosotros outset the evolution stage.

Before nosotros make our spider web app, I would like to share the following tips:

1. Endeavor to get a small-scale section of your app fully working. What we would call a "Complete Vertical".
   • Building the smallest possible section will permit y'all to piece all the $.25 together, and iron out those creases early.
   • You will go great satisfaction early on by having something working - not bad motivation.
   • Create things that you know you will throw away later on - if it gets yous something working at present.
2. At the start - wait things to change a lot equally you learn and discover what you oasis't idea virtually.
   • Accept faith that your app will stabilise.
   • Don't be afraid to make large changes.
3. Spend time learning your tools.
   • You may feel like you are wasting your time, reading, or experimenting with "hello world". Learning the right style to practise things will have a huge positive, cumulative effect on your productivity over time.
   • Where possible, "Go with the grain" of your tools. Realise that every bit soon as you lot footstep out of the normal flow / usage of your toolset, you are on your own and could be in a deep fourth dimension sink. There are always exceptions to this of grade!
4. Don't avert issues that demand to be fixed.
   • Face your bug caput on - they will never go away and will only grow in stature.
   • However, If things are even so likely to change - its all-time to spend as piffling time every bit possible on things… It's a tricky balance!

It'due south time to consider your database.

Exciting times!

Step 8 – Builder and build your database

Then, nosotros know roughly our web application's functionality, what it looks like, and the pages required. Now information technology'south time to determine what information we will store in our database.

What is a database

A database is simply a drove of information! Data can be stored to deejay, or in memory on a server, or both. Y'all could create a folder on your difficult drive, store a few documents, and call it a database.

A Database Direction Organisation (DBMS) is a arrangement that provides you with consistent APIs to (most unremarkably):

• Create databases, update and delete databases
• Read and write data to databases
• Secure access to a database past providing leveled access to different areas and functions

What data you need to store and what your users need to do, will determine the type of database required to run your web app.

Database types

There are many types of database for many unlike purposes. A web app will most commonly apply one of the post-obit:

SQL

You should employ a SQL database if your data is very relational. Your data is relational if you have multiple, well defined record types that have relationships between them. For instance, a "Customer" may have many "Invoices" stored against their tape. Typically, yous would create a Client table and an Invoice table - which could exist linked together by "Strange Key" columns. Eastward.g. Customer.Id = Invoice.CustomerId.

SQL databases have an extremely powerful query language that allows you to nowadays your information in all sorts of useful ways.

They have been around for decades, are very well understood, and normally a prophylactic choice. MySQL, Postgresql, Microsoft SQLServer are some of the near mutual - along with many more modern offerings.

The downside of SQL databases is that you must declare all your tables and columns up front. There can be a lot of overhead to manage. If you have never used one before - yous're in for a pretty steep learning curve. However, there are plenty of learning resource bachelor, and information technology's e'er a neat skill to have.

Certificate Database

You should use a document database if your data is non very relational. Certificate databases shop "documents". Each record in your database is but a big blob of structured information - often in JSON format.

If you need to store relationships betwixt your records, you will take to write lawmaking to manage this yourself. However, many other aspects of using certificate databases are much simpler. Your database can be "schemaless" - meaning that you do not accept to declare your records' definitions up front.

By and large speaking, the bar to entry to a document database is much lower. They also tend to exist much more scalable than SQL databases. They usually offer some querying capabilities, although sometimes non as powerful as SQL.

Examples of document databases are: MongoDb, CouchDb, Firebase (serverless), Dynamo Db (AWS). In that location are many.

Determine how to segregate your data

Each of your clients has their own, private dataset. One of the worst things that tin happen to your app is for one customer's information to be seen by another client.

Even if there is but a small-scale amount of not-sensitive leaked data, and no damage is done, an outcome like this will massively erode trust in the security of your app.

You must builder a solid strategy for segregating your clients' data to make sure that this never happens.

Broadly speaking, you take two options - Physical Separation and Logical Separation.

Physical separation

Every one of your clients has a dissever database (although could share a database server with others). This makes it much more hard to make a error that leads to data leakage.

Pros:

• Most secure
• More scalable

Cons:

• Managing, maintaining and upgrading is more than circuitous
• Query all your clients' data together is more difficult

For example, listing all Invoices in a database will only render Invoices for one of your clients. In order to get another Client's invoices, you need to connect to another database.

Since each of your customer'due south data is in its own database, yous tin hands spread them all across many database servers, without the need for "sharding". Your app volition be much easier to calibration this way.

The code you will need to write:

• When creating a new customer, yous need to create a new database and populate with any seed information.

• You need to keep a record somewhere of all your clients, and how to connect to each client's database.

• If yous need to upgrade your database (eastward.g. add together a new tabular array), you lot demand to lawmaking to upgrade each separately.

• If you lot need to query all your client's data into one, you need to pull the data out of each and amass it.

Logical separation

All of your clients are stored in one giant database.

Every fourth dimension you demand to get data for a single client, you lot must remember to include a filter for the customer. E.g. 'select' from customers where customerClientId = 1234"

Pros:

• Easier to get started
• Easier to maintain and upgrade
• Can easily query all your clients' data with 1 query

Cons:

• Like shooting fish in a barrel to make a mistake that will result in a data alienation
• More than difficult to scale

You at present only have one database to manage. Setting this up and connecting to your database is piece of cake. Your speed to market increases.

When you demand to upgrade your database, you can do and so with a few clicks, or by typing a few commands. Information technology's very like shooting fish in a barrel to add together new features.

As you gain more users, your database volition grow to millions of rows. Put some effort into how your database handles this extra volume and load. You will take to start tuning your queries.

When you're under pressure, it is so like shooting fish in a barrel to forget to include that "where clientId = 1234" filter.

Doing so could consequence in a business ending data alienation.

Ensure your database is secured

You should look into best practices for securing your item database. Some databases come with a default ambassador login, which people oftentimes forget to change. This could leave your information open to the earth.

From the start, you should create a login with "Just Plenty" access. If your app only reads and writes data, so it should authenticate to your database using a login with simply data reading and writing access.

Pace 9 - Build the frontend

Note: In reality, you volition build your backend and frontend at the same time. But for this post, we'll keep it simple.

What do we mean by the frontend?

The Frontend is the visual element of your spider web awarding. It defines what yous come across and interact with. The frontend is adult with HTML, CSS, and JavaScript.

If using server pages, getting started is super easy. Your backend framework is all ready and set to first building. This is where the huge benefit lies with server pages.

With SPA, it's a little trickier.

First, you need to set up your development environment. The components of this will be:

1. A code editor, such equally VS Code, Sublime Text

2. A compilation, and packaging framework:

   1. Webpack

   2. Gulp

   3. Grunt

      This is as well used for serving and "Hot Loading" your application at development fourth dimension, on a nodejs spider web server, running on localhost.

3. A frontend framework (strictly not necessary, simply highly advised unless you are an experienced frontend developer):

   1. React

   2. Ember

   3. Vue

   4. Svelte

      The listing is endless!

4. Configuring your packaging tool to talk to your backend - which is most likely running on a dissimilar port on localhost. Usually, this is done using Node's HTTP proxy. Near packaging solutions have this pick built-in, or bachelor as plugins. This point normally gets people stuck, and may need a diagram. Retrieve - if you write your backend API in C Sharp (for instance) and so at dev time, you volition be running it on a local web server, through your code editor. I.e. your frontend and backend are running on 2 different web servers, in dev. However, in production, your frontend should (probably) be running on the Same web server as your backend - mainly because you want them to run under the same domain.

   This ways a few things

   1. At dev time, your frontend should make API requests to its own (Nodejs server - due east.g. Webpack dev server). This Nodejs server should then proxy all "/api" asking to your backend server.
   2. When building for production, you demand to get your compiled frontend files into your backend server - so they can exist served equally static files. You can re-create and paste the files in when you deploy, but you will want to set up some sort of script to practice this.

There is always a meaning time required to gear up your dev environment for a SPA. There are plenty of boilerplate templates out there for your frameworks of pick. However, I have never written an app that has not eventually needed some custom code on top of the boilerplate.

Still, I always choose a SPA.

• The end product for a web app is a much more usable application.
• When you lot are up and running with your dev environment, I discover SPAs much more productive to piece of work with - which is more likely to do with the capabilities of mod javascript frameworks than annihilation else.
• Writing a SPA is really the only manner to make a Progressive Spider web Application.

You should at present take a better idea of how to setup your frontend and define the look and feel of your web app. In most cases I build the fontend and backend together.

Moving on to the backend.

Step 10 - Build your backend

What practice nosotros mean by the backend?

The backend is typically what manages your data. This refers to databases, servers, and everything the user tin can't see within a web application.

Building your backend is 1 of the toughest parts of spider web app development. If you lot feel overwhelmed, a tool like Budibase can take away many of the complexities - including the follow tasks.

If yous feel confident, go on on.

When building your spider web app, you need to cull between:

1. Server Pages (Multiple Page Application)
2. Single Page Application

"But isn't this the frontend?" - I hear you say. Yes! But your choice will touch on how y'all develop your backend.

The principal jobs of the backend will be to:

• Provide HTTP endpoints for your frontend, which let it to operate on your data. E.thou. Create, Read, Update and Delete ("CRUD") records.
• Authenticate users (verify they are who they say they are: aka log them in).
• Authorization. When a logged in user makes a request, the backend volition decide whether they are allowed (authorized) to perform the requested action.
• Serve the frontend

If you lot have chosen Server Pages, your backend will also exist generating your frontend and serving it to your user.

With a unmarried page app, the backend will only serve your static frontend files (i.eastward. your "Single Page" and it'due south related assets).

When choosing your backend:

• Go with what's familiar.
• Endeavor Budibase
• Server Pages / SPA should inform your conclusion of framework choices within your chosen language. For example, a SPA volition merely crave an API only framework. Server pages need their ain framework.
  • Django
  • Express
  • Flask

Login/User & Session Direction

• How will users authenticate?
  • Username and countersign?
  • Open ID (i.east. sign in as Google, FB, etc)
• Be sure to read up on security best practices. I highly recommend: OWASP
• What user levels will you lot create in the system?

Environments. You volition usually need to create multiple environments. For example:

• Testing - for all the latest development features.
• Beta - to give early releases to clients.
• Product - Your live organization.

Step 11 - Host your spider web application

What is hosting

Hosting involves running your spider web app on a particular server.

When using Budibase, this step can exist automated with Budibase hosting . With Budibase, y'all are still required to buy a domain.

If you lot are non using Budibase to host your spider web application, follow these quick steps: \

1. Buy a domain - Namecheap
2. Buy/Setup an SSL document - Let's Encrypt
3. Choose a cloud provider:
   1. Amazon
   2. MS Azure
   3. Google Cloud Platform
   4. Lower toll: Digital Ocean / Linode - if you are happy managing your own VMs
   5. Zeit At present, Heroku, Firebase are interesting alternatives that aim to exist faster and easier to get things washed - you lot should read nigh what they offer.

Choosing i of these hosting options volition almost certainly provide you with everything you demand. They have aplenty documentation and customs support, and are generally reliable options.

Step 12 - Deploy your spider web app

You've sourced your idea, validated it, designed and developed your spider web app, and chosen your hosting provider.

You're now at the last step. Well washed!

The deployment step includes is how your spider web application gets from your source control on your computer to your cloud hosting from step 11.

How does your application get from Source Command / Your computer to your cloud hosting provider?

The following development tools provide continuous integration and will aid you with deploying your web app to your deject hosting:

1. GitLab
2. Bitbucket
3. Jenkins

In that location are many of course.

To start with, you tin can just deploy directly from your machine of class.

And that'southward information technology. You accept made a web application. Well done. Y'all should take some fourth dimension to celebrate this accomplishment. Y'all're the proud owner of a new web app.

---

I hope y'all accept enjoyed this tutorial. I volition continue to update this tutorial and refine the process of how to make a web app.

From the team at Budibase, give thanks you.

If you are interested in Budibase, delight sign up below and join the community. The builder will be open source, and you lot tin can benefit from automated hosting and a user management platform.

Awesome, correct!

Thanks for tuning in and good luck on your journey.

grazianofoxys1977.blogspot.com

Source: https://budibase.com/blog/how-to-make-a-web-app/

Share this post