W3 Bestiary

I was watching The Witcher on Netflix and I surprised myself pausing it several times, googling the monsters I would see on the screen.

And I was like : "isn't there any website that references all of these monsters? In both french and english? And without any annoying ad?" And I just couldn't find it! So I decided to build one from scratch.

Mockups

Crafting such an app begins with conceptualization, envisioning seamless integration with the game's aesthetic.

Using Figma to create and prototype mockups, I could obtain visuals that offer an immersive and user-friendly experience.

Architecture

This project represents a significant departure from my previous side projects as it marks the first time I have implemented hexagonal architecture.

It allowed me to structure the application in a highly modular and flexible manner, and it inspired me to continue using this approach in future projects.

Getting data

To get the data from the game I had to make screenshots of every single monster page from the bestiary. Then I had to use OCR from Google Photos to copy the text in both french and english.

At first I was manually copying these textes by rewriting them myself, which was terribly long and demanding. I will not do it again for sure but it was one of my first real side-projects so I really wanted to mark the occasion.

Database

Once the data was gathered in separate JSON files (categories, monsters, items), I could insert it into a MongoDB database.

The reason I used a document-oriented DBMS was that it perfectly fit the format of the JSON files I had been writing myself.

    
    

Responsive

I wanted to make sure the project could adapt easily, making the bestiary accessible as a standalone companion app outside of the game.

This is the reason I have made it fully responsive. In fact it was the first web project I had made responsive and I am still proud of it. It does look like the in-game bestiary and it is a real companion app.

Alternatives

Some time after the first release I actually realized that I didn't need any real database. All I needed were these initial JSON files I could read from. No writing operation was required and all the data was predictably known.

Also, I reviewed my code maybe a year later and I couldn't stop thinking : "I could have make that simpler, and that other stuff could have been placed here" etc. So I have improved a few things but if I had to make this project from scratch today I would do things a bit differently.