The Ups and Downs of Building a web app from scratch as a Newbie
About a month ago, my team and I embarked on what turned out to be one of the biggest challenges we’ve had this year; building a jobs website from scratch.
Our website looks to connect employers to skilled blue collar job seekers. Our team included Josiah Mbithi who handled the templates and styling of the web pages, Joseph Thuku who created the jobs app and I who worked on users app and authentication.
Having noticed that most jobs websites ignored the technical sector, we wanted to create a safe connection point for employers and employees who were looking for jobs and services.
I was a little skeptical as first since I had not developed any hands-on experience on web development but I took it on as a challenge. It wasn’t just because it was mandatory portfolio project, no, I had the dream of building a services website. In fact, i presented the same idea to my team members during the project proposal phase. After a careful review of the project, I concluded that it was almost similar to my very own dream website. This was just the perfect challenge to have a blue print of the systems and frameworks. From this article, you will learn that accepting to be part of this team was the best decision for me and my SE journey.
Let’s get to the most interesting part of this article. So, how far in terms of project development and targets have we managed to go?
The diagram below shows the basic structure of how our jobs website works. The website was deployed using a web server provided by ALX Africa in conjunction with Holberton school. We used a domain name for one our team members.
At the beginning of the project, we shared duties and every individual had to build a chosen section of the web app. That went well but still, we would host meetings and seek support from one another.
We applied different technologies for the different phases of the website.
For the backend we chose to use Django, a python framework that makes it easy to create and manage website models and database. We created two main models(users and jobs) with other functionalities like messaging still work in progress. We then wrote functions for the created models to connect the database with out frontend pages. For the database, we used django built-in database management system sqlite3 since it was a simple web app that didn’t require the storage many complex files
For Frontend, we opted to use HTML, CSS and a bit of JavaScript since we were not yet very conversant with its syntax and other advanced features. This hadn’t been our choice at first but after a few struggles with tailwind CSS, another new framework, we found it more reasonable to eliminate any instances tailwind CSS.
As of now we have managed to create a functional website with some basic functions such as; a simple landing page with basic website information and clear navigation, a user signup and login feature with a simple authentication(the user creates an account and receives user details like username and password via email), job posting and application pages and employer/employee landing pages.
What was the toughest part of the project?
Well, am glad you asked. I would plainly say the entire project has been tough, learning and using new frameworks with foreign concepts but that won’t be true since there are sections I had little knowledge on. The biggest problem we encountered was related to Django models and database. After creating our project and were ready for testing, we stumbled on a rather unfamiliar problem. Users could only signup to the website if included as a superuser through the Django admin page.
We couldn’t quite figure out what was the issue was instantly as everything else just seemed to work fine. We had to do research a whole day. It turns out our user models was the problem. Instead, we should have used the django builtin user authentication system. How were we supposed to know as newbies? Anyway, that is the role of an engineer; find solutions to problems.
Our next course of action was clearing the users table created in our database through the models file. We then implemented the Django built-in user auth system by writing a new model and linking it with the other existing models. The tables created had to have a relationship which was created using ID’s as primary keys and foreign keys.
If I were to do the same project today, am not quite sure I would take the same approach. I would probably have gone through the entire Django documentation and done an in-depth study of the other used languages like JavaScript. That aside, I must admit that my ability to adapt to the new and different concepts learned on a daily basis was impressive. Before the project, I had never used Django and had little knowledge of JavaScript. I still managed to work with the two and produce some good results. In the building process, I noted that it would be very crucial for me to start exploring some design and styling frameworks like tailwind, vue, and bootstrap.
This was mainly because I realized that plain CSS still lacks some important features when creating a website that users are to interact with. Still, CSS can do a great design job if one understands all its features. I have to revisit the mentioned frameworks in future in preparation for personal projects and potential client’s needs.
Since this is a project in progress, I may post further updates on the findings and development status in future.
Thanks for reading through this rather plain story of my first web building expereince.
My name is Francis Onyach. I am a software engineering student, an ecommerce specialist, a writer, singer and social media manager.
Here are some links to important pages you may want to check out:
Github: https://github.com/FrankieVexx/Jobkonnect
Deployed project for the jobs website: http://www.mrjt.tech/
Project landing page: http://www.mrjt.tech/
My LinkedIn profile page: https://www.linkedin.com/in/francis-onyach-73190011b/
My Twitter Page: https://twitter.com/Frankievexx