The Building Process of a Website or Web App.

#tutorial #webdev #codenewbie #devjournal

So, you have a web project you want to start working on and have no idea how or where to start?

In this article, we will look at the general building process of a website or web application. This article can serve as a guide of how you can start and finish a website.

The Application Overview
Design the application
Decide on the technologies
Set up the project
Development
Test and Debug
Review the App
Deployment

The Application Overview

The application overview is essentially a broad but yet simple high-level explanation of the application's reach and purpose. The best way to imagine this is to think of a pitch where you outline the problem and the potential solution to it.

Design the application

Once you have a general working idea of the application, start working on the design. You can use tools like Sketch or Figma to create an interactive design of the web application you have in mind and how it will address your problem.

Advantages of having a design:

Having an idea of the UI outcome saves time than to figure it out as you go.
Saves money and resources by having to get feedback from yourself and others before development begins.
Allows you to be creative and to come up with ideas that can help you stand out.
Helps you decide on additional tools you might need to tackle certain features.

Give yourself a little bit of time to design your project. The development stage becomes a lot easier when you have a blueprint, a mock-up, to refer to when working.

Decide on the technologies

Yes! With a detailed application overview and design, you should be able to deduce the complexity and the needs of your application.

In Web Development. An application like a Todo List can easily be created by using HTML, CSS and JavaScript while an app like Netflix may require something more robust, a framework, like Angular, React or Vue to mention a few.

Some applications need to be in constant communication with the servers. Whereas, some may get by by handling the user data on the client-side. Understanding the needs of your application (having the overview and design) will help you to decide beforehand on what technologies to incorporate, which database to use or the deployment platform that will be best.

Setup the project

Next, you can start preparing to develop the application. Before we start developing, we need to create an environment for the project:

Creating a repository.
Creating a project in your repository to track your development.
Creating issues for the project, link them to your repository, assign them and link them to a milestone.
Creating milestones, your timelines, like design, development and testing.
Downloading packages and all dependencies.

Development

Aah, finally 😊 now you can start with your code. Recreate your design using your the coding languages you decided on and your favourite tools.

During this time, you will get to:

Spend a lot of time trying different ways to implement a feature.
Follow best practices and conventions.
Revisit your notes and take other short tutorials.
Become a close friend of Google, StackOverflow, Youtube or Grepper.
Create numerous branches and make several commits.
Create Pull Requests and close issues.

Test and Debug

This section is dismissed by so many. Test, test and test your code. Debug your code using Developer Tools in the browsers or any other tools. Make sure your application is not giving back errors, handling requests and data correctly.

Review the App

Take your application for a complete test drive. Pretend you are the user for a while, question everything and see how the application performs.

Also, having an extra pair of eyes won't hurt. Get a different opinion from a mentor or a trusted friend.

Get help from a Third-Party, run your application through Lighthouse. You can also do this during development or testing. Get a detailed report about your application's code to improve the app's performance.

If the review is critical and honest enough, you should be ready to present your idea to the world.

Deployment

Finally, lets show the world what we have been working on for the past few hours, weeks or months. Get a link that you can share and people can start benefiting from all the work you put in. There are so many deployment platforms out there, among them are Firebase, Netlify or Heroku.

Please, note that the tools, technologies and platforms mentioned in this article were just a short selection. There are so many technologies out there and discovering them is part of your adventure.

Let me know what you think in the comments below.