A website that connects distanced family members through virtual storytime.


Project Brief

This project was completed as a part of the Codeup Full Stack Web Development program. Progeny is a full-stack web application that allows users to create and save recordings of children’s stories to be played for their kids and grandkids. It uses Java with a SpringBoot framework. This project saves the stories in a MySQL database and implements many different APIs to offer a high-quality user experience.

The Challenge

During the last few weeks of the course, you’ll work in a group of 3-4 developers to build a full-stack web application from the ground up. In addition to building the application, you’ll also compile a presentation for Developer Day, a public event organized by Codeup staff to help you network with employers and community members.

The Problem

During a time of distancing, it has become apparent that virtual communication between family members is crucial to maintaining our healthy relationships.

The Goal

The progeny application would allow distanced family to record audio bites of themself reading a story to their child/grandchild, which can then be played/downloaded by their connections to be used during storytime. Distanced family would include relatives, deployed military parents, divorced parents, and parents who travel long distances for work trips. The application will also provide certified storytellers the opportunity to read stories to the progeny communities — think reading rainbow.

My Team

My team members included,

My Role

My Front End Developer role collaborated with other developers to conduct create style guidelines, sketch wireframes, build a full-stack web application, and present website to key stakeholders.

My role responsibilities included,

  • Logo Design

  • Book Mockups

  • User Personas

  • Color palette

  • Typography

  • Low-fidelity Wireframes

  • Wireflow

  • Connection Between Users Development

  • Home Page Development

  • Library Page Development

  • Account Details Development

  • Website Deployment

Research / Observe

Stage One - Empathize

Identifying Competitors

We identified some direct and indirect competitors to study how they approach the topic of virtual storytime. This research was conducted through numerous google searches that utilized various keywords related to our problem. We tried to search for these sights as a parent would search for a solution to this particular problem.

For this search we used keywords such as,

  • Children

  • Audio

  • Family

  • Storytime

  • Bedtime

  • Listen

  • Record

Key Findings

  • My Storytime, a direct competitor, allows its families to pre-record stories from anywhere, and play them back with the Google Assistant.

  • My Moonlight, an indirect competitor, combines traditional storybooks with modern technology — HD projections, sound effects, read-a-long features and more.


Stage Two - Define


We believed that creating a web application that enabled distanced family members to share their audio recordings with loved ones or publicly to others registered on the site and allow for the ability to maintain downloadable files of elder stories, terminally ill family member readings, etc. would give families the opportunity to build/maintain bonds during the COVID-19 pandemic.

Persona Hypothesis

Based on our collective experiences I set up two user personas. We referred to them throughout the entire product development process.

These personas defined two audience segments — adult family members and professional storytellers.

User Stories

For our user stories, we had three different user roles that we kept in mind when developing to ensure we built the site with features that served the users desired outcome. We used the template,

As a (who wants to accomplish something)

I want to (what they want to accomplish)

So that (why they want to accomplish that thing)

These are the user stories we used to guide our sites functionality,

Unregistered User (Visitor)

  • As a visitor, I would like to view a list of public stories as well as listen to public stories so that I can see what stories are available before I sign up.

  • As a visitor, I would like to create a private account so I can record private audio bytes for my kids and share them with friends and family.

  • As a visitor, when I complete the registration form I expect/want to be told that I have successfully registered and be directed to a welcome screen (my profile).

Registered User

  • As a user when I click on the forgot my password link I expect/want the ability to fill out my email address and have a password reset email sent to me that allows me to reset my password.

  • As a user I would like to navigate to my profile from any page by clicking a link in the navigation bar.

  • As a user I would like to listen to my own recordings and view my connections recordings

  • As a user I would like to delete my own recordings if I so choose to

  • As a user I would like to receive notifications that I received a new story sent to me

  • As a user I would like to search for different users and family members to connect with and send a request to be a connection

  • As a user I would like to confirm or deny connections request so that I can filter who friends me

  • As a user I would like to view a list of all my connections

  • As a user I would like to remove a connection

  • As a user I would like to view my account information

  • As a user I would like to update my account information

  • As a user I would like to delete my account

  • As a user I would like to sign out of our account


  • As an admin I would like to delete users

  • As an admin I would like to add stories to the story catalog

  • As an admin I would like to view a list of all users

  • As an admin I would like to delete a book from the catalog

  • As an admin I would like to see a list of all books currently in the catalog

Database Design

This was a critical step in our process as it defined how the backend portion of our web application would operate. The design for our database when through dozen of reviews and iterations before we finalized it.

The most difficult part was nailing down how we were going to connect user accounts to one another.


Stage Three - Ideate


As we progressed in our process, I created the low-fidelity wireframes using These wireframes informed each page layout as we developed the website.


The use of a wireflow helped the team understand user interactions as it is a combination of a user flowchart and wireframes. These wireflows also increased our collaboration as everyone understood the ideal flow of user interactions throughout the site. We referred back to this flow on numerous occasions to check our work.


Stage four - Test


The final web application was completed within our timeframe. We opted to save some features for future development due to the tight schedule.

To present the web application to our live virtual audience, we created a video recording of our introductions and segmented our demonstration video by various user stories objectives. These video clips were then processed by Codeup staff and presented to a live virtual audience via Zoom.

You can view the website we developed by clicking here.

You can view our presentation video on Youtube by clicking here.

What I learned from this project

My biggest fear during this project was that our team was too small for the task at hand. However, our use of the Kanban method helped us organize and stay on top of deadlines — reducing the amount of delays and confusion.

Two major problems we faced were developing this project virtually and finding a good EPUB reader API. We overcame the virtual aspect with continuous zoom calls and slack messaging. The EPUB reader API took some trial and error. The first version we tried was in japanese. The Google page translation helped a tad but we ran too close to our deadline trying to figure this out and went with an alternate plan b embedded iframe EPUB reader.