Inky Doodle

screenshot of Inky Doodle
express
contentful

Interactive application with pedigree chart, paginated search features, and automated Instagram posts for Inky Doodle characters

Overview

Inky Doodle is a single-page application (SPA) that focuses on illustrating and exploring biological concepts such as hybridization and heredity using fictional species called "Inky Doodles". The website also features a Pokédex-like search functionality and includes a landing page with links to different sections of the site such as a Frequently Asked Questions (FAQ) page, a Search Inky Doodle page, a Pedigree Chart page, and a Contact Us page.

Features

  • Search Functionality: Users can search for specific Inky Doodles by their name or ID number. The search queries the Inky Doodle Contentful database and displays the matching results in a paginated format. Clicking on a result opens the full profile of the Inky Doodle, including their picture, name, number, parents, children, and Instagram history. Users can also view when an Inky Doodle was posted on the @inkydoodle.ml Instagram page and access the specific post through a link. If an Inky Doodle has not been posted yet, the scheduled date for the post is shown.

  • Contact Page: The website includes a contact page with a form for users to submit their name, email, and questions/comments. The form is connected to a Getform.io endpoint, which sends the submitted form to an email associated with Inky Doodle. After submission, the form inputs reset.

  • Pedigree Chart: Inky Doodle features a tree-structured pedigree chart that displays three generations. The first generation has spaces for two sets of parents, which can be bred to form second generation offspring. These second-generation Inky Doodles can then be bred to potentially create third-generation offspring. The chart follows specific breeding rules, where purebred parents or F1 hybrids with at least one parent of the same species can produce viable offspring.

Summary

Inky Doodle is a single-page application that combines education and entertainment to teach biological concepts. Its key features include a search functionality to explore different Inky Doodles, a contact page for inquiries, and a pedigree chart to understand the breeding patterns of these fictional species. The application aims to engage users with interactive content and provide a fun learning experience.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

contentful
Contentful

Contentful is a headless content management system (CMS) that provides a flexible and scalable platform for creating, managing, and delivering digital content across multiple channels and devices.