How pearlpandz/canvas-app works
<explanation>
1. Identify the project type and purpose
- This is a full‑stack web application with a monolithic React frontend and a microservices‑style backend.
- The frontend is a React app (Vite), served via Docker+Nginx.
- The backend consists of two services:
• A Django service (PostgreSQL, user/categorizations, frame templates)
• A Node.js service (frame‑management microservice, MongoDB, file uploads)
- It’s designed for dynamic “frames” (templates) management, user onboarding, roles, subscriptions, and a calendar of festivals.
2. Analyze the file structure
Top level:
• docker‑compose.yml – orchestrates containers
• backend/
– services/django/… – Django API + React nested POC (legacy)
– services/node/… – Node.js frame microservice
• frontend/ – standalone React monolith + Docker + Nginx config
Key patterns:
• Backend = microservices (Django + Node)
• Frontend = single monolithic React SPA
• Infrastructure-as‑code: Dockerfiles + docker‑compose
• Deployment pipeline hinted: GitHub Actions → Docker registry → AWS EC2
3. Extract insights from the README
- Tech stack: React.js (frontend), PostgreSQL & MongoDB (datastores), AWS (hosting), S3 (media).
- Architecture: microservices for backend, monolith for frontend.
- CI/CD: GitHub Actions → Docker containers → EC2.
- Evolves through demos: localstorage → Mongo microservice → user auth & roles → subscription tiers.
4. Core components for the system‑design diagram
a. Frontend layer
• React SPA served by Nginx container
• User’s browser
b. Backend layer
• Django service container
– REST API endpoints (categories, media, user auth)
– Connects to PostgreSQL container
• Node.js service container
– Frame microservice (upload, list, dynamic onboarding)
– Connects to MongoDB container
• (Optionally) Admin console for CSS frame uploads
c. Datastores
• PostgreSQL (hosted in a container or RDS)
• MongoDB (container or managed)
• S3 bucket for storing media files
d. CI/CD & infra
• GitHub Actions → Docker images pushed to registry
• AWS EC2 (Docker host) behind a load balancer
• Docker‑Compose or ECS service definitions
e. External clients & flows
• Browser → (HTTPS) → Nginx → React SPA
• React → (REST) → Django API & Node API
• APIs → (SQL/NoSQL) → Databases
• APIs → (S3 SDK) → S3 for media
5. Relationships & interactions
- User interacts with React SPA.
- SPA issues API calls to Django (categories, user, subscription) and Node (frames).
- Django ↔ PostgreSQL for relational data (users, roles, categories).
- Node ↔ MongoDB for frame documents and metadata.
- Both services push/retrieve media from S3.
- All services run in Docker containers orchestrated by docker‑compose (dev) or ECS (prod).
- CI/CD pipeline builds images, pushes to registry, deploys to AWS EC2.
6. Architectural patterns & principles
- Separation of concerns: dedicated microservices per domain.
- Monolithic SPA for fast iterative delivery.
- Docker containerization for consistency across environments.
- Externalized configuration via environment files & docker‑compose.
- Use of cloud storage (S3) for large binary assets.
- GitOps/CI driven deployments.
7. Diagram‑drawing guidelines
- Use distinct shapes or colors:
• Frontend (blue rectangle)
• Backend services (green cylinders)
• Datastores (cylinders with DB logos)
• CI/CD pipeline (gear icon)
• Cloud infra (AWS EC2, S3 shapes)
- Label each component clearly (e.g., “Django API”, “Node Frame Service”, “PostgreSQL”, “MongoDB”, “S3 Bucket”).
- Show directional arrows:
• Browser → Nginx → React
• React → Django API & Node API
• APIs → DBs & S3
• GitHub Actions → Docker Registry → AWS EC2
- Group containers in deployment environment:
• Development: docker‑compose
• Production: AWS ECS / EC2
- Annotate ports & protocols (HTTPS, WebSocket if any).
- Optionally, layer the diagram:
• Top: Clients & CDN
• Middle: Application services
• Bottom: Databases & storage
• Side: CI/CD pipeline
8. Tailoring to this project
- Emphasize the dual backend services and their distinct datastores.
- Highlight the monolithic SPA’s role as the single frontend entrypoint.
- Call out the dynamic frame onboarding flow and how it touches both Node & Django.
- Show how S3 integrates for media and how Docker‑Compose simplifies local dev.
- For Phase‑2 future: you may collapse “backend/services/django/react” into the monolith, removing legacy POC.
By following these instructions, you’ll produce a detailed, accurate architecture diagram that reflects how the React frontend, Django & Node backends, their databases, S3 media storage, and the CI/CD pipeline fit together in both development and production environments.