DEV Community

Akash Singh
Akash Singh

Posted on

Day 14 Progress Journal: Integrating Supabase for Image Storage (MERN Stack Instagram Clone)

Today’s achievement centered on integrating Supabase Cloud Storage for image uploads, representing a major advancement in the app's media management features. This integration guarantees efficient, scalable, and secure storage for user-uploaded images.

The session kicked off with the setup of Supabase in the project. I configured the required API keys and storage buckets in the Supabase dashboard to create a secure link between the app and the cloud. I established clear naming conventions and folder structures for image storage, utilizing unique identifiers like userId/timestamp.

On the backend, I created an API endpoint to manage image uploads. This endpoint authenticated users with JWT, ensuring that only authorized individuals could upload files. It leveraged the Supabase SDK for secure image storage, returning the file URL after a successful upload. I implemented thorough validation to address issues like unsupported file formats or excessively large files.

On the frontend, I enhanced the Create Post Component to incorporate an image upload feature. Users can now choose images, which are instantly previewed before uploading. Once submitted, the image is uploaded to Supabase, and the returned URL is sent to the backend to link it with the relevant post.

Throughout the session, I adhered to a test-driven development (TDD) methodology to verify the upload process. This included testing edge cases, such as network failures and invalid file inputs, ensuring the system managed errors effectively while providing user feedback.

By the end of the session, the image upload and storage functionality were smoothly integrated, with uploaded images dynamically showcased in the app. This milestone sets the stage for enhancing user-generated content features, making the app more engaging and interactive. Next, I aim to focus on optimizing image display and further security measures.

Top comments (0)