• 

  landing page

• 

  digital citizenship module

• 

  Interactive story

Clean Media Project Story

Inspiration

Cameroon's diversity is both its greatest strength and its biggest challenge. With over 250 ethnic languages and cultures, the country has seen its digital spaces become battlegrounds for ethnic tensions. As internet penetration reached 41.9% with over 5 million Facebook users, hate speech began fueling real-world conflicts.

The breaking point came from a simple scenario: Ray casually says women from Anise's ethnic group "are always lazy." Anise freezes—she's heard this before. Hours later, hurt and angry, she retaliates online with equally harmful stereotypes about Ray's tribe. One moment of prejudice creates a cycle that spreads across platforms, reaching teenagers like Andrea who internalize these "artificial realities" about entire ethnic groups.

We realized the same digital tools dividing communities could become laboratories for empathy and understanding.

What it does

Clean Media is an interactive digital literacy platform that breaks cycles of ethnic hate speech through gamified storytelling. Users navigate real scenarios like the Anise-Ray story, making choices and seeing consequences. The platform teaches young Cameroonians to:

• Recognize emotional triggers in online discussions
• Practice de-escalation techniques instead of retaliation
• Build empathy through perspective-taking exercises
• Earn badges for thoughtful decision-making
• Create positive counter-narratives to harmful stereotypes

Built specifically for Cameroon's context with local languages, cultural scenarios, and traditional conflict resolution wisdom integrated into modern interactive experiences.

How we built it

We used Kiro's Spec Mode and Vibe Mode from day one, creating a seamless human-AI collaboration:

Spec-Driven Development: Started with detailed requirements and design documents in .kiro/specs/, breaking down the complex story module into manageable tasks. Kiro helped structure the modular architecture, define TypeScript interfaces, and plan the component hierarchy.

Vibe Mode Iteration: Used conversational development to rapidly prototype and refine components. Kiro understood the cultural sensitivity needed and helped implement features like the badge system, story navigation, and choice mechanics.

Tech Stack: Next.js 15, React 19, TypeScript, Tailwind CSS, Radix UI components Architecture: Modular story system with reusable components, offline-first design, mobile-responsive Testing: Comprehensive Jest and React Testing Library coverage with cultural scenario validation

The collaboration allowed us to move from concept to working platform in record time, with Kiro handling complex state management while I focused on cultural content and user experience design.

Challenges we ran into

Cultural Sensitivity: Balancing authentic scenarios with respectful representation required extensive research into Cameroon's ethnic dynamics and traditional conflict resolution methods.

Technical Complexity: Building a story system that could handle branching narratives, progress tracking, and badge calculations while remaining performant on low-end devices.

Accessibility: Ensuring the platform works across different literacy levels, languages, and device capabilities in Cameroon's diverse digital landscape.

Content Moderation: Designing systems to prevent the platform itself from becoming a space for harmful content while encouraging authentic discussion.

Accomplishments that we're proud of

Zero Lint Errors: Achieved clean, maintainable codebase with comprehensive TypeScript coverage and ESLint compliance through systematic debugging with Kiro.

Modular Architecture: Built a scalable system where new stories, scenarios, and cultural contexts can be easily added without breaking existing functionality.

Cultural Authenticity: Created content that reflects real Cameroonian experiences while providing constructive alternatives to harmful patterns.

Performance Optimization: Achieved fast loading times and offline capabilities essential for Cameroon's connectivity challenges.

Comprehensive Testing: 100% component coverage with culturally-aware test scenarios that validate both technical functionality and social impact.

What we learned

Human-AI Collaboration Works: The combination of human cultural insight and AI technical capability created something neither could build alone. Kiro's ability to rapidly implement complex features while maintaining code quality was game-changing.

Specs + Vibe = Speed: Using structured specifications alongside conversational development created the perfect balance of planning and agility.

Stories Change Behavior: Interactive narratives are more powerful than traditional educational content for addressing sensitive social issues.

Local Context is Everything: Generic solutions fail, success requires deep understanding of specific cultural dynamics and communication patterns.

Technology for Social Good: Code can be a tool for peace-building when designed with empathy and cultural responsiveness.

What's next for Clean Media

Pilot Launch: Deploy in 10 schools across Buea and Douala with 750 students, measuring behavioral change through pre/post assessments.

Content Expansion: Add stories covering other ethnic tensions, gender dynamics, and political discourse patterns specific to Cameroon.

Platform Evolution: Integrate SMS capabilities for low-connectivity areas, add community forums, and develop educator dashboards.

Regional Scaling: Adapt the model for Chad, Nigeria, and Ghana, proving the approach works across Central and West Africa.

Research Impact: Partner with universities to study how interactive storytelling affects real-world behavior change in digital spaces.

Sustainability: Transition to Ministry of Education integration and corporate CSR partnerships for long-term funding.

The ultimate goal: transform Cameroon's digital spaces from sources of division into tools for unity, one story at a time.

Built With

• kiro
• next.js
• shadcn
• tailwindcss
• typescript