03-06
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 an interactive web-based library designed to showcase Pokémon stats in an intuitive and user-friendly way. The platform enables users to input, modify, and manage Pokémon stat cards within a dynamic database. Each stat card contains an image, attack, defense, health points, element types, and a short description. The site is hosted on Heroku and is accessible to multiple users who can contribute and edit data collaboratively.
This personal project was developed for educational purposes and is not affiliated with the official Pokémon franchise.
The Challenge
The goal of this project was to create a functional web database that mimics the Pokédex system seen in Pokémon games. Given the vast number of Pokémon and their unique attributes, structuring the database efficiently was a significant challenge. Additionally, I wanted to allow users to interact with the database by adding, editing, and managing Pokémon entries in real-time. This required a robust backend system using NodeJS, combined with a simple and intuitive UI that facilitates seamless data input and retrieval.
Objectives and measures of success
Develop a scalable backend that stores user-generated Pokémon stat data.
Enable real-time data interactions, including the ability to add, edit, or delete entries.
Ensure a seamless front-end experience that allows users to navigate, search, and update information effortlessly.
Create an admin page that allows authenticated users to manage database entries securely.
final
Pokêmon data table
The core feature of the platform is a structured data table that organizes all Pokémon entries. Each row displays a Pokémon’s image, stats, element types, and description in a clean and readable format. The table ensures that users can easily browse and reference Pokémon information at a glance.
Adding pokêmon data
Users can contribute to the database by submitting new Pokémon entries through the Admin Page. The input form collects necessary details such as the Pokémon’s name, attack, defense, health points, and image. Once submitted, the entry is instantly added to the shared database and displayed for all users.
Referencing Pokêmon Image source from web
To enhance flexibility, users can provide an external image URL. This prevents unnecessary storage constraints while allowing for accurate and high-quality visuals. Users can copy an image address from the web and paste it into the designated input field to link an external image.
Viewing Pokêmon data
The home page displays all stored Pokémon entries sorted by their official Pokémon number. Clicking on an individual Pokémon card expands its details, giving users a comprehensive view of its attributes and characteristics.
Editing Pokêmon data
Navigating to the admin page gives users admin access and can modify existing Pokémon data. Selecting an entry allows them to update any field, ensuring that information remains accurate and up-to-date. Changes are instantly reflected across the platform.
Deleting Pokêmon data
To maintain data integrity, users can remove incorrect or duplicate entries through the Admin Page. Once a Pokémon is deleted, it is permanently removed from the database, ensuring that all users see only the most relevant and accurate information.
Reflection
Challenges & Learnings
One of the biggest challenges in this project was implementing a system that allowed multiple users to contribute while maintaining data consistency. Structuring the database to handle concurrent updates and edits required careful backend logic.
Another technical hurdle was ensuring real-time updates across the platform, as changes needed to reflect instantly for all users. Learning to efficiently use NodeJS to handle these backend interactions was a valuable experience that has strengthened my development skills.
I initially considered implementing a user authentication system where users could only edit or delete their own submissions. However, due to time constraints, this feature was not fully implemented. If revisited, I would integrate account-based authentication to enhance security and personal data management.
Future Enhancements
If given more time, I would enhance the project by implementing a user authentication system, allowing individuals to securely manage their own entries while maintaining data integrity. Additionally, I would introduce advanced filtering and sorting options to improve searchability within the database, making it easier for users to find specific Pokémon. A commenting system could also be integrated to foster user interaction and discussion on individual entries, adding a community-driven aspect to the platform. Lastly, I would focus on improving mobile responsiveness to ensure a seamless and optimized experience across all device sizes.
Conclusion
This project was an exciting opportunity to apply both UX/UI design principles and backend development skills in a practical scenario. By building an interactive Pokémon database, I was able to deepen my understanding of database management, real-time data interactions, and user-friendly interface design. The challenges faced throughout the project provided invaluable learning experiences, and I look forward to refining and expanding this project in the future.
Next project