{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/ef4d8bebffdd469dbd50bd53634d68a4\" frameborder=\"0\" width=\"1920\" height=\"1440\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":1440,"width":1920,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":1440,"thumbnail_width":1920,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/ef4d8bebffdd469dbd50bd53634d68a4-40524a66d2379892.gif","duration":153.109,"title":"Image Uploader Project Showcase","description":"Hi, my name is Sathya Kumaraguru, and this is my Image Uploader.\n\nFor this project, I built a complete, cloud-native image processing application from the ground up. The frontend is built with React and Vite, and the backend is a Fastify server.\n\nThe user journey begins with a secure 'Sign in with Google' flow using OAuth 2.0. Once authenticated, the user is taken to their private dashboard where they can upload images.\n\nThese images are sent to the Fastify backend and stored securely in a multi-tenant Google Cloud Storage bucket, where each user has their own private folder.\n\nIn the background, a serverless Google Cloud Function automatically triggers on each upload, creating a thumbnail for the image.\n\nThe application provides instant feedback to the user. After uploading, a real-time WebSocket message is pushed from the server as soon as the processing is finished, which shows a notification and instantly updates the user's thumbnail gallery without needing a refresh.\n\nArchitecturally, the backend uses both a standard REST-like API documented with OpenAPI, and a fully type-safe tRPC endpoint for fetching user data. All application secrets are managed securely using Google Secret Manager.\n\nNow, I'll walk you through a quick live demo of the application."}