Python Web and App

API Driven Web App – Flask & Vanilla JavaScript

Lately I have been seeking opportunities to apply the knowledge gained at my studyprogramme MCT. We’ve been getting courses on Fronted, Backend and MySQL.

I have been following some additional courses on C# ASP.NET in my free time as well. However, for this project I opted for Flask. The main reason being that it is familiar. My next web-based project will probably be built around ASP.NET, using Blazor and whatnot. But that is for another time.

For now, the fastest way to start a web-based project, was to take an existing GUI-application and translate it. I chose for the word searcher project I did during the last holiday.

The game board is being generated in the backend, for which I created a separate class. In the frontend, I have a Vanilla JavaScript programme that

  • Queries the backend for a playing board
  • Displays the board using a html table
  • Takes care of all game mechanics

Some styling is applied using css, but that is kept to a minimum. Everything is fully responsive.

I did improve the mechanics quite a bit. In the GUI version, I just hard coded a list of words that came in mind at the time and slapped those on the board. This time around, I scraped PDF books of the internet and pulled out each word matching certain criteria. These were stored in a MySQL database.

When prompted to generate a new board, these words were queried and randomized so that every board is more unique and a lot more filled. On top of that you can now generate puzzles that use the vocabulary from your favourite books. This brings coherence and a general theme to the game.

I also adaptively shortened the words I tried to fit on the board in order to fill smaller holes and gaps. This results in a coverage of about 85%, whereas the GUI version got to 60% at best.

The remaining letters could resemble a sentence from the book, but that is an extention I have not yet implemented. I would like to generate meaningful / recognisable sentences rather than just any random sentence with the same amount of letters. This might be an addition soon.

Click here to view the source code of this project.

If you would like to know more about this project, please contact me and we can talk about it in more detail.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *