Building a flask web application from scratch in 20 days

Where it came from ??

As far as I remember I’ve always been a football fan. I liked playing with my friends since I was a kid and watching the big finals. that’s why I decided to create I-soccer which is a web application that makes booking a field to organize a match easier and more accessible. I also wanted to code something that could solve a real world problem(which happens to be one of my problems too)

The paradox of choice

So now it’s time to get things done. Which technology I should use ?? Hmm… JavaScript is the trend today but I didn’t know much about it especially that most frameworks use ES6 syntax and also I had only 20 days to implement all the features I wanted and having to work with a completely new language will increase the research && debugging time. So i just decided to go with flask. It’s written in python which is the language I’m most comfortable with and offers tons of third parties modules to make writing web apps easy.

The tech stack

as my father said “use the right tool for the right job” i decided to focus on productivity and use the tools I’m more comfortable with

for the front-end I worked with already made templates written in html/CSS/bootstrap. Of course I applied some modification to meet my need and remove the unnecessary parts therefore decreasing the response size.

The application will have to perform a lot of CRUD operations so MySql is my goto choice. Its developers contend that MySQL is about the fastest database system you can get. Using SQLAlchemy as an ORM to avoid writing raw SQL queries and relying on it’s filtering system to avoid sqlinjections. Jinja2 to render dynamic content on the html pages

It’s Show time

First things first I started by the database architecture. how can i design a database with the right foreign keys and back-references to optimize the data fetching.

then it’s the code base architecture. flask let you organize your views as you prefer this is an advantage as it offer the programmer the freedom of choice but making the wrong choice will lead to an unreadable code base with scalability issues. here is the guide I followed to have an organised code base with flask blueprints

Now that our desk is clear, all our tools are here writing the core features is the easiest work.

Deployment

Here is the part I enjoyed the most. First I bought a VPS from digital ocean and created a docker image that contains the app and gunicorn. but why using docker ?? docker will make the process of re-deplying the app easier by cloning the docker image into another server instead of having to reconfigure everything from scratch. Nginx is a reverse proxy for Gunicorn. Gunicorn serves your Flask app and Nginx sits in front of it and decides where a request should go. For example, if the incoming request is an http request Nginx redirects it to gunicorn, if it is for a static file, it serves it itself. Fineally i added a CI/CD pipeline with jenkins. Jenkins facilitates continuous integration and continuous delivery in software projects by automating parts related to build, test, and deployment. This makes it easy for developers to continuously work on the betterment of the product by integrating changes to the project.

Challenges:

My first biggest challenge was the database architecture as I was very afraid of having to make changes on it during the development luckily it wasn’t the case and the first design was the last.

the second challenge was the deployment as I didn’t have any knowledge about docker, jenkins, gunicorn… but I was able to make it work

Final word:

The most important thing I learned in this project is that the only way you could get things done is by splitting the problem into smaller pieces.

Here is my github link for this project.
You can visit I-soccer with this link.
This is my linkedIn Profile, I am happy to connect!