May I introduce? ServerMonitor! | The process of creating a web application

It is time! 🎉🎉 🔥🔥
Version 1.0.0 of ServerMonitor is officially released and it feels awesome!💪

ServerMonitor V1.0.0

Introduction 🤝

In this article, I want to tell you about my process of developing my first real project from start to finish. Far too often I had the problem of never finishing any project I have started.

Maybe this article motivates you to get through the process of starting your own project and working on it until it's finished.


How the project got started? 🙋

ServerMonitor started as a simple idea to check if a website is online or not.
My goal for this project was to start as simple as it gets.
On previous attempts, my idea for a web application was way too big to finish it in a manageable time. The approach of starting as small as you can imagine is crucial if you want to finish your project successfully.


Planning 📝

To get an idea of how a website monitoring web app looks like, I searched for other websites that do this already. After some search I found isitdown.site. This website already does everything what I wanted to have in my web app too. The best part of it was, it is created with Flask and is open source. The source code of this website was helpful some times if I did not know any further.

Now I knew how my project should look and behave.
This helped me to find the first task I had to do.


Developing! 💻

Starting phase 🚲

The first task I had to do was obviously to create a new Flask project.
After that, I started to code the basic function of the web app.
Which does mean: Creating a function that checks the response of a website and print it on the screen.

First result

So far so good.
After the basic function was implemented, I became even more motivated to work on my project. The next step was also clear. This app requires a user interface so that you can also check other websites.

Added UI

Half time 🚗

I think around the half time of the development phase, I started making plans for what I have to do next. So I set up a "Projects" panel on Github to get a better overview of the next steps I have to do.

Breaking up the next bigger goals in small parts and writing them down in a Kanban board helped me a lot to stay focused on the goal. This approach of working is very rewarding because every time you finished something, you can move the card over to "Done".

Kanban Board

At the half time of my development process, my web app looked like that. You can see, the design was not much different compared to the current version. Only the colors have changed.

Half time version

Of course, the web app could do a bit more in this development phase than the first version. I implemented a history to see the last 10 checked websites and some additional information about the checked website itself.

Finish line ✈️

At this period of the development process - talking about calendar week 16 and 17 - a lot of work was done.

I ...
... changed the UI to the current version.
... added more rows for additional information about the checked website.
... reworked the monitoring function.
... added an explanation of what this web app is about and how to use it.
... reworked the "Info" page - Means adding a changelog and a "Contact Me" form.

Aaand I fixed bugs.

My motivation to keep going at this time came right out of my ❤️. I wanted to bring this project to an end I can be proud of. Working on a project get a lot easier if there is a foundation to build on. Everything you work on for now expands your web app.


Deploying to DigitalOcean 🤓

The first time I have deployed a version of my web app was on April 20th. Exactly in the "finish line" week. That means, working on the project and deploying took place at the same time.

{% instagram BweRz6FhLCN %}

Working this way was a good idea. Some of the problems I had with my code only appeared after deploying it to the web server. I also created a new Kanban board on Github called "Release sprint" and added all the todo's I had to do for release.

Release sprint Kanban

Working with a web server is a lot of work but it makes fun. I learned a lot about bash and all this server stuff. Don't underestimate the time which you have to spend to solve problems. Often I searched for a solution until two o'clock in the morning.

Why DigitalOcean?

Some of you may be asking why I use DigitalOcean and why I like it so much.

Before I opted for DigitalOcean, I tested Heroku and AWS. After all this testing, my conclusion was, DigitalOcean simply does everything the right way I wanted it to.
The payment options, the selection of servers, the simple UI and all the well-written tutorials have convinced me.

Last but not least, they will give you a 100$ credit if you create an account after clicking this link.


Conclusion 😎

I learned a lot. From finding an idea over to planning and working on it. I have learned, how to break up the big steps in smaller ones, using the Kanban board to track my progress and stay motivated.

Finishing and releasing a project feels rewarding. Everything you code should be released to the public in some way.

Only then, writing code makes sense.


If you want to follow me in some way on Twitter or Instagram, just do it. You will get some further updates about the development of ServerMonitor in the future and also other interesting topics.

I would be happy to talk to you about every tech-related topic on Twitter, Instagram or here on dev.to.


Thanks for reading and happy coding!