UnboxCat is a web application built to discover and learn more about cats. It has an unboxing feature to discover new cats and a gallery to learn more about all the cats that have been unboxed so far. Check out the live demo to see UnboxCat in action.
UnboxCat is a classic MEAN stack web app, that means it uses:
mongodb- backend database for storing cat informationexpress- backend server, responsible for generating rarities, names, and communicating between the frontend and the dbnodejs- used by both frontend and backendangular- the frontend framework
Besides that it also uses:
tailwindcss- css utility framework for quick an easy stylingdaisyui- component library fortailwindcss
Random cat images are provided by TheCatAPI.
It is worth noting that TheCatAPI does not provide rarity data. Instead, rarities are managed by the backend, by a very simple algorithm visualized down below:
The code for it can be explored here. An even probability distribution is ensured by the code here.
The project is complete and I'm not planning to expand it in the future. However, ther are areas that could use some improvement:
- UI enhancement - the gallery could be improved with pagination or infinite scroll
- angular code refactoring - it gets the job done, but it's arguably a little messy
Although this was a fun little project and a learning experience, contributions are welcome!
99% of unboxers stop right before getting that MYTHIC.