Home
About
Projects
Contact
Projects

Image Manager

project img
July 26, 2025

Overview

The Image Manager is a smart and secure full-stack web application inspired by the clean UX of Google Drive. It allows users to register, create nested folders, upload images, and efficiently manage their personal media library with features like previews, renaming, and file search. The app emphasizes privacy and organization, ensuring each user’s data is fully isolated and accessible only by them. With real-time image handling and an intuitive interface, it delivers a seamless experience for organizing and retrieving images.

Key Features

  • User Authentication: Secure signup, login, logout, forgot password, and reset password functionality.
  • Nested Folder Structure: Create and manage folders within folders to organize content.
  • Image Uploading: Upload images with custom names and file support.
  • Image Management:
    • Preview images before download
    • Rename or delete images
    • Download images directly
  • Search Functionality: Search images by name within the user’s account.
  • Private User Access: Each user’s folders and images are completely private and secure.

Technologies Used

  • Frontend: React.js, Tailwind CSS, and shadcn/ui for a clean, responsive, and modern UI.
  • Backend: Node.js + Express to power the server and RESTful API endpoints.
  • Database: MongoDB with Mongoose for handling user data and nested folder/image structure.
  • Image Hosting: Cloudinary for efficient image storage, optimization, and real-time transformations.
  • Authentication: Custom session-based authentication with support for forgot/reset password, token-based verification, and secure route protection.

Challenges and Learnings

Building a deeply nested folder system required a flexible MongoDB schema and recursive logic to support multi-level hierarchies. I implemented secure authentication with session persistence for a smooth and consistent login experience. Adding a password recovery flow (forgot/reset) taught me practical token handling and email verification. Integrating Cloudinary enabled real-time image uploads and optimization, while Tailwind CSS and shadcn/ui helped deliver a clean, responsive, and user-friendly interface.

Outcome

The Image Manager demonstrates my ability to build secure, user-centric web applications with organized data structures and intuitive user flows. It highlights strengths in authentication, nested data handling, image processing, and clean UI/UX design—all packaged in a full-stack architecture.