Full Stack Architecture Diagram

This project visualizes a modern full-stack web application architecture using Mermaid.js. The diagram illustrates the relationships between different layers and services commonly used in production-ready applications.

🧭 Client Layer

The frontend of the application runs in the user's browser and communicates with the server via HTTP requests. It handles authentication flows and renders both static and dynamic content.

⚙️ Application Layer

This is where the backend logic resides. It includes:

• Remix / Next.js Server: Handles server-side rendering, API routes, and serves the React frontend.
• Lucia Auth: Manages user sessions and JWT tokens for authentication.
• API / GraphQL / REST: The interface between client and server for data exchange.

🗄️ Infrastructure Layer

These are the backend services that support the application:

• Neon: A serverless Postgres database for data storage.
• Cloudflare R2 / AWS S3: Cloud object storage for file uploads and downloads.
• Redis / Upstash: Used for caching and storing user sessions.

🌐 External Providers

Third-party services that integrate with the application:

• OAuth Providers: For social login using GitHub, Google, etc.
• Email Provider: Services like Resend, Postmark, or AWS SES for sending emails.
• Analytics: Tools like PostHog or Plausible for tracking user events.

🛠️ Setup

To view the diagram:

1. Clone the repo
2. Serve the project using any static file server (npx serve, python -m http.server, etc.)
3. Open index.html in your browser

The diagram is defined in diagram.mermaid and rendered using the Mermaid JavaScript library. Styling is applied via styles.css.

📄 License

MIT