|
1 | | -# upload-center |
2 | | -GCP template |
| 1 | +# Upload Center 🌆 |
| 2 | + |
| 3 | +A full-stack web application for uploading, storing, and managing data, powered by **Google Cloud Platform**. |
| 4 | +Designed for scalability, modularity, and modern DevOps workflows. |
| 5 | +Built with React, Express, PostgreSQL, and deployed via **Cloud Run** using secure **Cloud SQL Proxy** connections. |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +## 🔗 Live Demo |
| 10 | + |
| 11 | +> 🔗 [upload-center on Cloud Run](https://upload-center-177749780343.us-central1.run.app/) |
| 12 | +
|
| 13 | +--- |
| 14 | + |
| 15 | +## 🛠️ Tech Stack |
| 16 | + |
| 17 | +- **Frontend:** React (Vite + TypeScript) |
| 18 | +- **Backend:** Node.js + Express |
| 19 | +- **Database:** PostgreSQL (Google Cloud SQL) |
| 20 | +- **Infra:** Google Cloud Run (Dockerized) |
| 21 | +- **Security:** Cloud SQL Auth Proxy (Unix socket connection) |
| 22 | +- **CI/CD:** GitHub Actions + Docker |
| 23 | + |
| 24 | +--- |
| 25 | + |
| 26 | +## ✨ Features |
| 27 | + |
| 28 | +- ✅ Secure DB access using Cloud SQL Proxy |
| 29 | +- 🌍 React frontend hosted by Express |
| 30 | +- ⚖️ PostgreSQL cloud-native database |
| 31 | +- ♻️ GitHub Actions for automatic deploys |
| 32 | +- ⚡ TypeScript end-to-end (frontend) |
| 33 | + |
| 34 | +--- |
| 35 | + |
| 36 | +## 📂 Project Structure |
| 37 | + |
| 38 | +``` |
| 39 | +/frontend # React Vite frontend |
| 40 | +/backend # Express server + DB API routes |
| 41 | +/backend/db.js # PostgreSQL connection (via Cloud SQL Proxy) |
| 42 | +/.env # Local environment variables (gitignored) |
| 43 | +/.github/workflows/google-cloudrun-docker.yml # GitHub Actions CI/CD |
| 44 | +``` |
| 45 | + |
| 46 | +--- |
| 47 | + |
| 48 | +<!-- ## ⚙️ Local Development |
| 49 | +
|
| 50 | +### 1. Clone the repo |
| 51 | +
|
| 52 | +```bash |
| 53 | +git clone https://github.com/your-name/upload-center.git |
| 54 | +cd upload-center |
| 55 | +``` |
| 56 | +
|
| 57 | +### 2. Set up backend environment variables |
| 58 | +
|
| 59 | +Create `backend/.env`: |
| 60 | +
|
| 61 | +```env |
| 62 | +DB_USER=postgres |
| 63 | +DB_PASSWORD=yourpassword |
| 64 | +DB_HOST=your-cloud-sql-ip (or socket path) |
| 65 | +DB_NAME=upload_city |
| 66 | +DB_PORT=5432 |
| 67 | +``` |
| 68 | +
|
| 69 | +### 3. Start the frontend |
| 70 | +
|
| 71 | +```bash |
| 72 | +cd frontend |
| 73 | +npm install |
| 74 | +npm run dev |
| 75 | +``` |
| 76 | +
|
| 77 | +### 4. Start the backend |
| 78 | +
|
| 79 | +```bash |
| 80 | +cd backend |
| 81 | +npm install |
| 82 | +node server.js |
| 83 | +``` |
| 84 | +
|
| 85 | +--- |
| 86 | +
|
| 87 | +## ☁️ Cloud Deployment (Cloud Run + Cloud SQL Proxy) |
| 88 | +
|
| 89 | +### 1. Build the frontend |
| 90 | +
|
| 91 | +```bash |
| 92 | +cd frontend |
| 93 | +npm run build |
| 94 | +``` |
| 95 | +
|
| 96 | +### 2. Docker build & push (CI/CD or manual) |
| 97 | +
|
| 98 | +```bash |
| 99 | +docker build -t gcr.io/YOUR_PROJECT_ID/upload-center . |
| 100 | +docker push gcr.io/YOUR_PROJECT_ID/upload-center |
| 101 | +``` |
| 102 | +
|
| 103 | +### 3. Set Cloud Run env vars |
| 104 | +
|
| 105 | +Add these variables to your Cloud Run service: |
| 106 | +
|
| 107 | +``` |
| 108 | +DB_USER=postgres |
| 109 | +DB_PASSWORD=yourpassword |
| 110 | +DB_NAME=upload_city |
| 111 | +DB_PORT=5432 |
| 112 | +INSTANCE_CONNECTION_NAME=your-project:region:cloudsql-instance |
| 113 | +``` |
| 114 | +
|
| 115 | +### 4. Attach Cloud SQL Connection |
| 116 | +
|
| 117 | +- Go to Cloud Run > Edit > Connections |
| 118 | +- Add your SQL instance under **"Cloud SQL Connections"** |
| 119 | +
|
| 120 | +### 5. Redeploy & test |
| 121 | +
|
| 122 | +- Revisit your deployed Cloud Run URL |
| 123 | +- Confirm `/api/products` returns DB data |
| 124 | +
|
| 125 | +--- --> |
| 126 | + |
| 127 | +## 🤔 Future Work |
| 128 | + |
| 129 | +- Upload product images to Google Cloud Storage |
| 130 | +- Add user authentication (e.g. Firebase Auth or Clerk) |
| 131 | +- Admin dashboard for product management |
| 132 | +- Search, filtering, and pagination features |
| 133 | + |
| 134 | +--- |
| 135 | + |
| 136 | +## 👨💼 Author |
| 137 | + |
| 138 | +Created by [@stefanbobrowski](https://github.com/stefanbobrowski) — feel free to reach out or contribute! |
| 139 | + |
| 140 | +--- |
| 141 | + |
| 142 | +## 📄 License |
| 143 | + |
| 144 | +Licensed under the **Apache License 2.0**. See [LICENSE](./LICENSE) for details. |
0 commit comments