Inspiration
💖 When designing an engagement card for a close friend on Canva, I needed to bring many photos together and try out different combinations to make the perfect invitation.
😩 I had to manually download images from WhatsApp and then Airdrop them onto the Mac; subsequently I had to drag and drop into the Canva Editor or upload them from the side bar. This process added a barrier to creativity.
🚀 MediaFlow allows a Canva user to share a secure URL or QR code to let the media images flow into the user's Canva Gallery.
What it does
A unique link is created for each Canva user seamlessly and securely using frictionless authentication. This link or scanning the QR code allows anyone to upload media that is seamlessly shown when the app is open. The user can then decide which files they want to add to design or upload to their library.
How we built it
Security of the system is paramount to prevent abuse and misuse. I wanted the media photos to be visible in real time on the app as soon as it is uploaded.
Canva user token is exchanged for a Firebase Custom Auth token. Subsequently, it allows for upload of the files for a given user identifier. A QR code and unique link are generated for the user to share for upload.
When uploading files, each file requires the user's identifier which is encoded in the link and the QR code. All media is stored in a holding Google Cloud bucket. When the user chooses to use the media in their design, the image is automatically uploaded to their library.
Challenges we ran into
Security is a challenge in this scenario. I needed to connect Canva token to a Firebase token so that I could use the real-time features of Firestore. Using real-time allows the app to have an active realtime connection and improves the architecture over constant polling to a backend server.
Accomplishments that we're proud of
Reducing the file size of the output bundle by 20% to ensure faster load times. Firebase is a heavy library, it provides secure authentication & real-time observation via Firestore allowing updates to be sent in real-time.
Using the apps SDK for the first time. Understanding seamless authentication and securing the backend to work when a valid Canva JWT token is sent.
What we learned
Building using Apps SDK is quite straightforward with the examples outlined in the documentation. Additional documentation/starter kits could be added for popular frameworks (backend) that implements JWT verification. Focusing on the problem that I personally face when designing helped me craft a solution to help others through code.
What's next for MediaFlow
Integrate with event partners, corporate events to collect memories captured during events. Next, we can handle video files that are uploaded and automatically deleting user data after it is imported.
Log in or sign up for Devpost to join the conversation.