Overview

This case study outlines the development of a form validation system using the MERN stack (MongoDB, Express, React, and Node.js). The project involves handling single and multiple file uploads to Cloudinary and integrates features such as file validation, email-based data retrieval, and state management with Redux Toolkit. The backend is built using Prisma ORM for database management, ensuring seamless communication with MongoDB.

The primary challenge in this project was to create a dynamic form handling system that could efficiently manage file uploads and search queries, ensuring proper validation, security, and responsiveness.

---

Objectives

The main objectives of the project were:

1. Form Validation: Implement validation for both text inputs and file uploads to ensure only valid data is processed and stored.
2. Single and Multiple File Uploads: Allow users to upload both single and multiple files, with those files being uploaded to Cloudinary for secure storage and easy retrieval.
3. Search Feature: Provide a feature where users can enter their email address and retrieve their data from the database.
4. Backend Management: Use Prisma ORM to interact with MongoDB for data storage, along with Express.js for creating RESTful API endpoints.
5. State Management: Utilize Redux Toolkit to manage form states, file uploads, and search features on the frontend.

---

Tech Stack

• Frontend:
  • React.js
  • Redux Toolkit for state management
  • Tailwind CSS for styling
• Backend:
  • Node.js with Express.js for the server
  • Prisma ORM to interact with MongoDB
  • Cloudinary for image and file storage
  • REST API for data retrieval and form submissions

---

Key Features

1. Form Validation

A robust form validation system was implemented on both the client and server sides. This ensured that all input fields, such as email, file uploads, and text entries, adhered to specific criteria:

• Email validation: Users must enter a valid email format before proceeding with the form submission.
• File validation: Single and multiple file uploads are validated for file type (e.g., only images or documents) and size restrictions to ensure no malicious or overly large files are uploaded.

2. File Upload to Cloudinary

A crucial part of the project was handling both single and multiple file uploads. The backend handles uploads using Cloudinary for storage:

• Single file uploads: Users could upload one file, which is stored in Cloudinary, and the URL is saved in the database via Prisma.
• Multiple file uploads: For multiple files, a dynamic array of files is processed and uploaded to Cloudinary, with URLs for each file saved in MongoDB.

The process follows these steps:

1. Files are uploaded from the frontend via a POST request to the Express API.
2. The server uploads the files to Cloudinary using the Cloudinary API.
3. Cloudinary returns URLs for the uploaded files, which are then stored in the MongoDB database using Prisma.

3. Email-based Data Retrieval (Search Feature)

A search feature was built where users could enter their email addresses to retrieve their stored data:

• Search by Email: Once the user enters their email, a request is made to the backend to search the database for any records associated with that email. If found, the data (including file URLs, form entries, etc.) is returned and displayed on the frontend.
• Search Optimization: Prisma ORM was used to write efficient queries to quickly find the user data, even with a growing number of records in the database.

4. Redux Toolkit for State Management

To handle form states, file uploads, and search results efficiently, Redux Toolkit was implemented in the React frontend. Key benefits included:

• Global state management: Form inputs, file uploads, and search results were all managed globally, making the application smoother and easier to maintain.
• Loader and Error Handling: A centralized loader and error-handling mechanism was implemented to show loading spinners during uploads and to display error messages when form validation or file uploads failed.

---

Implementation Details

Backend: Prisma ORM and Express

The backend was built using Express.js and Prisma ORM to manage database interactions:

• User Model: The user schema was created using Prisma and MongoDB. Each user record contained fields such as:
  • id: unique identifier
  • email: user’s email (used for search)
  • fileUrls: an array to store the Cloudinary URLs of uploaded files
  • createdAt: timestamp for record creation
• Prisma Setup: Prisma was configured to handle both queries (e.g., retrieving user data by email) and mutations (e.g., saving file URLs and form data).
• API Endpoints:
  • POST /upload: For file uploads, receiving the files, uploading them to Cloudinary, and saving the URLs to the MongoDB database.
  • GET /search?email=:email: To search for user data based on the email address.

Frontend: React and Redux Toolkit

The frontend used React for UI development and Redux Toolkit for state management:

• File Upload Component: A React component was built to handle both single and multiple file uploads. The files were managed locally before being sent to the backend.
• Redux Slices: State slices were created for handling different parts of the application, such as:
  • fileSlice: For managing file upload states.
  • searchSlice: For managing search results and state.
  • formSlice: For managing form input validation and states.
• Form Validation: Client-side validation was handled with custom hooks in React, checking for valid email formats and ensuring proper file selection before allowing the form to submit.

Cloudinary Integration

• Cloudinary Setup: The Cloudinary API was integrated into the backend using its Node.js SDK. This allowed seamless file uploads with automatic handling of file URLs and metadata, which were saved into MongoDB using Prisma.

---

Challenges Faced

1. File Validation

Handling multiple file types and ensuring valid file formats was a challenge, especially with asynchronous file uploads. The solution was to implement both frontend and backend validation layers.

2. Efficient Search Feature

Implementing an efficient email-based search query that could handle large datasets required optimizing Prisma queries and indexing the email field in MongoDB.

3. Handling Multiple File Uploads

Managing multiple file uploads simultaneously, while ensuring no server overload and seamless integration with Cloudinary, required careful asynchronous handling and optimization of API requests.