How himavarshithreddy/mongosnap works
1. Repository shape
- MongoSnap is a two-app monorepo: apps/frontend is the React/Vite client, and apps/backend is the Node.js/Express API.
- The root workspace (pnpm-workspace.yaml, root package.json) ties the two together, and deployment is automated via GitHub Actions plus deploy.sh.
2. Overall system boundary
- The frontend is the user-facing shell for authentication, query building, schema browsing, billing, and support.
- The backend is the trust boundary: it owns authentication, authorization, database connections, query execution, AI prompt handling, payments, email, and persistence to MongoDB.
3. Primary request flow
- A user logs in on the React app, which stores session/auth state in UserContext and route guards in ProtectedRoutes.
- Authenticated screens such as QueryInterface, SchemaExplorer, SavedQuery/history views, and Settings call backend APIs.
- The backend validates the user, checks usage/limits, performs the requested operation, and returns results for rendering in the client.
4. Core application domain
- The central product is MongoDB query generation and management.
- utils/geminiApi.js suggests AI-assisted generation of MongoDB queries from natural language.
- utils/queryExecutor.js and utils/databaseManager.js indicate that the backend can connect to user-provided MongoDB instances, inspect schemas, and execute queries on behalf of the user.
5. Persistence layer
- The backend uses Mongoose models for the application’s state: User, Connection, SavedQuery, QueryHistory, UserUsage, and RefreshToken.
- Supporting records include BugReport, Contact, PaymentTransaction, and likely security/verification state via auth-related models.
- MongoDB Atlas is the persistent store for both account data and operational records.
6. Authentication and session security
- Authentication is split across dedicated routes: auth.js, oauth.js, forgotpassword.js, verify.js, twofactor.js, and middleware.
- The presence of RefreshToken and totpgenerator.js indicates token refresh plus 2FA/TOTP support.
- The frontend has dedicated login/reset/OAuth pages and protected routes, so the app separates public marketing/auth flows from the authenticated workspace.
7. Payments and premium access
- Premium “SnapX” access is managed through the payment subsystem: payment.js, PaymentTransaction, PaymentHelper.js, paymentUtils.js, and cashfree.js.
- Cashfree is the external payment gateway, and the backend likely verifies payment callbacks before activating subscription status or lifting usage limits.
- The frontend includes payment and success/failure pages plus upgrade prompts tied to usage limits.
8. Notifications and support
- utils/mailer.js handles transactional email, with the README calling out Brevo/SMTP for verification, password reset, login alerts, and related notifications.
- In-app support is modeled as BugReport and Contact routes/models, with admin-facing UI components for reviewing submissions.
9. Frontend structure
- The client is organized by concern: reusable UI in components, route-level screens in pages, auth state in contexts, and policy content in data.
- Main app surfaces include the public marketing site, login/signup, the query playground, pricing, settings, payment, OAuth flows, and policy pages.
- Components like QueryInterface, SchemaExplorer, SessionManager, QueryHistory, and UsageLimitPrompt reflect the product’s core workflow: inspect, generate, run, and manage queries.
10. Operational and workflow boundaries
- The backend has an uploads directory containing at least one uploaded collection archive, so file import/export is part of the operational surface.
- routes/test.js and the CI/deploy files suggest separate testing/deployment concerns from the product API itself.
- Hosting is described as AWS for the app and MongoDB Atlas for data, with HTTPS, CORS, rate limiting, CSRF, JWT, and 2FA forming the security envelope around the service.
11. How to draw the architecture
- Place the React/Vite frontend at the edge, talking over HTTP to an Express API.
- Put MongoDB Atlas behind the API as the primary datastore.
- Show external integrations off the backend: Gemini for AI generation, Cashfree for payments, SMTP/Brevo for email.
- Emphasize that the backend is not just CRUD; it is the orchestration layer for query execution, account security, billing, and usage enforcement.
Main entry points: index.js API app · frontend Client app · queryExecutor.js Query service · databaseManager.js DB manager
Components 26
Monorepo
Workspace and deployment glue for both apps.
Frontend
React/Vite client and user workspace.
- Client app · Browser application for authentication, query workflows, billing, and support.
apps/frontend - Public shell · Public pages and shared layout for marketing and auth entry points.
apps/frontend/src/components/PublicLayout.jsx - Auth state · Client session state and protected route gating.
apps/frontend/src/contexts/UserContext.jsx - Playground · Query interface, schema browsing, history, session, and usage prompts.
apps/frontend/src/components/QueryInterface.jsx - Admin support · Bug reports, contact submissions, and review surfaces.
apps/frontend/src/components/AdminBugReports.jsx - Billing UI · Upgrade, payment, and success/failure flows for SnapX access.
apps/frontend/src/components/Payment.jsx - Policy pages · Terms, privacy, and refund content rendered in-app.
apps/frontend/src/data/privacyPolicyContent.js
Backend
Express API, business logic, and persistence boundary.
- API app · Node.js Express service that owns trust, orchestration, and persistence.
apps/backend/index.js - Auth routes · Login, OAuth, password reset, verification, and 2FA endpoints.
apps/backend/routes/auth.js - Domain routes · Connection, query history, bug report, contact, and test endpoints.
apps/backend/routes/connection.js - Payments · Subscription and transaction handling for premium access.
apps/backend/routes/payment.js - Security · Request validation, auth checks, and service hardening.
apps/backend/routes/middleware.js - Query service · Generates, inspects, and executes MongoDB queries.
apps/backend/utils/queryExecutor.js - DB manager · Manages user database connections and schema access.
apps/backend/utils/databaseManager.js - AI helper · Gemini-assisted natural language to MongoDB query generation.
apps/backend/utils/geminiApi.js - Payment core · Payment helper logic and Cashfree integration.
apps/backend/utils/PaymentHelper.js - Mail service · Transactional email for verification, resets, and alerts.
apps/backend/utils/mailer.js - Data models · User, connection, query, usage, token, and support records.
apps/backend/models/User.js
Integrations
Third-party services and infrastructure outside the repo.
- MongoDB Atlas · Primary persistence for accounts, operational state, and records.
- Gemini · External AI service used for query generation.
- Cashfree · External payment processor for premium access.
- SMTP/Brevo · External email delivery for transactional notifications.
- GitHub Actions · Automated deployment workflow for the monorepo.
Connections 29
- MongoSnap → Workspace: defines · Workspace configuration ties the apps together.
- MongoSnap → Deploy: automates · Deployment is driven by workflow and script.
- MongoSnap → Client app: contains · Frontend lives under apps/frontend.
- MongoSnap → API app: contains · Backend lives under apps/backend.
- Deploy → GitHub Actions: runs on · GitHub Actions executes deploy workflow.
- Client app → Public shell: renders · Public pages and shared layout.
- Client app → Auth state: tracks session · Client auth state and protected routing.
- Client app → Playground: drives · Main product workflow for queries and schema browsing.
- Client app → Admin support: exposes · Support and moderation surfaces.
- Client app → Billing UI: handles · Upgrade and payment screens.
- Client app → Policy pages: shows · Policy content rendered in the client.
- Client app → API app: calls api · Authenticated screens talk to the Express backend.
- API app → Auth routes: routes · Authentication and identity endpoints.
- API app → Domain routes: routes · Application and support endpoints.
- API app → Payments: routes · Billing and subscription endpoints.
- API app → Security: guards · Middleware enforces trust boundaries.
- API app → Query service: orchestrates · API delegates query work to service utilities.
- API app → DB manager: connects · Manages MongoDB connections and schema inspection.
- API app → AI helper: uses · AI prompt handling and generation.
- API app → Payment core: uses · Payment processing helpers.
- API app → Mail service: uses · Transactional notification delivery.
- API app → Data models: persists via · Mongoose models back application state.
- Query service → DB manager: depends on · Query execution needs connection management.
- Query service → AI helper: consults · Natural language to query generation.
- Payment core → Cashfree: integrates · Cashfree is the external payment gateway.
- Mail service → SMTP/Brevo: delivers via · SMTP/Brevo sends transactional email.
- Data models → MongoDB Atlas: stores in · Primary persistent datastore.
- DB manager → MongoDB Atlas: connects to · User database connections and operational records.
- AI helper → Gemini: calls · Gemini provides AI-assisted generation.