lenghuang/cmu-imageshare

An image sharing platform for CMU

CMU Image Share

Deployed Website: (https://lenghuang.github.io/cmu-imageshare)

Starting off as an idea from CMU SCS First Year Advisor Veronica Peet (yay!) to foster a sense of community in the time of COVID-19, this web app allows anyone to upload images in a gallery for you friends to view :-)

The How

Front End

These are some of the tools I used to assist me with creating the front end for this website:

• Create React App
• React Boostrap
• React Image Gallery

Back End

To implement the back end of this web app, I am using Google Firebase to:

• Store photos onto a storge bucket (Storage)
• Host image text data (Realtime Database)

Demo

Viewing Images

Uploading Images

Error Handling

Compatibility Across Devices

Reflections

I completed this project in around 48 hours in order to deploy it as soon as my advisor sent out an email about this image sharing idea. Her email was asking for what platform would be ideal for image sharing (ie Facebook, Email, flickr, etc). Having heard this, I jumped at the idea of creating a platform that could be used by my classmates. This was a great way to teach myself popular technologies like the ReactJS framework and Google's firebase. Furthermore, I found myself thoroughly enjoying the process of making a webapp with a practical goal: unite our college community in a time of isolation.

While I am happy with how this turned out, some things I could have done better include:

• Improve scalability of the website (ie aesthetic appearances on mobile devices)
• Utilize direct access to Firebase storage via path/reference instead of the generated URL
• Create random and unique keys for the filenames of storage to prevent overwriting image data
• Fix iOS bug where .heic files cannot be read and images are displayed rotated on desktop, but correctly on mobile

In the (hopefully near) future, I want to add:

• Content filtering for SFW photos via API calls to Clarifai
• User authentication so that write access is limited to Carnegie Mellon related domains (Firebase/OAuth)
• Cloud functions to automatically clean storage by deleting files by age (Firebase)
• onClick handler to toggle presence of description boxes (CSS/sCSS)