Building My First Web App
After getting my Programming in C# certificate, I realized that I needed to do more than just read about programming in order to be a Software Engineer. It was essential that I also work on actual projects that will test my knowledge as well as improve it. The hard part about this important step was finding the right project to work on because I didn’t want to work on just any project and thus it had to be one that could be put to use and would also be worth the time and effort. After a few days of pondering on what to build, I found a really good one; I’d work on a web app for my shop .
The Objective
The app would allow people to book appointments for nail care services, provide more information about our services and create a platform where previous clients could give feedback. The project would be a big one (considering I am still a newbie) and this meant that it would need a lot of research, planning, and time.
The Nail Shop
Therefore, while still working on that, I decided to build a coming soon page (my first web app), for the time being, that would collect email addresses from users and use them to inform subscribers when the booking app was ready. It didn’t take long for me to realize that this wouldn’t be an easy task and that it also needed some planning and that I had to follow the development life cycle process to build a good app. I, therefore, started by doing research and gathering requirements, worked on a design (wireframe and mockup), and then did the front-end, back-end and deployment.
The man who moves a mountain begins by carrying away small stones.
- Confucius
Main tasks
For this project, the main tasks were as follow:
Design
Front-End
Back-End
DevOps
Design
Once I was done with the research and was sure of the features that would be present in the coming-soon app, I started working on creating a wireframe for the app. I did this using pen and paper. This allowed me to know where everything would be and why. Once this was done, I transferred the idea to Adobe XD where I created the mockup, which included the colours, images, typography, and content. I ended up with the following design:
Front-End
Now that I had a visual representation of what I was going to make, I had to find the best programming language to use for the front-end. After much research and consideration, I decided to use Razor pages. Razor pages would make it easier to implement the web application because it uses a simplified web application programming model. This was easier for me to learn and implement as each of the razor pages has a page model that controls the page’s behaviour. Razor pages use HTML, CSS, and the Bootstrap framework and that is what I used for the UX/UI part of the application. There was a bit of a learning curve and making the page responsive was not as easy as I thought it would be.
Back-End
Since all the razor pages have an associated page model that supports POST and GET methods, I was able to write C# code that allowed me to get input from the user (email addresses) and use a POST method to send the information to the database. This also meant that I had to have a database that would store the user input and so I decided to use PostgreSQL since I was more familiar with it. I made the changes to the program files to integrate them with PostgreSQL and also used environment variables to make it easy to run, and deploy and make it more secure since I wouldn’t have to commit passwords (and other private information) to my repo. I then initialized the database and did the initial migration then tested everything to verify that it was working properly.
DevOps
I started by finding a good and affordable server and came across Contabo, which I felt was a good match. I got a server with 8GB of RAM, 200GB SSD, and 4 vCPU cores for $6.99. I then installed the necessary software including docker and docker-compose.
A domain name was also necessary and thus I got one from Godaddy and configured the DNS zones to point to the server on Contabo.
I then created an image of my web app and sent it to my private repo on Docker Hub. Afterwards, I created the Yaml files for deployment and referenced the image. The Yaml file also included the Postgres and Nginx services.
Additionally, I needed to ensure that my web app was secure and this meant that I had to install a TLS certificate. I did this by creating a separate Nginx service to enable the certbot verification process and redirect all requests to HTTPS. Once this was done, I deployed the main stack using docker-compose after creating the necessary volumes for services such as the Postgres service.
Challenges
My biggest challenge when working on the web app was the learning curve, especially when I got stuck. I realized that I needed more than just access to information and resources, I also needed guidance. So, decided to look for a mentor on social media (Twitter) and found one (@Hummigbird1)that was more than happy to help. I also made a point to reach out to friends who have experience with software development whenever I needed to clarify something.
My other challenge was with prioritizing work:- knowing what to work on or learn first so that I can save time and resources. It took me a while to identify what needed to be done first or what was more important but I was able to work through this with time.
Next Step
Now that the coming soon page is up and running (https://rembobeautyandwellness.com/), my next goal is to build the appointment-booking web app. I plan on using Vue.Js for the front-end, C# for the back-end, PostgreSQL database for storage, and docker/docker-compose for deployment. Some of the things that I will do differently this time would be to have a better and more planned software development cycle. I plan to do this by including the process of coming up with a system design in my development process and by using Azure DevOps to plan and manage my work.
This has been a very wonderful experience for me as I have learned a lot within a short period of time. I believe I am just getting started and that there is so much more to learn.
Wish me luck! :-)
