MemCaps

Connect and share your favorite memories with friends through a customizable time capsule collage.

Comment

Inspiration

Our friend is studying abroad and one of our team members is approaching graduation, so we are beginning to realize there isn’t much time to make more memories. Realizing how important our friendships have been over the past few years, we decided to make an application where users can share pictures in virtual time capsules, which we call MemCaps.

What it does

MemCaps is an app that lets users design and share virtual time capsules consisting of collages that can be sent to friends. MemCaps bring people together virtually through photos when they may not always be able to see each other in person. Users can choose images to create a collage. Then they can choose a designated time for when the MemCap can be opened by the recipient.

How we built it

For our frontend, we chose to use Expo and React Native to provide applications to both Android and IOS. We styled our application using CSS specifically flexbox. Where it really starts getting interesting though is our backend. Our backend is written in FastAPI. The backend needs a cache to store sessions, so we utilize Memcached to not restrict horizontally scaling. We use Postgres for persistent data storage. All of our SQL tables are managed by Alembic which helps version changes to our tables, and provide models to utilize with SQLAlchemy. Then for file storage we utilize Minio, an S3 compatible storage service. These choices were picked particularly for their ability to scale horizontally and containerize easily. Our entire application can be run with Docker Compose, where we create 5 containers, 2 volumes, and a virtual network.

Challenges we ran into

Our biggest challenges were with React Native. Our API for retrieving stored images from our buckets return raw bytes which cannot be directly displayed, but it is also very inefficient to save every file to the local device. To overcome this we built a system to convert the bytes to base64 and display the image from base64. Another tricky piece of React Native was making our authenticated requests because our authentication uses cookies, which aren’t really a thing in React Native. We were eventually able to learn we can manually roll our own cookies by adding headers to every request. Another issue we had was styling, our styling worked good for most devices but abnormally large devices and abnormally small devices, think the Galaxy Fold and iPhone SE, had some issues with how our application was displayed.

Accomplishments that we're proud of

We are proud of our UI, whilst it isn't the pinnacle of design from the Figma gods, it is relatively clean, intuitive, and modern. We are also very happy with our Backend API because it is designed with deployment in mind. Normally, we find that hackathon projects have fragile APIs held together with duct tape that can’t scale and maybe only works on certain people’s computers. Our backend is easily scalable both horizontally and vertically, and our application is easy to deploy because it is fully containerized. We can also replace some of our services like Minio and Postgres with cloud native services like AWS’ S3 and RDS.

What we learned

We learned a ton about front end development with React Native. From simple things like making modals to more complicated situations like lazy loading cards and local storage for caching. We also learned a ton about developing enterprise-like software. Using Minio, Docker, and Memcached, made our application highly scalable, but it took more effort to implement. It required us to learn new technologies that have higher skill ceilings because they can do so much more than typical libraries.

What's next for MemCaps

In the future, we hope to add more functionalities such as being able to rename a MemCap or delete an existing unlocked MemCap. Also we plan on modifying the frontend so the UI looks consistent on all mobile devices. We would also love to support videos in MemCap in the future!

Share this project:

Updates