Com-Unity (A Time Capsule)

Main Page UI
Record UI

Inspiration

To capture the thoughts and feelings of an era, our time capsule allows anyone to choose a date and hear messages from that point in time. Anyone can also hit record and enter their own message either anonymously or with a name, age, and location. The time capsule will record the community's hopes, fears, excitements, and regrets for future generations to look back on.

What it does

Users can browse and listen to voice messages left by other people from the past, capturing the true emotions of a community during any period in time. Users can also leave their own message anonymously or with their name/nickname.

How we built it

We built it using python 3, flask, html5, css3, p5.js, and mySQL.

Challenges we ran into

Transferring audio data to and from the server, calculating times correctly with the animated timeline graphic. Probably the biggest challenge was knowing how to work well together without stepping on toes, which surprisingly we were able to do quite well.

Accomplishments that we're proud of

The timeline and its included features made with p5.js. Learning to work with media input & storage from client to server was especially challenging.

What we learned

How to not panic. How to work well together. How to manage several branches deep in github. How to overcome difficult merging tasks. How to work together as co-designers of a project.

What's next for Com-Unity (A Time Capsule)

Improve the look and feel, and add more features such as voting and the ability to zoom in and out on the timeline to easily see decades, years, months, or small periods of days.

Here is one version of the site which is running, which was put up latest so has the fewest entries: https://com-unity-heroku.herokuapp.com/

(this link, https://panic.pagekite.me/, goes to a version of the site which is running from a proxy which only allows a couple visitors per day and does not allow media on iOS devices and must be browsed to with https to work (not http). However, assuming it is running it gives you the opportunity to play with the timeline animation. This site is being hosted from a raspberry pi on my desk).

Built With

Submitted to

BeaverHacks Spring 2020

Created by

I set up the file structure of the project, and focused mainly on implementing the backend (i.e. routes, setting up the database, data manipulation, storage, and communication with the database).

Ken (Huy) Nguyen
Contributed to the front-end structure and coded the pathway to allow audio recordings and sending those audio recordings as form data as a blob.

David Lee
I created the animated timeline graphic. I also translated static table code on the main page into dynamic code that could be cleared and repopulated, then hooked that table to audio loaders set up by my teammates.

Noah Dale
I worked on the front-end polishing the look and feel of the website. I created the text-message-like messages. I also worked on populating the database and pulling the data from the database to the messages table.

Justin Lin