My Lambda Labs — Experience with adding a new feature to a child-friendly app.
Lambda Labs — my most awaited phase in Lambda school to get a glimpse of the actual on-the-job experience of being a Full Stack Web Developer. We followed Agile methodology to develop this new feature, the intro from the stakeholder team was fantastic, and had regular weekly checkpoint point meetings for us to clarify our questions.
Where to Start?
I’m glad to work with a wonderful team named “Story Squad”. I was able to connect to the core values of this organization as they aligned with my interest in kids' early learning concepts. This app is primarily designed to benefit reluctant readers by making them authors and Illustrators! It includes an interactive word-building game that keeps the little ones engaging. This app provides the stories for the kids to read/listen to and then come up with their version of writing and drawing on the story which they can share with other readers. An important highlight of this app is that it gets away from the monotonous online video world where kids keep watching one after the other … In the story squad world kids get creative, create fantasy and pursue their reading habit at home with parents feeling reassured without guilt!
The user story that my team was trying to solve is to enable audio features for the stories so the child can listen to the story while viewing the story text and then progress on to the next level.
Our Crew:
We were a team of 4 in Web and 4 in Data Science, we created user stories to address the design of our new feature. Using the Trello board to keep us on track and view the progress, we created tasks for each user story and assigned them to each of the developers upon their expertise.
Technical Power:
Our cohorts build upon the existing Story Squad code base in React and PostgreSQL with backend integration using NodeJS. The “Story Analysis Engine” is build using Python.
Our Mission Begins:
It all kickstarted with the touchpoint meeting with the stakeholder learning about the intention of this creation gamified app for children enabling them to read. Going thru the previous iteration and planning our current sprint of 2 weeks, we discussed our requirement spec with the Figma provided by the stakeholder and a smooth handoff from the previous cohort.
Breaking the feature into user-stories -> tasks:
- This involved backend storing the mp4 audio file for each story chapter. Creation of a new column in the existing stories table to host the mp4 file.
- Get API modified to include the newly added audiofile column that fetches fields from the stories table for each
- Used ReactAudioPlayer with ant design to display play and pause for the story mp4 audio file.
- Upon the completion of audio, enabling the “I’m done reading” button, this button is styled in .less with ant design following the app’s theme.
- Upon click of this “I’m done reading” button, the URL is routed to the next stage for the child to progress after reading the story / the story being read to ‘/child/draw’
- The dashboard progresses from the “read section” to the “draw section”.
- The story text is displayed using the react-pdf enabling the page numbers to be displayed for multiple paged pdf.
- storyUrl and audiofile come from the stories table where these are planned to hold the links from the s3 bucket for seeding.
Quick view of what we did :
What took more brain cells!
One of the technical challenges was to find the best fit Audio player that can be designed using Ant design — to keep the app’s theme. Upon weighing in on a child-friendly media player and the one which follows the project’s theme — we chose to use ReactAudioPlayer.
Another issue was to have the pdf of the story text displayed using the react-pdf. The URL was not picked up by the Document component when rendering the story text. As a workaround, we did pass the state to hold the URL link rather than the s3 bucket. This issue was then resolved by using the right pdf URL in the stories table — the seeding was then updated and fixed.
Catch of the Audio feature shipped! :
- The audio play/pause section — showing the progress of the story audio
- The story pdf Text for each story chapter
- I’m done reading button enabled upon completion
- I’m done reading the button route to /child/draw section upon button-click
- Backend-Creation of the new column to the Stories table
- Backend-Seeding of the Audio file to the Stories table
- Backend — Get stories API to include the audio file column in the stories table
More to Come:
As a future curation to this feature — we planned to add a progress tracker to the story while the audio is played. This would give the child to know how far the child has come in the story's progress and how long would it take to hear the complete version.
One of my cherished sprints in Lambda that helped me gain real work agile experience in delivering new features as a team, and sure it helped me sharpen my react-redux skills to align with the product’s design.
Happy Learning!
