All systems operational

Frontend Architecture

The frontend is a React application built with the Next.js App Router, server-rendered where possible, calling the app's own API routes for data.

#Purpose

Explain how the user interface is structured and how it communicates with the backend.

#Architecture

The UI uses the Next.js App Router with React components. Pages are organized by feature area and rendered on the server where possible for performance and security.

Client interactions call the app's server-side API routes; the browser never talks to the database directly for business data — it uses the anon Supabase key only within the bounds RLS allows.

#How it works

1

Render

Next.js renders pages, preferring server components for data-bound views.
2

Interact

Client components handle user actions and call API routes.
3

Authenticate

The user's Supabase session authorizes those API calls.
4

Update

Responses update the UI; sensitive logic stays on the server.

#Implementation notes

  • Server-side rendering keeps data-fetching and permission checks off the client.
  • The public Supabase URL and anon key are the only Supabase values exposed to the browser; RLS protects the data behind them.

#Limitations

Known limitations

  • Business logic that must be trusted lives in API routes, not client components.
  • The browser cannot perform privileged actions directly against the database.

#Security considerations

Security

  • Never place secrets in client components or NEXT_PUBLIC_ variables beyond the intended public values.
  • Do not rely on hiding UI for authorization — the server enforces it.

#Best practices

  • Prefer server components for anything data-bound.
  • Keep client bundles lean.
  • Treat the anon key as public and lean on RLS.
Backend Architecture

Server logic.

Authentication

Sessions.

Configuration & Env

Public vs secret.

Still need help?

Can’t find what you’re looking for? The DevSphere OS team is happy to help.

Contact Support