There are definitely more than seven things you need to know when building a web application but we have to start somewhere. In this blog post I will look at seven aspects of web development that you should consider before creating a basic web application. Lets get started.
The login page and user authentication
The login page is often the first entry point to your web application. Of course this is not always the case especially if your web application is open for everyone. Generally speaking however your web application would need to limit access to users. To do this the login page is a must. You will need to know how to build a basic login page and connect it to your back-end. Check out these awesome logins styles here. Of course you will need a user’s table in our database. And depending on what language you use you will need to handle the form submission and users authentication.
User authentication also entails session management. The user login state will need to be maintained throughout the use of the application until the users logs out or until a certain time passes. After the user logins you would need to consider and determine what the user has access to. You can usually do this with user access levels. So you can have three levels member, editor, admin it really depends on your application. For e.g. in a company setting the user types could be related to departments such as HR, IT or Sales.
Next, once you have the user type down you need to limit access to certain features. You can do this via a permissions module. So you have a list of permission and you can grant certain permissions to certain users types. So this is a kind of group assignment workflow.
You have groups which are user types and each group has default permissions attached to them. You can always add or delete from individual users but having defaults permission is a simple way to manage permissions en masse.
Displaying records and information
There are many ways to display data in your web application. The basic building blocks are lists and tables. A list can be simple as a list as shown below.
<ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul>
Or it can be more complex as a list of div elements. With every div elements having its own structure and layout. You can also use tables.
With a table you can create a basic table with simple styling or you can create complex tables or multi functional tables.
A basic table is pretty simple and straight forward to work with. You get your data and display it to your users in a simple format. Check out some simple table styles here.
A multi-functional table generally requires pagination first and foremost. You can also add search and filtering. You can also have action buttons that add more records to the table or remove records from the table.
You can go further too. Some of your rows can expand to show more data. Clicking on a row in your table can carry you to one place or each row can have different actions points. Also you can have a details popup with options based on the row you clicked on. So many ways to deal with tables and lists.
A plugin for you to note that allows you to create multi functional tables easily is called DataTables. Its really great to get you started with more complex tables.
What do you use the multi-functional table for. Anything really. Display a list of products, users, posts whatever your app deals with and you need to list data you can use a table
User interface and Workflows
How your application is designed to an extent will determine how your users interact with it and how efficiently your users can interact with it. Your design and workflows should encourage your users to want to interact with it. One feature that helps with this is your menus bars locations.
Whether it is a side menu or a top menu or however you want to design it. Menus are an important and essentially part of your web app. They allow your users access to different areas of your application. They also act like a very light security by not showing certain menus for different users; a second layer of security after login. Of course you should prevent access to the actually URL but hiding it from the user is also best practice and common sense.
In terms of workflow and design; Where does the user go after login? Does your app have a dashboard? What other places can the user access? How prevalent and easy to access are the most important sections? Your app may have a profile page, an account page, a settings page. It really is up to you but it must be visible and easily accessible to the user. There is also the contact page; an important one and a FAQ page where users can check for help to common questions. All these things need to be considered when you design your application.
To design your app you have a lot of CSS frameworks to choose from and you can even buy admin dashboards and portals to circumvent this process. Some of the frameworks you can check out are bootstrap, bulma, foundation, ulkit, semantic ui and materialize.
If you want to get awesome dashboard you can check out these sites here.
Site administration and Admin Access
When building your web app you might want to add a secondary module that allows you to take certain actions that regular users cannot take. This is a supervisor account that has high permissions and can manage the application. You can hand over the credentials to this account after you are finish building the web application for the client.
It’s great to have these admin modules separate from the main application as much as possible but you can also integrate it into your main application if you want to. The admin module works like a demi-god mode give the user super admin privileges but still has business rules blocking them from making devastating changes to the application.
Exception handling and Error pages
Error handling is very import in your web application and you need to always provide a way to seamless recovery from errors. Some errors are not recoverable which is fine (maybe). But generally speaking you should have a basic error page to re-direct the user to when a serious error occurs. They should be informed of what to do next and how to proceed. Ideally you should be recording certain errors as well.
Frameworks tend to do all of this for you now anyway so it’s probably something you wouldn’t have to worry too much about. However it is something you do need to consider and manage based on your application style. Check out some awesome error pages here.
Sending Emails and testing
Welcome emails, account verification emails, reminders and alerts emails are an important part of your web application. You want to be able to send out emails to your users for various events and situations that occur during your application life cycle. There are a lot of different resources you can use when setting up your mail servers. I personally like to use mailgun but sendgrid is also an alternative. Its not just how you send the emails though it is what to put in them and how to design your email templates. A really great email template resource that I use can be found here.
You are not done yet. Testing is a major concern. You wouldn’t be flooding your mail service with test emails so you need a service to send your tests to before you publish your application. For this a great service to use is mailtrap.io.
Other things you would need to consider is how is the email being sent. If you are doing directly within your application will it block your application or would you pass it off to a service to handle it which will deal with that issue. Will you save the emails to a database for processing later. How would you handle bulk emails. These are all very good questions and things you want to consider.
Password Recovery Services
Users tend to forget their passwords. They tend to forget their passwords a lot. You really don’t want them calling you every time this happens. Your web application should cover and have a basic password recovery service for all your users. This gives them the option to reset their password by sending an email based on their account. You could also send them a code to login based on the telephone number. However you choose to do it. Don’t forget this very important part of your web application.
Two honorable mentions are listed below. Logging and auditing. They can be classed together but they serve different purposes and as such can be implemented differently.
Logging and Debugging
Logging is important because it allows you to see and track errors while your app is running in areas you cannot visible debug. This is very important in solving problems with your application. It will also allow you to track weird events much faster and find out security loop holes and breeches. It is up to you what you want to log and how you want to use those records. You may also allow the super admin users to view some of the logs so they can be aware of some the events that occur on the platform.
This is just what is sounds. If you need to find out some information say a “evil” user abused the platform. When did he/she log in. What account did he use. Being able to audit actions taken on your platform may seem like a privacy issue but it is extremely important to have for you and your clients safety. Don’t just leave your platform open so that anyone can do anything and you have no idea what is going to. Relevant actions should be logged so that they can be audited if required when things go wrong. This is a bit different from logging as logging is a known tool when dealing with errors, bugs and general messages. But you can use your logger for auditing purposes as well. It is up to you.
Well now you know seven things you need to build a basic web application and more. While it is easy to build a website in this day and age a custom web application can serve many different purposes and there is usually not a one size fits all solution. So take these few items into consideration when building your web application there are a lot more but these are a good start.