darrelltzj / photodrop

Photodrop

Collect the Good Times

Photodrop is a live photo feed web application where users can post photos and messages to a live photo and audio presentation. It is developed with React (front-end) and Firebase (back-end). It was originally planned for as a continuation to theRyanJoleneProject for wedding guests to share their well-wishes and photographs on screen, but it can be used for other events as well.

Photodrop is my forth project at General Assembly's Web Development Immersive (WDI) Course. It is also my first experiment on React and Firebase. There are points for improvement in this project (see below).

Targeted features

✅ Users can create and / or participate in albums.

✅ Participants of each album can post messages and pictures.

✅ Organisers of each album can upload audio files and control the order of pictures for the live photo feed presentation.

Installing this project

This project was bootstrapped with Create React App and deployed with Buildpack. It is also design with React Bootstrap. See the package.json file for full dependencies.

Installing

Fork, clone or download this repository to your desired directory. Install the necessary NPM files by entering the following code in your terminal in your directory:

npm install

A Firebase project is required as the backend. This repository will also require a .env file that contains all the secret variables used in the project. See the .env.sample file for the environment configurations required to connect the Firebase project to the React end of this project.

The application

Try it out

Current User access rights

	Organiser	Participant
Upload Images	✅	✅
Delete Images by Self	✅	✅
Delete any Image in Album	✅
Organise Images in Album	✅
Post Messages	✅	✅
Delete Messages by Self	✅	✅
Delete any Message in Album	✅
Upload Audio	✅
Play Live Presentation	✅

Images

Image Upload Process

User uploads image --> React reads image dataUrl --> fix-orientation --> React uploads image to Firebase storage

Image Reading Process

React reads image URL from Firebase storage

Future Development

EXIF Orientation issue: iPhone Portrait Camera Capture

npm fix-orientation was used to handle the images' orientations from their Exchangeable image file format (EXIF) meta data. Images are oriented correctly according to their orientations before uploading to Firebase. Currently, images through camera capture by iPhone are do not have their orientation fixed before they are uploaded. This causes portrait images to appear rotated 90 degrees on the web application.

Further research has to be conducted on this. A guess would be that iPhone hides its image EXIF data during camera capture. An alternative would be to try to upload images from firebase onto a canvas, then correct fix the images' orientations from their dataUrl.

Facebook / Instragram integration

Social Medial integration would allow users to be able to both upload from and to their social media sites. This application could act as an extended feature for social media sites. For example, Photodrop can be re-configured to read Instragram #tags instead, thus reducing the need to upload images.

Option to privatise / restrict guest rights

Currently, any participant can upload a photo or a message that may or may not be appropriate. A review section may be needed for users to approve their participants' posts before allowing the images and messages into the feed. Alternatively, Google Cloud Vision can be used to filter off inappropriate images.

Reducing image size

Reading large image files may affect the application's performance. An alternative would be to save and read a lower version of each image.

Author(s)

• Darrell Teo

Credits

References

• Automatic Slideshow by Gabriele Romanato

Coding assistance

• Prima Aulia
• Lee Yi Sheng
• Sahaya Sharona Valluvan

Fixing Photo Orientation

• Jonathan Ng from Via Priori
• Jerel Lim from Via Priori

Resources

• polaroid by Raz Cohen from the Noun Project
• Placeholder Images from the Unsplash