Internship Project for

C-ESG Compass: Building a Culture-First ESG Platform on Supabase + Next.js 14

C-ESG Compass began as Culture for Climate Actions' vision to blend environmental, social, governance, and cultural data on one screen. To make that vision a reality, we leaned on a modern JavaScript tool-chain—Next.js 14, Supabase, Tailwind CSS, and NextUI—plus a translation middleware that switches seamlessly between Greek and English. Below, I outline how each layer fits together and why these choices let us ship a secure, real-time dashboard without compromising developer happiness or user experience.

1. Core Runtime: Next.js 14 (App Router + Server Actions)

At the heart of Compass sits Next.js 14. The App Router handles routing, layouts, and streaming with Partial Prerendering and React 18 Server Components. We rely heavily on Server Actions to run secure, stateless logic—saving ESG submissions, refreshing Supabase queries, and generating PDF certificates—without spinning up a separate REST layer. Because Server Actions are just functions living beside the UI tree, we keep latency low and share type-safe code on both client and server.

1.1 Incremental Static Regeneration for Public Pages

Marketing pages—pricing, methodology, and documentation—ship as static HTML, regenerated in the background whenever content changes in Supabase. This keeps time-to-first-byte under 50 ms worldwide while still serving fresh content.

2. Data Layer: Supabase (Postgres + Realtime)

Supabase provides a hosted Postgres database, row-level security, JWT auth, and a built-in WebSocket channel for live updates—all managed from one dashboard. KPI snapshots, audit logs, and user profiles live in Postgres; file uploads (CSV imports, culture survey PDFs) land in Supabase Storage behind signed URLs. Realtime listeners pump metric deltas straight into the dashboard via websockets, giving sustainability officers instant feedback when new data lands.

2.1 Row-Level Security & Policies

Each tenant’s data is protected by Postgres RLS policies that map Supabase auth UIDs to organization IDs. This lets us share one database while guaranteeing isolation and audit-grade compliance.

3. Styling & Components: Tailwind CSS + NextUI

For rapid UI iteration we combine Tailwind’s utility-first classes with NextUI React components. Tailwind handles spacing, color tokens (including dark mode), and responsive utilities, while NextUI supplies accessible primitives—Data Tables, Tabs, Analytics Cards—aligning visually without custom theming headaches. The result is a dashboard that feels cohesive out of the box yet remains fully tweakable.

4. Internationalization Middleware (Greek ↔ English)

Compass ships with bilingual support baked in. A lightweight middleware.ts reads the Accept-Language header and a persisted user setting, then rewrites routes to /el or /en namespaces. next-intl provides translation hooks inside Server Components, so KPI titles, tooltips, and certification PDFs switch language without an extra network hop. Server Actions honor the same locale, ensuring emails and PDF exports respect user preference automatically.

5. Security & Compliance Pipeline

Every request terminates at Cloudflare WAF before hitting Vercel edge nodes. Supabase’s Postgres cluster encrypts data at rest with AES-256; TLS 1.3 secures traffic in transit. Daily point-in-time backups land in a separate region, and log drains push audit events to an immutable S3 bucket for seven-year retention—key for ESG audit trails.

6. DevOps & Observability

CI/CD runs on GitHub Actions. PRs trigger turbo build, Vitest suites, and ESLint. Successful merges deploy automatically to Vercel preview branches and then to production with a 15-minute canary. Supabase’s built-in Logflare plus Vercel’s monitoring panel surface query latency, Web Vitals, and error traces, while Grafana Cloud scrapes custom Prometheus metrics from the Server Action runtime.

7. Roadmap Highlights

Upcoming work includes role-based data lineage views, Slack-first anomaly alerts powered by Supabase Functions, and an open SDK for third-party cultural-survey providers. All will continue leveraging Server Actions, Tailwind, and the Supabase realtime channel to keep the stack consistent.

8. Conclusion

By marrying Supabase’s secure Postgres backend with Next.js 14 Server Actions, Tailwind, and NextUI, C-ESG Compass delivers a fast, mobile-friendly, bilingual dashboard able to crunch live sustainability data without the weight of legacy enterprise stacks. The technology is modern, but the goal is timeless: give organizations the clarity they need to lead with values—and back those values with verifiable data.

Enter a URL above to start browsing

No URL loadedStatus: ReadyReady

Unlocking Sustainability Through Data: A Look Inside C-ESG Compass