Green Pulse
A full-stack environmental community platform featuring interactive eco-challenges, member progress tracking, and a robust multi-role admin system.
Overview
Green Pulse is a community-driven environmental platform designed to motivate individuals to take real-world eco-friendly actions. Users can browse, join, and complete sustainability challenges — earning points and tracking their environmental impact over time.
The platform is backed by a robust, role-based architecture that serves three distinct audiences: Members who engage with challenges, Admins who manage platform content, and Super Admins who oversee the entire operation with analytics and user management capabilities.
The project was deployed with a decoupled architecture — the Next.js frontend is hosted on Vercel and the Express.js + Prisma backend is deployed on Render, communicating via a secure REST API.
The Challenges
- Implementing secure, multi-role authentication for Members, Admins, and Super Admins
- Building a dynamic challenge system with real-time submission and approval workflows
- Visualizing platform-wide analytics in an intuitive admin dashboard
- Managing file uploads (profile images, challenge proofs) in a production environment
- Ensuring stable deployment across two separate cloud providers (Vercel + Render)
The Solution
- Implemented JWT-based auth with role-specific middleware and protected routes in Next.js
- Built a full submission lifecycle: member submits → admin reviews → super admin approves
- Integrated Recharts for interactive data visualizations across admin dashboards
- Used FormData-based API calls to handle file uploads securely with Express.js
- Resolved Prisma client output path issues and configured tsup for a stable production CJS build
Architecture & Tech Stack
I chose a modern, high-performance stack to ensure scalability and developer productivity.
Core Capabilities
Multi-Role Access Control
Granular role-based access for Members, Admins, and Super Admins — each with dedicated dashboards, sidebars, and API permission layers.
Eco-Challenge System
Members can browse, join, and submit proof of completion for eco-challenges. Admins review and approve submissions through a streamlined workflow.
Admin Analytics Dashboard
Super Admins get an at-a-glance view of platform activity with Recharts visualizations for user growth, challenge completions, and submission trends.
Member Progress Tracking
Members track their earned points, completed challenges, and overall environmental impact through a personalized dashboard.
File Upload Support
Challenge submission proofs and profile images are handled via secure FormData uploads, processed by the Express.js backend.
Production-Ready Deployment
Frontend on Vercel with edge-optimized delivery and backend on Render with a TypeScript-compiled CJS bundle and live PostgreSQL database.
Key Engineering Decisions
One of the most technically involved aspects of the project was resolving Prisma's custom output path configuration in a bundled TypeScript production build. By configuring `tsup` to treat the Prisma client as external and setting the correct `NODE_PATH` on Render, the backend achieved a stable, production-grade CJS output.
The submission approval workflow introduced real-world state management challenges — solved by using TanStack Query with optimistic cache invalidation, ensuring the UI stays in sync with the backend without full page reloads.
Role-based routing in Next.js 15 was implemented via a `proxy.ts` middleware (replacing the deprecated `middleware.ts` pattern), guarding all dashboard routes based on the decoded JWT role claim.
Ready to see it in Action?
Explore the live deployment or deep dive into the source code on GitHub.