Ficticious Website: The Naughty Bottle

The Naughty Bottle was a first-term project in my (still ongoing) Computer Science course at Pontifícia Universidade Católica do Paraná. It was made in a team: I made the front-end, the design and the integration with some JavaScript libraries, and my friend made all the back-end implementation, database creation and modelling. Looking back, it was one of the first times I had to split a project with someone and trust that the other half would arrive. That alone was worth the semester.

The idea behind this project was to work with e-commerce systems and stock management, and we chose as the theme a fictitious store that sells weird, magical and suspicious products. With many references to RPG games, of course. We were not trying to build the next big marketplace. We were trying to build the shop we would want to visit if we lived inside a tabletop campaign, which is a much better brief.

The Naughty Bottle sells potions, and the whole identity came from that. We had 3D bottles, a warm palette, plenty of SVG ornaments and the kind of product copy that suggests the bottle might explode if you shake it too hard (Figure 2). The design was made from scratch, the illustrations were ours, and the 3D assets have their credits in the project. I am still proud of the mood. It is silly, but it is a consistent kind of silly, and consistency is most of design.

The front-end had advanced SVG and CSS animations. Not because the assignment required them, but because I wanted to see if I could make a store feel alive without a video playing in the background. Some of those animations still look good to me. Some of them are the kind of thing you look at after two years and think, "ah, yes, the enthusiasm of a person who has not been told 'no' yet." I miss that person.

The project contains 3D assets, and it can be a bit slow due to its poor 3D implementation. That is my fault. We had a short time window to finish such a bold project, and I chose ambition over performance. Loading a full 3D model for a store that needed to load fast was not the wisest call, but it looked magical when it worked.

This is the classic first-term lesson: everything is a trade-off. You can have 30 3D bottles being rendered at the same time, or you can have the page opening in an acceptable time during the presentation. You cannot always have both. If I were to rebuild it today, I would probably use a low-poly model of the bottle in the listing.

My friend did the project's back-end in PHP, and I did the front-end. That division was clean on paper and messy in practice, as every team project is. We had to agree on data shapes, on what the front-end expected, on what happened when a product had no stock. A store is basically a CRUD app with a personality, and CRUD is where you learn that communication is a technical skill.

I remember being surprised by how much of the work was not code. It was deciding names, agreeing on error messages, explaining why a field needed to be nullable. The Naughty Bottle taught me that a front-end is only as good as the contract behind it. Also, that a good teammate makes a bad deadline feel survivable.

The repository is here: DrayanInterfaceDesigner/thenaughtybottle. It has the assets, the SVG ornaments, the 3D models, the database scripts and the old versions. It is a time capsule of a first-term project: ambitious, a little broken, and full of the specific energy of someone building their first big thing. What can I say? It was worth it.