# ☁️ CloudIn – Cloud-Based Image Storing Platform

CloudIn is a full-stack application designed to let users upload, view, and manage images in the cloud. It features a Spring Boot backend and an Expo (React Native) frontend.

---

📚 Table of Contents

• ✨ Introduction
• 🚀 Get Started
  • 📦 Backend Setup (Spring Boot)
  • 📱 Frontend Setup (Expo React Native)
• 🔐 Environment Variables
  • Frontend .env
  • Backend application.properties
• 📂 Project Structure
• 🛠️ Technologies Used
• 🔗 Live Project

---

✨ Introduction

CloudIn is a cloud-based image storing platform that allows users to:

• Upload and delete images
• View images in a gallery
• Persist image data securely using MongoDB and Cloudinary

It is composed of:

• A Spring Boot backend for image and user API
• An Expo React Native frontend for mobile and web interface

---

🚀 Get Started

📦 Backend Setup (Spring Boot)

1. Clone the repo:

   git clone https://github.com/your-username/cloud_in.git
   cd cloud_in/cloud_in_backend

2. Install dependencies and run:

   • Using Maven:

     ./mvnw spring-boot:run

   • Or via your IDE (IntelliJ/VSCode): Run CloudInBackendApplication.java

---

📱 Frontend Setup (Expo React Native)

1. Navigate to frontend directory:

   cd cloud_in/cloud_in_frontend

2. Install dependencies:

   npm install

3. Set up your environment variables (see below)

4. Start the app:

   npx expo start

---

🔐 Environment Variables

Frontend .env

Place in cloud_in_frontend/.env

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=
EXPO_PUBLIC_API_BASE_URL=
EXPO_PUBLIC_API_MEDIA_URL=
EXPO_PUBLIC_MAX_UPLOADS=

---

Backend application.properties

Place in cloud_in_backend/src/main/resources/application.properties

spring.application.name=
spring.data.mongodb.uri=
server.address=
server.port=
spring.servlet.multipart.max-file-size=
spring.servlet.multipart.max-request-size=

⚠️ Never commit these values directly. Use .env and .gitignore to keep them secure.

---

📂 Project Structure

cloud_in/
│
├── cloud_in_backend/     # Spring Boot backend
│   └── src/main/java/... # Controllers, Models, Repos
│
├── cloud_in_frontend/    # Expo React Native frontend
│   └── app/              # UI and screens
│
├── .gitignore
└── README.md

---

🛠️ Technologies Used

• Frontend: Expo + React Native + NativeWind + React push Notification
• Backend: Spring Boot + MongoDB + Cloudinary
• Auth: Clerk.dev
• Database: MongoDB Atlas
• Image Hosting: Cloudinary

---

🔗 Live Project

https://drive.google.com/drive/folders/15RdvFFPdvnVCiRFUjsaIUZptgxrxjvEB?usp=sharing