🍃 MongoDB Atlas Setup Guide for Singularity

Complete setup guide for MongoDB Atlas with GoGrab Space project

🎯 Connection Details

🔒 Security Notice: Connection credentials are stored in .env.local (never commit to git!)

To get your connection string:

1. Log into MongoDB Atlas
2. Go to Database > Connect > Drivers
3. Copy connection string and URL-encode special characters in password
4. Add to .env.local: MONGODB_CONNECTION_STRING=<your_connection_string>

Cluster: <your-cluster>.mongodb.net
Database: singularity-dev (for development)
Username: Set in MongoDB Atlas
Password: 🔒 See .env.local

🔥 Current Issues & Solutions

1. CORS Policy Issue ❌

Problem: Browser blocks direct calls to MongoDB Atlas Data API

Access to XMLHttpRequest at 'https://data.mongodb-api.com/app/data-hnbqp/endpoint/data/v1/action/findOne' 
from origin 'http://localhost:5400' has been blocked by CORS policy

Solution: MongoDB Atlas Data API requires proper CORS configuration or server-side proxy.

2. Browser Limitations ⚠️

Direct browser access to MongoDB Atlas Data API is not recommended for production apps due to:

• CORS restrictions
• API key exposure in client-side code
• Security vulnerabilities

✅ Recommended Approach: Local-First Development

Based on your MongoDB documentation, here's the best approach:

Phase 1: Local Development (Current) 🏠

🥇 PRIORITY: IndexedDB (Local Browser Database)
🥈 BACKUP: Firebase Firestore (Real-time features)
🥉 FUTURE: MongoDB Atlas (Production scaling)

Phase 2: Production Deployment 🚀

Use MongoDB Atlas with proper server-side integration:

• Server-side API: Express.js/Node.js backend
• MongoDB Driver: Direct connection using connection string
• Atlas App Services: MongoDB Realm for web apps

🛠️ MongoDB Atlas Configuration Steps

Step 1: Atlas App Services Setup

1. Go to MongoDB Atlas Console

   • Visit: https://cloud.mongodb.com/
   • Login with your credentials

2. Create Atlas App Services Application

   Project: GoGrab Space
   Application: singularity-app
   Cluster: Cluster0
   

3. Configure HTTPS Endpoints

   • Create custom HTTPS endpoints for CRUD operations
   • These endpoints don't have CORS restrictions

Step 2: VS Code MongoDB Extension (From Screenshot)

Follow the setup shown in your screenshot:

1. Install MongoDB for VS Code Extension
2. Connect with Connection String:

   # Get your connection string from .env.local file
   mongodb+srv://<USERNAME>:<URL_ENCODED_PASSWORD>@<CLUSTER>.mongodb.net/
   

3. Create Playground for testing queries
4. Explore Collections and manage data

Step 3: Environment Variables

Update your environment files:

# .env.local (🔒 NEVER commit this file!)
# Get connection string from MongoDB Atlas Dashboard
NX_MONGODB_CONNECTION_STRING=mongodb+srv://<USERNAME>:<URL_ENCODED_PASSWORD>@<CLUSTER>.mongodb.net/
NX_MONGODB_DATABASE=singularity-dev
NX_MONGODB_API_KEY=<your-atlas-api-key>

🔧 Current Development Strategy

Since CORS blocks direct browser access, we're using a local-first approach:

What's Working Now ✅

🟢 IndexedDB: Local browser database (PRIMARY)
🟢 Firebase Firestore: Real-time sync (SECONDARY)  
🟡 MongoDB Atlas: CORS blocked (FUTURE)
🔴 Redis: Disabled for local development

Benefits of Local-First

• Instant development: No network dependencies
• Offline capabilities: Works without internet
• Fast performance: Local database operations
• No CORS issues: Browser-native IndexedDB
• Easy debugging: Dev tools integration

📊 MongoDB Atlas Integration Roadmap

Option A: Atlas App Services (Recommended)

Browser App → Atlas App Services HTTPS Endpoints → MongoDB Atlas
✅ No CORS issues
✅ Built-in authentication
✅ Real-time triggers
✅ Server-side validation

Option B: Server-Side Proxy

Browser App → Your Express.js API → MongoDB Atlas
✅ Full control over API
✅ Custom business logic
✅ Multiple database support

Option C: MongoDB Realm Web SDK

Browser App → MongoDB Realm Web SDK → MongoDB Atlas
✅ Direct browser connection
✅ Built-in authentication
✅ Real-time sync

🧪 Testing Current Setup

Your app should now show these messages:

✅ Browser polyfills loaded - Node.js globals available
🚀 LOCAL-FIRST DATABASE INITIALIZATION
📦 1. Initializing local IndexedDB database...
✅ Local database connection successful
🔥 2. Initializing Firebase Firestore...
✅ Firebase connection successful
⚠️ 3. MongoDB Atlas blocked by CORS - using local database for development
⏸️ 4. Redis disabled for local development
✅ Database initialization complete - Local development ready!

🎯 Next Steps

Immediate (Working Now)

1. ✅ Continue with IndexedDB - Fully functional local development
2. ✅ Test block creation - Create and persist logic blocks locally
3. ✅ Build app features - Focus on core functionality

Future MongoDB Integration

1. Atlas App Services Setup - When ready for cloud scaling
2. HTTPS Endpoints - Configure custom endpoints for your app
3. Data Migration - Move from IndexedDB to Atlas when needed

📚 Resources

• MongoDB Atlas Documentation
• Atlas App Services
• MongoDB Connection Guide
• CORS and Web Security

🎉 Summary

✅ Fixed IndexedDB version conflicts
✅ Fixed MongoDB connection string format
✅ Added CORS-aware error handling
✅ Disabled Redis for local development
✅ Prioritized local-first development approach

Your Singularity app is now ready for rapid local development! 🚀

The CORS errors are expected and handled gracefully. Focus on building features with the robust local IndexedDB setup, and integrate MongoDB Atlas via App Services when you're ready to scale to production.