Skip to content
Back to projects

Sustainability innovation platform

EcoSpark

EcoSpark Frontend is the client-side application for a sustainability innovation platform. It supports public discovery, authenticated dashboards, idea moderation, campaign workflows, community interaction, and paid access to premium ideas.

Brief description

A role-based sustainability platform where users can discover eco ideas, manage campaigns, access premium innovation content, and collaborate around environmental solutions.

Next.js 16React 19TypeScriptTailwind CSS 4TanStack QueryTanStack FormZodAxios

Public GitHub repository with deployed frontend and connected backend API.

EcoSpark preview

Frontend commits

43

Role-based flows

Multiple

Deployment

Vercel

Engagement summary

Main technology stack used

Next.js 16React 19TypeScriptTailwind CSS 4TanStack QueryTanStack FormZodAxios

Role

Frontend architecture + full-stack integration

Timeline

Recent project

Year

2026

Scope

Frontend architecture, responsive UI implementation, API integration, form validation, role-based user flows, and deployment.

Audience

Eco-conscious users, sustainability contributors, campaign organizers, moderators, admins, and users interested in premium innovation ideas.

Deliverables

Public sustainability discovery interface
Authenticated role-based frontend workspace
Campaign, idea, moderation, and community UI flows

Challenges faced while developing the project

Sustainability-focused communities often lack a structured digital platform where members, contributors, and admins can manage eco ideas, campaigns, collaboration, and paid knowledge access in one consistent workflow.

Design a frontend that supports both public browsing and authenticated role-based workflows.
Keep complex sustainability features organized without overwhelming the user experience.
Integrate multiple API-driven flows while maintaining type safety and predictable frontend state.

Solution and implementation

I built a modern frontend architecture using Next.js, React, TypeScript, TanStack Query, TanStack Form, Zod, Axios, and Tailwind CSS. The application separates public discovery from authenticated workspace flows and connects with a backend API for role-based platform features.

Built the frontend with a modern Next.js and TypeScript stack for maintainability and scalability.
Used TanStack Query for structured server-state management and Axios for API communication.
Added schema-based validation with Zod and TanStack Form to keep user input reliable across complex forms.
Structured the UI around clear feature areas such as ideas, campaigns, community flows, moderation, and paid access.

Potential improvements and future plans

The project creates a scalable frontend foundation for sustainability communities, improving idea discovery, campaign visibility, role-based access, and user interaction across the platform.

Results

Delivered a production-ready frontend connected to a live backend API.
Created a cleaner user journey for discovering, submitting, managing, and interacting with sustainability ideas.
Established a strong foundation for expanding the platform with more community and monetization features.

What I would improve next

Improve dashboard analytics for platform admins and campaign organizers.
Add stronger loading, empty, and error states across all API-driven pages.
Enhance SEO metadata and public idea detail pages for better discoverability.
Add automated frontend tests for critical user flows.