Creating a web application to get kids off the screen.
What is “Story Squad”?
Story Squad is a new project I have had the pleasure of working on with a great team of Engineers and Data Scientists. The purpose of the application is to get kids reading, writing, and drawing again. We are working with a Child Psychologist and a Data Scientist as our stakeholders. They both have a passion for children and they have been a blast to work with.
The main problem we are trying to solve is kids sitting for hours staring at an iPad or television because the parents are too busy to play with their kids outside or offer a more creative outlet. How our project, Story Squad, is going to solve this, is to allow children to read a prompt, submit a drawing, and also submit handwritten short stories based on the prompt they are given to read. Once the student submits their drawing and story they will then compete against other students in a ‘fantasy football’ kind of way, where other students will vote on their drawings and stories.
We can see a future where kids are incorporating technology into their activities, rather than the entire activity consists of technology.
Turning an Idea into Code
Our Tech Stack:
- Front End: React, Jest, Recoil, or Redux for state management CSS and Less for styling.
- Back End: Node JS, Postman.
- DS: Python.
The first thing our team decided to do after meeting with the stakeholders was to come up with user stories based on the wireframes and Figma designs we received. We put ourselves into the mindset of a parent to see how they would want the flow to be and we did the same for the child. After that, we began working on our first Canvas Release. This included allowing a user to register, login as a parent or child based on a 4 digit pin, then dynamically routing the user to the appropriate dashboard. Our second task was displaying a story that the child could read, that we would receive from the backend, and display on the application in PDF format.
I was responsible for the following for Release Canva 1:
- Styling and rendering signup/login form.
- Styling and rendering the pop-up modal that allowed the user to choose if they were the parent or the child. The modal was dynamic based on the login credentials provided.
- Axios call to the backend to receive the mission info for the current student id.
- Styling and rendering the PDF display upon child selecting “READ” on the mission dashboard.
I used a few new technologies to incorporate these features. These included Okta Authentication, Modal from Ant Design, and the react-pdf library. At first, there were some major challenges with Okta and understanding how it interacted with the backend and front end to log in a user account and adding children to the associated account. After hours of studying documentation and team collaboration, we began to see the part that Okta was playing.
A technical challenge we faced when displaying the story, from the back end request, in PDF format was the docs of the react-pdf library. I had issues understanding how they were wanting it formatted and laid out within the application. This coupled with the fact that our pdf URL stored in the AWS S3 bucket was set to private and not allowing us to see the rendering of the PDF, led to some technical issues. I took that as a sign of not understanding the react-pdf library but lone behold it was just a setting change that needed to happen within S3 bucket in AWS. The way I found out that it was the issue, was by using another PDF, in this case, my portfolio, that was hosted by my portfolio website. I hardcoded that URL and it worked! So I knew it had to be something with the URL’s security settings. After we took care of the setting we were in business. After a few history pushes in the Mission Dashboard component and some styling we had completed Release Canvas 1!
The future of Story Squad
Please enjoy this video of where Story Squad is today:
Here is a list of features that the application currently holds:
- We are able to log in a user and dynamically see the parent's name and all the children associated with the account.
- As you can see in the video, the user will choose their name and enter the PIN they setup in registration.
- Upon a successful PIN entry, the user is routed directly to the appropriate dashboard. If the parent is selected and the PIN entered, then the user will be routed to the parent dashboard and the same for a child.
- Once in the dashboards, the parents are able to add a child to their account. The children are able to go on a mission and read a story in pdf format.
In future releases, we intend on adding full monitoring functionalities for the parents in their dashboard as well as the additional writing and drawing mission components for the children. After those features are complete we will begin gamification of the students' writings and drawings to compete with other students.
These types of projects are the kind of projects I want to be apart of in my professional career. I love working on projects that will benefit the lives of parents and children. Applying my skills of design, front end development, and backend development, when coupled with creating useful and impactful applications, meet my future professional goals.