Doggiepedia
Your dog breed wikipedia.
↓
Overview
Graphic Based Dog Breed Guide was born out of my love for dogs and my desire to create an interactive and visually appealing platform for dog enthusiasts. The idea was to provide a comprehensive guide of dog breeds that utilizes data visualizations, APIs, REACT, and SASS to create an informative and visually stunning web application.
DemoAbout This Project
Team
Ting-Huei Chen - Fullstack Developer, UI/UX Designer,
Content Creator
Lumi Lu - Illustrator
Stack
- React.js
- REST APIs
- SASS
Development
This app was developed using Node.js and the OpenAI API to provide a translation service.
Wireframe
During the wireframing process of Doggiepedia, I aimed to create a colorful and visually appealing interface. I utilized a grid structure to organize the various components of the website and ensure a consistent layout throughout the pages.
In particular, the About page was designed to provide a brief introduction to the website and its purpose, while the Resources page features a list of external links tailored to a Canadian audience.
Data visualization
To create a visually appealing platform, I utilized data visualization techniques, including info cards and bar graphs, to display relevant information about each breed. Additionally, I used a REST API to populate the breed information on the website, which helped to ensure that the information was up-to-date and accurate.
Deploy Project
After completing the frontend development, I deployed the project to a web hosting service. The website is currently live and accessible to the public. Feedback from users has been positive, with many appreciating the comprehensive and visually appealing nature of the platform. Overall, this project has been a fulfilling experience, allowing me to combine my love for dogs and my passion for web development.
Conclusion
Overall, Doggiepedia was a successful project that achieved its goal of providing a visually appealing and informative dog breed guide. Through the ideation and wireframing phases, a colorful palette and grid-based layout were established to enhance the user experience. The frontend data visualization with REST API calls allowed for dynamic and up-to-date content to be displayed. Finally, with the deployment of the project, Doggiepedia is now accessible to dog lovers worldwide.
Through this project, valuable skills in frontend development, REST API integration, and project deployment were honed. Doggiepedia stands as a testament to the power of utilizing modern technologies to create engaging and informative user experiences.
Lí hó! Ting
About me
Hi! I am Ting-Huei Chen.
A frontend developer that used to be a watch designer.
I love
coding, coding love me.