Ready, Set, StorySquad!

Harrison Seaborn
8 min readNov 18, 2020

How Story Squad Is Bringing Reading To life:

Story Squad was founded by Graig Peterson and Darwin Johnson. Story squads mission is to empower kids’ imaginations so they don’t veg out to YouTube, Fortnite or social media all day. This is accomplished by getting kids away from the screen giving them the opportunity to read a story, write there own chapter based on the story, and to Draw a illustration to go with their story. If you would like to read more about Story Squad Here.

The Problem

We as a team of 3 developers worked on the problem of the trophy room. Our goal was to allow a child to be able to view their trophy room that keeps track of the trophies they earned while playing the game. With this we also worked on what we were going to give trophies for and how we would keep track of these points.

The Solution

Upon our first release canvas we had decided to tally up the total stories read, created, and illustrations made. As well as keep track of the weekly progress. Based on these values we displayed trophies for the different categories in the trophy room.

The Concerns

When I was assigned to this team my initial concerns were with getting the pre-existing repo up and working and as well I was concerned with what the state of the application was at and whether or not I was going to be able to get it up and running and make valuable contributions to the product in the time allotted.

The Roadmap Break down

In order to break down our project road map we first had to get the application running locally and set up with a database, in order to really get a feel for the state of our project and to understand what user flow had been implemented in prior releases canvases. One of the main bugs we ran into that would inhibit our team from reaching our was that the children's pin numbers were not being hashed and stored in the backend. So the flow we chose was that upon choosing your user the user would be prompted with an input field to input their pin number and verify that user before being prompted to the child dashboard.

From there we wanted the child user to be able to click on a image placeholder that will bring them to a trophy room that displays their progress in the game. We also wanted to keep track of our progress upon reading, writing, and drawing completion. In order to ship these tasks we had to create a the trophy room component that could read from the child’s records and display the progress and trophies earned. I worked on creating counter variables to track the progress the child has made. To do this we used the already in place Redux state management and just updated it so that upon completing tasks it would increase their score which could then be sent to the backend and stored so when the student information is pulled he will have up to date information. In order to achieve this I also had to create a new endpoint in the backend that could be used to add records to the student.

User flow story for creating a pin

This is the trello card I created to show what needed to be done in order to create a pin and store it in our database. This was quite significant feature that we wanted to implement as to assure the correct user is logged in.

Technical Challenges

We as a team decided to use Heroku to deploy our backend at least in the development stages. We are considering using elastic beanstalk for production.

We came to that decision so we could get to work as soon as possible working on the functionality of the project.

Some Pros to using Heroku are that we as a team are familiar with heroku and can get it up and running quickly. It is free and the user interface is easy to understand with well organized documentation.

Some of the cons for Heroku would be The free tier of heroku has limited functionality including that it puts your app to sleep after 30 minutes of inactivity this could lead to some high wait times for responses from the backend api. If you want extra functionality it comes at a high price with expensive add-ons also there are limited server locations available.

Some Pros to Elastic Beanstalk are The pricing for this project is not a factor as we have access to an aws account. Another benefit would be that it would increase our skill set as developers learning a new tool.

Some Cons to Elastic Beanstalk are that we as a team are unfamiliar with it and there could be a learning curve with integrating our app and database to it. The sheer amount available on the site seems a bit overwhelming and cluttered at times so traversing and correctly using it again would just be a learning curve.

One of the biggest technical challenges I faced was the initial setup of the project and getting it up and running In that first week my focus had been on getting our application up and functioning. I made a connection to postgres to get my database connected locally for development purposes. No big changes made there just had to get the right environment variables set and other minor bug fixes like having two knexfiles communicating with the app for the time being just made them identical and will restructure to just use one later on. I also went ahead and downloaded a new dependency knex-cleaner to help us to easier seed our database without issues

The contributions I made helped the overall product by giving our developers a working connection to our database and the ability to see where the project is at now and what features need work or bugs need squashing. Upon altering some env variables and getting a correct connection to the database our user is now able to login go to their parent dashboard create a new children and children can also upload images and stories through the backend and to DS api

In order to deliver a functional hosted site. First I had to get all the environment variables Which was a challenge in of itself some of the variables and values we received were not correct so there was a process of getting the correct variables set in order to run the server. Also there were some slight changes that we as a team made to the script file to get Nodemon to run our server for development purposes. I then Implemented a local connection to a database Postgres in this case. Again ran into some issues once the connection was it was not communicating with the backend appropriately. Upon debugging I was able to find the source of the issues lied with incorrect expected audience which was an okta auth issue I was able to again debug and find the correct env variable in order to get the connection.

4 Weeks Later

Currently our project has two main user stories the parent and the child the parent is able to login and then choose their user profile to add children.

Story Squad’s current list of features:

  • Users can log into their account
  • Parent users can add or remove child users on their account
  • Child users are sent to the Child Dashboard after pin verification
  • Child users can read a story after starting a mission
  • Child users can upload a story in the write section
  • Child users can upload a picture in the draw section
  • Child users can direct themselves to the trophy room to view progres and trophies acquired

We added a pin check for the child as well where you must insert the pin assigned to that user upon creating that user.

The user story of completing missions and recording those in our database to use in the trophy room to show childs progress.

We recorded in addition to the scores kept in the backend for the writing portion and updated our database in order to generate trophies on completion of missions.

Future of StorySquad

For the teams that work on this product in the future iterations The next step we were currently working on was getting the complexity scores from the data science api. We were able to get the score response back locally but had issues in the deployed version of our website. Having the feature to read those scores and display them in the trophy room to give trophies on the writing section

The one technical challenge I foresee is proper communication between the deployed version and the Data Science api. As long as env variables are set and database created correctly the next team should be able to transition to a workable project rather quickly.

once the scores are returned those scores need to be posted in the backend for that user as to pull that info and create relevant trophies. Our current trophy room implementation has a progress bar and we planned on creating different trophies for the score complexity returned for the writing submission

Reflections

Working on Story Squad has been a great learning experience for me Coming together as a team for 1 month to work on a pre existing code base was a new challenge. Writing peer feedback and receiving feedback from my team has allowed me to communicate with my team more effectively. We were able to come together understand one another's strengths and weaknesses and lean on those to make progress with this application.

My past projects have primarily been solo projects so something that I think I noticed and improved on and will continue to improve upon Is my ability to communicate changes and solutions to bugs more effectively to my team as to assist them and further my understanding the issues and steps taken to fix said issues.

This project and my entire experience in this labs project has taken me one step further in acquiring a job. The real world stake holder and team accompanied with outside UX designers has taught me a lot about coming together and working on a team. Communication is the biggest thing that I take away from this experience the ability to communicate changes I’ve made, understanding the changes the stake holder and UX designer want to be implemented, and working as a team to come up with a plan to achieve these goals.

--

--

Harrison Seaborn

Hello, I am a Full-stack web developer, from Spokane, WA. I enjoy problem solving and learning new technologies.