DEV Community: Rahul

Building a Photo Sharing App with MERN

Rahul — Sat, 30 May 2026 10:37:23 +0000

Modern web applications often require users to upload, organize, and share images. To learn more about full-stack development and cloud-based media management, I built CloudPix, a photo-sharing application using the MERN Stack.

In this article, I'll share how I designed and developed the application, the technologies I used, and the challenges I encountered during development.

Project Overview

CloudPix is a photo-sharing platform that allows users to:

Create and manage albums
Upload images
Organize photos into collections
Search for albums
Authenticate using Google OAuth

The goal was to build a scalable application while gaining hands-on experience with React, Node.js, MongoDB, and Cloudinary.

Tech Stack

The application was built using:

Frontend

React.js
React Router
Bootstrap

Backend

Node.js
Express.js

Database

MongoDB
Mongoose

Authentication

Google OAuth
JSON Web Tokens (JWT)

Media Storage

Cloudinary

Application Architecture

The project follows a typical MERN architecture:

React handles the user interface.
Express provides REST APIs.
MongoDB stores application data.
Cloudinary stores uploaded images.
Google OAuth manages authentication.

This separation keeps the application organized and easier to maintain.

User Authentication

To simplify the login process, I integrated Google OAuth authentication.

The authentication flow works as follows:

User clicks "Continue with Google".
Google verifies the user's identity.
The backend validates the token.
User information is stored in MongoDB.
JWT tokens are generated for protected routes.

This provides a secure and user-friendly authentication experience.

Album Management

One of the core features of CloudPix is album management.

Users can:

Create albums
View album details
Edit album information
Delete albums

Each album acts as a container for multiple uploaded images.

This structure makes it easier to organize photos and improves the overall user experience.

Image Uploads

Image uploads were implemented using Cloudinary.

The upload process includes:

Selecting an image from the frontend.
Sending the image to the backend.
Uploading the file to Cloudinary.
Receiving a secure image URL.
Saving image information in MongoDB.

Using Cloudinary reduced storage requirements on the server while improving image delivery performance.

Search Functionality

To help users find content quickly, I implemented album search functionality.

Users can search albums based on:

Album name
Keywords

Search improves usability, especially when managing large numbers of albums.

Database Design

The database consists primarily of:

User Collection

Stores:

User information
Authentication details

Album Collection

Stores:

Album name
Description
Owner information

Image Collection

Stores:

Image URL
Cloudinary public ID
Album reference

Using separate collections helped maintain a clean and scalable database structure.

Challenges Faced

During development, I encountered several challenges:

Managing Image Uploads

Handling image uploads efficiently required proper integration between Express and Cloudinary.

Authentication Flow

Managing Google OAuth and JWT authentication together required careful backend validation.

Database Relationships

Creating relationships between users, albums, and images required thoughtful schema design.

Error Handling

Proper validation and error handling were necessary to ensure a smooth user experience.

Key Learnings

Building CloudPix helped me improve my understanding of:

MERN Stack architecture
REST API development
Authentication systems
Cloudinary integration
Database design with MongoDB
Full-stack application deployment

The project also provided valuable experience in organizing a larger application with multiple interconnected features.

Conclusion

CloudPix was an excellent learning experience that allowed me to combine authentication, cloud storage, database management, and frontend development into a single project.

By building a complete photo-sharing platform using the MERN Stack, I gained practical experience in designing scalable web applications and solving real-world development challenges.

As I continue my full-stack development journey, I plan to expand CloudPix with additional features such as image sharing, comments, and user interactions.

Uploading Images to Cloudinary in a MERN Stack Application

Rahul — Sat, 30 May 2026 10:35:39 +0000

Images are an important part of many modern web applications, including social media platforms, e-commerce websites, and photo-sharing applications. When building my CloudPix project, I needed a reliable solution for storing and managing user-uploaded images. For this purpose, I used Cloudinary.

In this article, I'll explain how Cloudinary can be integrated into a MERN Stack application and why it is a popular choice for image management.

What is Cloudinary?

Cloudinary is a cloud-based media management platform that allows developers to upload, store, optimize, and deliver images and videos.

Instead of storing image files directly on the server, Cloudinary handles media storage and provides secure URLs that can be stored in a database.

Why Use Cloudinary?

Some advantages of using Cloudinary include:

Cloud-based image storage
Automatic image optimization
Fast content delivery through CDN
Image transformations and resizing
Reduced server storage requirements

These features make Cloudinary an excellent choice for applications that handle media uploads.

Tech Stack

For my implementation, I used:

React.js
Node.js
Express.js
MongoDB
Cloudinary
Multer

Image Upload Workflow

The image upload process follows these steps:

User selects an image from the frontend.
The image is sent to the backend API.
The backend receives the file.
The file is uploaded to Cloudinary.
Cloudinary returns a secure image URL.
The URL is stored in MongoDB.
The frontend displays the uploaded image.

This workflow keeps the application lightweight while ensuring reliable image management.

Frontend Implementation

On the frontend, users can select images through a file input field.

The selected image is sent to the backend using FormData, which allows files to be transmitted through HTTP requests.

