Unveil

See Through the Noise, Rise Above the Divide - An AI-powered platform empowering Indians with media literacy and social awareness.

Created on 22nd February 2025

•

Problem: Users struggle to determine the credibility and importance of news stories in an overwhelming media landscape
Solution:
- Implemented a dual-track story comparison system that differentiates between "viral" and "important" content
- Created comprehensive metrics for accuracy (up to 95%) and bias (as low as 15%)
- Developed source analysis tools that track the number of sources referenced

Problem: Readers often have difficulty identifying different forms of media bias
Solution:
- Built an AI-powered analysis system that provides bias ratings
- Created interactive learning modules specifically focused on bias detection
- Implemented visual indicators (color-coded progress bars) to show bias levels
- Added comparison tools to show how similar stories are covered differently

Problem: Many users lack formal training in media analysis and fact-checking
Solution:
- Developed a comprehensive learning hub with structured modules
- Created an interactive game system with multiple difficulty levels
- Implemented a certification track for systematic skill development
- Added achievement systems to encourage continued learning
- Structured content into clear categories: Bias Detection, Fact Checking, Source Analysis, Critical Thinking

Problem: Important stories often receive less attention than viral content
Solution:
- Created a side-by-side comparison system for viral vs. important stories
- Implemented engagement metrics to show the disparity in attention
- Added sharing tools to promote important stories
- Developed a scoring system that highlights significant news items

Challenge: Managing multiple interconnected states across game progress, user achievements, and learning modules
Solution:
- Implemented React's useState and useEffect hooks for local state management
- Created separate components for different functionality (MediaLiteracyGame, StoryComparison)
- Developed clear state interfaces for metrics and progress tracking

Challenge: Handling animations and transitions without impacting performance
Solution:
- Utilized Framer Motion for optimized animations
- Implemented staggered animations for better performance
- Created efficient component rendering with proper React patterns
- Used CSS glass morphism effects with performance considerations

Challenge: Creating a consistent experience across different screen sizes
Solution:
- Implemented a grid system with responsive breakpoints
- Used Tailwind CSS for consistent spacing and sizing
- Created flexible card layouts that adapt to different screen sizes
- Optimized touch interactions for mobile devices

Challenge: Building reusable components while maintaining specific functionality
Solution:
- Created modular components (StoryCard, StoryComparison)
- Implemented consistent prop interfaces
- Used composition for complex components
- Maintained clear component hierarchies

Challenge: Creating intuitive feedback for user actions and progress
Solution:
- Implemented progress bars with color coding
- Created animated transitions for state changes
- Added hover effects for interactive elements
- Developed clear visual hierarchies for information

Technologies used

Next.js

Python

Tailwind CSS

FastAPI

React.js

GenAI

Groq