Check out the live app: https://at-home-substitute.web.app/

Inspiration

I don't have a child yet myself, but I know many people who are suddenly faced with the challenge of keeping up with their own work remotely with children at home due to COVID-19. I work in Tech Education myself and with a couple of online learning management systems, so educational delivery is something I think about a lot. The systems I've seen though tend to be complicated and require a technical or educational background to work in.

What it does

At Home Substitute is an app built for parents who find themselves trying to balance childcare and working from home. The app provides a way for a parent to quickly and easily set up a series of activities for a child to do, letting the parent guide what their child spends their time on while choosing how involved they'd like to be.

With this app, a parent can build a set of activities, organized as a class. They can then start the class and let their child work independently. The app allows for a parent to not only curate a list of tasks and activities but also set when they would like their child to check back in with them.

How I built it

At Home Substitute is built using React. It utilizes client-side storage (IndexDB), so there is no server involved but data still persists. The app is hosted on Firebase at https://at-home-substitute.web.app/ and utilizes the YouTube data API to make adding videos easy.

Challenges I ran into

Most of the challenges were around deployment. Getting YouTube's API to work in production was tricky. I also decided to change the name in the last hours and broke everything.

I created a domain from domains.com, but I've never used this service and it wasn't clear in their documentation how to redirect to my Firebase site.

Accomplishments that I'm proud of

I had done a little work with client-side storage before, but never produced something that if fully functional and deployed, so I'm proud of that. This is also my first hackathon and first personal project in many months.

What I learned

An alternative to React Router for single-page React applications. I ended up using Semantic-UI's modals, which worked great and were quick to implement.

What's next for At Home Substitute

It was built to be serverless due to the limited time of the hackathon, but I would love to expand this idea further - create user accounts and a public space for people to share what they create. I also intended to provide a greater variety of activities, like checklists and quizzes but wasn't able to implement these.

Built With

Share this project:

Updates