Project 1
Read Aloud Monsters
(password protected site)
Overview
This is a teacher-connected, gamified reading program for young
learners. It’s a serverless React Progressive Web App with Firebase for
the backend and deployment.
(completed in May, 2020)
This app has separate teacher and student sides. Teachers assign reading tasks which appear on a student’s device. Students record reading practices. The files and data appear on the teacher’s classroom dashboard in real time.
Treasure and time remaining appear above. Assignments dots show with the repetitions completed. Dots start as gray, and turn green if practiced. The pet monster is on the current assignment. The bottom-left avatar is for Profile, and the mic goes to the Perform page.
The perform page is where a student records a textbook reading practice. The student is encouraged by the pet monster actively listening to the reader record their textbook reading assignment.
Upon submission, the student is rewarded with a star and gold, while other monsters jump and celebrate. A player allows students to listen to their file, and further the learning process before returning to the home screen.
As a Progressive Web App, students can also access and use the app on mobile devices.
The dashboard provides teachers an easy way to monitor, check, and comment on submissions. I drew the layout and functionality of the teacher side in the wireframe, but since this side was coded by my teammate, I won’t go through it all here.
Stack Details
React.js, Hooks, Redux (Easy-Peasy), CSS (Styled-Components), HTML, MediaRecorder and MediaStream (Web APIs), Firebase Cloud Firestore (NoSQL DB), Firebase Storage, Firebase Authentication, Firebase Hosting, Google Analytics
My Take-aways
I learned so much through this project. We were a team of two,
overseeing the entire development process; From requirements
gathering, to assumptions testing, to wireframing, building the MVP,
alpha testing and CI/CD, we did it all.
Through this experience, I greatly boosted my technical skills. Many
of our stack technologies were partially or completely new to me, but
I was able to learn and utilize them following the documentation and
best practices. This project grew my confidence in both my project
management and my software development skills.