{"id":18831742,"url":"https://github.com/bjnandi/containerize-full-stack-app-mern-with-docker-compose","last_synced_at":"2025-09-21T00:58:14.650Z","repository":{"id":200047832,"uuid":"704703797","full_name":"bjnandi/containerize-full-stack-app-MERN-with-docker-compose","owner":"bjnandi","description":"For the dockerize a full stack web MERN application using docker-compose we create separate ‘Dockerfile’ for the frontend (client) \u0026 backend (server) to create a docker image and we use MongoDB official docker imager for containerizing and defining their configurations in a docker-compose.yml file. ","archived":false,"fork":false,"pushed_at":"2024-09-22T18:06:58.000Z","size":12769,"stargazers_count":18,"open_issues_count":0,"forks_count":23,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T04:16:47.350Z","etag":null,"topics":["cloudinary","cloudinary-integration","containerization","crud-operation","docker","docker-compose","docker-image","dockerfile","expressjs","full-stack","full-stack-web-development","fullstack-development","image-management","mern-project","mern-stack","mongodb","nodejs","reactjs","webdevelopment"],"latest_commit_sha":null,"homepage":"https://biswajitnandi.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bjnandi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-13T21:36:24.000Z","updated_at":"2025-03-23T12:18:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"adfc3da7-8abc-4ff2-9933-00b50f6fdac0","html_url":"https://github.com/bjnandi/containerize-full-stack-app-MERN-with-docker-compose","commit_stats":null,"previous_names":["bjnandi/containerize-full-stack-web-application-mern-with-docker-compose"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bjnandi/containerize-full-stack-app-MERN-with-docker-compose","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjnandi%2Fcontainerize-full-stack-app-MERN-with-docker-compose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjnandi%2Fcontainerize-full-stack-app-MERN-with-docker-compose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjnandi%2Fcontainerize-full-stack-app-MERN-with-docker-compose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjnandi%2Fcontainerize-full-stack-app-MERN-with-docker-compose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bjnandi","download_url":"https://codeload.github.com/bjnandi/containerize-full-stack-app-MERN-with-docker-compose/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjnandi%2Fcontainerize-full-stack-app-MERN-with-docker-compose/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276179897,"owners_count":25598571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-20T02:00:10.207Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloudinary","cloudinary-integration","containerization","crud-operation","docker","docker-compose","docker-image","dockerfile","expressjs","full-stack","full-stack-web-development","fullstack-development","image-management","mern-project","mern-stack","mongodb","nodejs","reactjs","webdevelopment"],"created_at":"2024-11-08T01:55:51.884Z","updated_at":"2025-09-21T00:58:14.604Z","avatar_url":"https://github.com/bjnandi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Containerize Your Full Stack Web Application (MERN) with Docker Compose\n\nWelcome to our comprehensive guide on Containerizing a full stack Web MERN (MongoDB, Express.js, React, Node.js) application using Docker Compose involves creating separate containers for each component of the application \u0026 defining their configurations in a docker-compose.yml file.\n\nBy integrating Grafana for dashboards, Loki for log aggregation, and Prometheus for metrics collection, this setup with advanced alerting, receive timely notifications based on custom thresholds.\n\n# Diagram\n[![Containerize Your Full Stack Web Application (MERN) with Docker Compose TechTips CloudComputing DevOps DevOpsTools DevOpsPipeline DevOpsLife bjnandi biswajitnandi Biswajit Nandi](/Containerize.webp)](https://github.com/bjnandi/containerize-full-stack-app-MERN-with-docker-compose \"Containerize Your Full Stack Web Application (MERN) with Docker Compose\")\n\n# Demo\n[![Containerize Your Full Stack Web Application (MERN) with Docker Compose TechTips CloudComputing DevOps DevOpsTools DevOpsPipeline DevOpsLife bjnandi biswajitnandi Biswajit Nandi](/Containerize.gif)](https://github.com/bjnandi/containerize-full-stack-app-MERN-with-docker-compose \"Containerize Your Full Stack Web Application (MERN) with Docker Compose\")\n\n\n## For more Details\n\n### Containerize Your Full Stack Web Application (MERN) with Docker Compose \u003cbr\u003e\nhttps://medium.com/@bjnandi/containerize-your-full-stack-web-application-mern-with-docker-compose-4900156ba9dd\n\n\n### 📣 Follow \u0026 Show Your Support ⭐️\n\nIf you found this project helpful, please give it a star! ⭐️ It helps others discover the project and motivates us to continue improving it.\n\nStay updated with my latest projects and articles:\n\n- **GitHub**: Follow me on [GitHub](https://github.com/bjnandi) to see my latest repositories and contributions.  \n  [![Follow @bjnandi](https://img.shields.io/github/followers/bjnandi?label=Follow%20%40bjnandi\u0026style=social)](https://github.com/bjnandi)\n\n- **Medium**: Follow me on [Medium](https://medium.com/@bjnandi) to read my latest articles and insights.  \n  ![Medium Badge](https://img.shields.io/badge/Medium-Follow%20Me%20on%20Medium-000?logo=medium\u0026style=social)\n\n\u003cbr\u003e\nThank you for your support and interest in my work! \u003cbr\u003e\nHappy coding! 💻✨\n\u003cbr\u003e\u003cbr\u003e\n\n**🙏 Special Thanks:** A huge thank you to [@doubtcrack](https://github.com/doubtcrack) for amazing MERN Stack base [Cloudinary-CRUD-Operations](https://github.com/doubtcrack/Cloudinary-CRUD-Operations) projects!\n\n\u003chr\u003e\n\n## Cloudinary CRUD Operations MERN Stack Application\n\n![CloudinaryCRUD](https://blogger.googleusercontent.com/img/a/AVvXsEjxAV4b4O51XK-glRlRGRyOl6ctrfN_Ch0JCQHN05kxSTgvdRo7Q98y8SzMnuvROuQEj1w10HZTemiUZpbLw6bfy6fctqOBBJa83RfDzKruLRn234FqlZJxW5FMJixVuwIgVH9tbD2uro31T2FvP7zkcXjHYR29ZfZY3G1YoYLRZ8Pv0ycADkX7-AyKGKlZ=w1200-h1200)\n\n## Table of Contents\n\n- [Project Description](#dproject-description)\n- [Key Features](#key-features)\n- [Why I Chose This Project](#why-i-chose-this-project)\n- [Tech Stack Used](#tech-stack-used)\n- [Challenges Faced](#challenges-faced)\n- [User Interface (UI)](#user-interface-ui)\n- [Read Project Article](#learn-more-about-this-project)\n- [Demo Link](#demo-link)\n- [API Endpoints](#api-endpoints)\n- [Setup Guide](#setup-guide)\n\n## Project Description\n\nThe Cloudinary CRUD operations MERN stack application is a web project designed for efficient image management. It allows users to perform CRUD operations (Create, Read, Update, Delete) on images using the MERN (MongoDB, Express.js, React.js, Node.js) stack. The application leverages Cloudinary, a cloud-based image management platform, for secure and streamlined image handling.\n\n### Key Features\n\n- CRUD operations for images\n- MERN stack development\n- Cloudinary integration for image management\n- User-friendly interface built with React.js\n- Efficient image storage and retrieval with MongoDB\n- Streamlined image handling for web applications\n\n## Why I chose this Project\n\nI decided to work on the Cloudinary CRUD operations MERN stack application for several reasons. Firstly, it provided a hands-on opportunity to understand the practical aspects of image management in web applications. This project allowed me to enhance my skills in creating, updating, and deleting images—essential skills for a developer.\n\nAdditionally, the project aligns with industry trends by utilizing the MERN stack, a versatile and popular technology combination. Exploring this stack provided me with proficiency in a holistic development approach, covering both frontend and backend aspects.\n\nMoreover, the integration of Cloudinary into the project allowed me to work with a powerful cloud-based image management solution. This enhanced my understanding of how cloud-based services can elevate application functionalities.\n\nIn essence, I chose the Cloudinary CRUD operations MERN stack project to gain practical experience in handling images within web applications, explore the MERN stack, and work with a prominent cloud-based image management solution like Cloudinary.\n\n### Tech Stack Used\n\n- MongoDB\n- Express.js\n- React.js\n- Node.js\n- Cloudinary\n\n## Challenges Faced\n\nDuring the development of the Cloudinary CRUD operations MERN stack application, a significant challenge was seamlessly integrating with Cloudinary for image management. This involved ensuring secure image uploads, tracking changes made to images, and efficiently managing resources.\n\nSecurely handling image uploads and accommodating various image formats and sizes added complexity. Additionally, accurately reflecting modifications or deletions to images in the Cloudinary database required meticulous attention to detail.\n\nThe challenge extended beyond technical aspects to considerations for user experience. Striking the right balance between functionality, security, and user-friendliness was crucial in overcoming this challenge and delivering a reliable image management system.\n\n## User Interface (UI)\n\n### Home Page\n\n![Home Page](https://blogger.googleusercontent.com/img/a/AVvXsEjmV5wckWNomIlEey_amKZCenczQDREj8NWhQfX0xesSMS7uQ4mfWOTY9RJwDBX7eZHEbWWpSSynIlMrbxdLzmKvuE0Gi5r2asaSKuutKhzzJcZyfEOKB1fV8ZvnHu70L7Wflhs0KWfzCGiFba7wTB-wfxssCW4Iz25rdvVM-SKq5cisdxDBmCz5pH6yhTp=w1200-h1200)\n\n### Edit Page\n\n![Edit Page](https://blogger.googleusercontent.com/img/a/AVvXsEjPPUL7P5rCEdfoS4RVoTj_cFP7iQlJID3hLh8OlDEW9qBudsxcS3JWbmZpgTjME_P9fJPXeiA3ZCWfDnE_yaN8_n5ZNwu3OOrl7kXHomFQdGWo6ZPac8bS33buMDnxmJYeBC5WwaxndnG3JsXrbCtvs-olKDu-bEmhAFnRv3PnnBfBRP7zaBN135a9QA1m=w1200-h1200)\n\n### Add Page\n\n![Add Page](https://blogger.googleusercontent.com/img/a/AVvXsEiFc38V5xdnro0qIeYC__Upajj0f4A1-morNKmzFDdIOZBlmg1Ipu_yTkWioo9Zzj292ZmWl4WWf3y1sQCQPBqw8TNwQwT3amuN1VXdWMdwtDG24lYvXIL2rK7jXV5Yi3SCnKs_dztrwJr0ozswpN_T-Dn8bfDMIMZ2wXb6fxhkABWiWOg-57NQ8PSrRheW=w1200-h1200)\n\n## Learn More About this Project\n\nYou can find the full article for this project [here](https://tksuryavanshi.blogspot.com/2023/10/cloudinary-crud-operations-mern-stack.html).\n\n## Demo Link\n\nCheck out the live version preview of this project [here](https://cloudinary-crud-operations.vercel.app/).\n\n## API Endpoints\n\n### User\n\n- **POST** `/user`: Create a new user\n- **GET** `/user`: Get all users\n- **GET** `/user/{id}`: Get a user by ID\n- **PUT** `/user/{id}`: Update a user by ID\n- **DELETE** `/user/{id}`: Delete a user by ID\n\n## Setup Guide\n\nFollow these steps to set up and run the Cloudinary CRUD operations MERN stack application locally:\n\n1. **Clone the Repository:**\n\n   ```bash\n   git clone https://github.com/doubtcrack/Cloudinary-CRUD-Operations.git\n   cd Cloudinary-CRUD-Operations\n\n   ```\n\n2. **Installing Dependencies:**\n   ```bash\n    cd client\n    npm install\n    cd ../server\n    npm install\n   ```\n3. **Setting Up `.env` Credentials**\n\n   To enable seamless image management functionalities, you'll need Cloudinary API credentials, and for saving those images location and other data you will need mongodb url.\n\n   Follow these steps:\n\n   1. Obtain Cloudinary API \u0026 MongoDB credentials.\n   2. Create a `.env` file in the `server` directory.\n   3. Add your credentials to the `.env` file:\n\n   ```env\n   CLOUDINARY_CLOUD_NAME=your-cloud-name\n   CLOUDINARY_API_KEY=your-api-key\n   CLOUDINARY_API_SECRET=your-api-secret\n   MONGO_URI=your-mongodb-uri\n   ```\n\nCreate a `.env` file in your client directory and provide your live server URL\n\n    REACT_APP_SERVER_URL= your-server-url\n\n4. **Starting the Server**\n\n   Start the server by running the following command in the server directory:\n\n   ```\n   cd server\n   npm start\n   ```\n\n5. **Starting the Client**\n\n   Begin the client application with the following command in the client directory:\n\n   ```\n   cd client\n   npm start\n   ```\n\n6. **Accessing the Application**\n\n   You're all set! Open your browser and go to http://localhost:3000 to access the Cloudinary CRUD operations application.\n\n## Contribute and Support ❤️\n\nIf you find this project useful and would like to contribute or show your support, we welcome your involvement. Feel free to submit pull requests, report issues, or share your feedback. Your contributions make this project even better!\n\nAlso, don't forget to give a star ⭐ to this repo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjnandi%2Fcontainerize-full-stack-app-mern-with-docker-compose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbjnandi%2Fcontainerize-full-stack-app-mern-with-docker-compose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjnandi%2Fcontainerize-full-stack-app-mern-with-docker-compose/lists"}