01-10
work file/
Pokémon Database
Time
3 weeks
My Role
UX/UI designer, developer
Tools
Figma, Illustrator, Photoshop,
Code
PUG, CSS, JS, NodeJS
Platform
Website
Repo
About the project
Pokémon Database is a website library showcasing Pokémon stats. This personal project was created for educational purposes only and is not affiliated with the official Pokémon Franchise. Users can input Pokémon stat cards into the database or modify details on the admin page. Each stat card includes an image, attack, defense, health points, element types, and a short description of the Pokémon. Please ensure the accuracy of the information provided. The database is not monitored and is hosted live on the Heroku platform.
The Challenge
I wanted to take this learning opportunity to create a website database that mimics the functionality of a Pokédex in Pokémon. Each Pokémon has its own unique set of stats, and with so many Pokémon to account for, this presented a challenge that allowed me to utilize NodeJS to build the backend library. In addition to creating the library, I also took on the challenge of enabling users to access and edit the data.
Measure of success
Develop a backend library that stores user input data from the front end.
Allow users to access, edit, or delete saved data.
The front end should feature a simple, user-friendly interface, making it easy for users to input and modify data as needed.
must-haves
Each stat card must include the following details: Pokémon image, attack, defense, health points, element types, official Pokémon number, and a description.
The live site is designed to allow multiple users to add and edit the same shared library of data, ensuring that all changes are immediately reflected across the platform.
nice-to-haves
On the front end, the data will be sorted by the official Pokémon number. However, on the admin page, the data will be sorted based on when the Pokémon was inputted, with the latest entries appearing first.
Users can either upload images directly or reference images from external sites by providing a link.
Users will be required to log in to input or edit their own data, ensuring that they can only modify the entries they have personally added.
final
Adding pokêmon data
Adding Pokémon stat cards to the database happens in real-time. Since the data is hosted on Heroku, any entries will be visible to other users, so please be mindful of the information being inputted. To add a new Pokémon, simply go to the ‘Admin’s Page’ and click the ‘Create’ button. Then, fill in the Pokémon’s details.
Referncing Pokêmon Image from web source
Instead of uploading an image, users can provide an image URL. To do this, search for the Pokémon image on Google Images, right-click, and select ‘Copy image address.’ Then, paste the URL into the image reference input box on the Pokémon input form. Once the ‘Create’ button is clicked, the Pokémon will be visible on both the home and admin pages. In the admin page, the most recent entries appear at the top, while on the home page, Pokémon are sorted by their official number.
Viewing Pokêmon data
Editing Pokêmon data
Deleting Pokêmon data
Reflection
I faced numerous challenges throughout the project, especially when exploring the idea of allowing users to create their own accounts and access only the data they’ve inputted. This is something I’d like to revisit in the future. Another key challenge was assigning each data entry its own ID, retrieving it for editing, and successfully resaving the updates. Deleting entries based on their unique IDs also proved difficult, but I’m glad these obstacles helped me learn so much along the way.
If I had more time, I’d definitely explore account creation further, allowing users to sign up with usernames and passwords, log in with the correct credentials, and access only their personal data. I anticipate the main challenge would be linking user credentials to the correct data in the backend. Additional features I’d consider include allowing users to sort data through filters or leaving comments on stat cards to interact with other users.