The backend endpoint processes the uploaded file and sends it to Cloudinary.

Backend Image Processing

The Express backend receives the uploaded image and handles the upload logic.

Before storing any information in MongoDB:

The image is uploaded to Cloudinary.
Cloudinary generates a secure URL.
The URL is returned to the application.

This approach prevents large image files from being stored directly in the database.

Storing Image Information in MongoDB

After receiving the Cloudinary response, the application stores relevant information in MongoDB.

Common fields include:

Image URL
Public ID
Upload date
User ID
Album ID

The secure URL can later be used to display images throughout the application.

Deleting Images

When a user deletes an image, it is important to remove both:

The database record
The Cloudinary file

Removing only the database record can leave unused files in Cloudinary storage.

A proper deletion workflow helps keep storage organized and efficient.

Benefits I Observed

While building my project, I found several advantages to using Cloudinary.

Improved Performance

Images are delivered through Cloudinary's CDN, resulting in faster loading times.

Simplified Storage Management

The server does not need to store image files permanently.

Easy Integration

Cloudinary integrates well with Node.js and Express applications.

Better Scalability

As the number of uploaded images grows, Cloudinary can handle storage and delivery efficiently.

Challenges Faced

Some common challenges included:

Managing file uploads correctly
Handling upload failures
Validating image formats
Synchronizing database records with Cloudinary storage

Proper error handling helped ensure a smooth user experience.

Real-World Usage

I implemented Cloudinary in my CloudPix photo-sharing application.

Users can:

Upload images
Organize images into albums
View uploaded media
Manage their image collections

Cloudinary helped simplify media management while improving application performance.

Conclusion

Cloudinary is a powerful solution for handling image uploads in MERN Stack applications. By storing media files in the cloud and saving only image references in MongoDB, developers can build scalable and efficient applications.

For projects involving user-generated content, Cloudinary provides an excellent combination of performance, reliability, and ease of integration.

As I continue building full-stack applications, Cloudinary remains one of my preferred solutions for image management and delivery.

How I Implemented Google OAuth Authentication in a MERN Stack Application

Rahul — Sat, 30 May 2026 10:29:31 +0000

How I Implemented Google OAuth Authentication in a MERN Stack Application

Authentication is one of the most important features of modern web applications. While traditional email and password authentication works well, many users prefer signing in with their Google account because it is faster and more convenient.

In one of my MERN Stack projects, I implemented Google OAuth authentication to allow users to sign in securely without creating a separate password. In this article, I will explain the overall workflow and key implementation steps.

What is Google OAuth?

Google OAuth is an authentication protocol that allows users to sign in to an application using their Google account. Instead of managing passwords, the application relies on Google's authentication system.

Benefits include:

Faster user onboarding
Improved security
Reduced password management
Better user experience

Tech Stack

For this implementation, I used:

React.js
Node.js
Express.js
MongoDB
Google OAuth
JSON Web Tokens (JWT)

Authentication Flow

The authentication process follows these steps:

User clicks the "Continue with Google" button.
Google authenticates the user.
Google returns user information and an ID token.
The frontend sends the token to the backend.
The backend verifies the token.
If the user does not exist, a new user account is created.
If the user already exists, their account is retrieved.
The backend generates a JWT token.
The frontend stores the JWT and authenticates future requests.

Frontend Implementation

On the frontend, I used the Google OAuth package for React.

The Google login button initiates the authentication process and returns a credential token after successful login.

The credential token is then sent to the backend API for verification.

Backend Verification

The backend verifies the Google credential token using Google's verification services.

After successful verification, the backend receives:

User name
Email address
Profile picture
Google account identifier

These details are used to manage user accounts within the application.

User Registration Logic

After verification, the backend checks whether the user already exists in MongoDB.

New User

If the user does not exist:

Create a new user document
Save user details
Store Google account information

Existing User

If the user already exists:

Retrieve existing user data
Continue the login process

This approach allows both registration and login through a single endpoint.

JWT Authentication

Once the user is identified, the backend generates a JSON Web Token (JWT).

The JWT contains:

User ID
Authentication information

The token is sent back to the frontend and used to access protected routes.

This eliminates the need for users to repeatedly log in while maintaining security.

Benefits of Using Google OAuth

During development, I observed several advantages:

Improved User Experience

Users can access the application with a single click.

Enhanced Security

Password management is handled by Google, reducing security risks.

Faster Registration

No registration forms or password creation steps are required.

Reduced Development Complexity

Developers do not need to implement password reset flows or password storage mechanisms.

Challenges Faced

While implementing Google OAuth, I encountered several common challenges:

Configuring Google Cloud credentials correctly
Handling token verification errors
Managing frontend and backend communication
Supporting both traditional authentication and Google login

Careful testing helped ensure a smooth authentication experience.

Conclusion

Google OAuth is an excellent solution for modern web applications. It improves user experience, enhances security, and simplifies the authentication process.

By integrating Google OAuth into my MERN Stack application, I was able to provide a faster and more secure login experience while reducing the complexity of password management.

As I continue building full-stack applications, I plan to explore additional authentication methods and security best practices to create even more robust systems.