🚀 NewsQuest — Play the News. Predict the Future.

🧠 Overview

NewsQuest is a full-stack, AI-powered, gamified news platform that transforms passive news consumption into an interactive learning experience for the users.

Instead of endlessly scrolling headlines, users can:

🎮 Play through news like a game 🧪 Solve quizzes generated from real articles 🔮 Predict future outcomes of world events ⚔️ Battle other users in real-time quiz challenges 📈 Earn XP, maintain streaks, and climb leaderboards

Built with modern web technologies and AI-powered content generation

NewsQuest combines education, engagement, prediction intelligence, and competitive gameplay into one immersive platform.

=======

🎥 Demo

Watch the project demo and screenshots here:

https://drive.google.com/drive/folders/1Oovq3uGSwtUBX1nqZK2-f2wLChszdKnX

🧠 Overview

NewsQuest is a gamified news intelligence platform that turns everyday news into a story-driven learning game.

It blends:

real news articles
AI-generated quizzes
predictive gameplay
social competition
progress tracking

This makes current events engaging, memorable, and fun.

🌍 Problem Statement

Traditional news platforms are often:

❌ Passive and boring ❌ Difficult to retain and understand ❌ Overwhelming with endless information ❌ Lacking interaction and personalization ❌ Not designed for younger digital audiences

This results in low engagement, poor knowledge retention, and reduced critical thinking around current events.

======= Most news apps are:

❌ passive and text-heavy
❌ hard to retain
❌ low on engagement
❌ missing meaningful feedback loops

NewsQuest changes that by making news:

✅ interactive
✅ game-like
✅ reward-driven
✅ knowledge-centered

💡 Solution

NewsQuest solves this by combining:

📰 Interactive news consumption 🧪 AI-generated quizzes 🔮 Real-world prediction systems ⚔️ Competitive battle modes 🏆 XP, streaks, and gamification 🤖 AI-powered content generation 📡 Real-time backend systems

The platform transforms news into a daily learning game that rewards curiosity, consistency, and critical thinking.

🏗️ Platform Architecture

🔷 High-Level Flow

News APIs → Backend Processing → AI Content Generation → Quiz & Prediction Engine → Supabase Database → React Frontend → User Gameplay → XP / Leaderboards / Streak Tracking

🤖 AI-Powered Intelligence System

NewsQuest uses AI to intelligently enhance news content and gameplay.

🧠 AI Quiz Generation

Role: Automatically generate MCQs from live news articles.

Powered By:

Qwen API
NewIO API

Features:

Context-aware questions
Instant explanations
Difficulty balancing
Fast response generation

Output:

Multiple-choice questions
Correct answers
Explanations
XP rewards

🔮 AI Prediction Engine (USP 🚀)

Role: Turn real-world events into prediction challenges.

Examples:

“Will inflation rise next month?”
“Will this bill pass parliament?”
“Will Team X win the finals?”

Features:

Confidence-based answering
Prediction history tracking
Accuracy analytics
Long-term performance scoring

Output:

User prediction score
Accuracy percentage
Prediction leaderboard ranking =======

Structured stories for fast reading
Topic categories like Polity, Economy, Tech, and Health
Featured headlines and personalized summaries

🧪 2. AI Quiz System

4 quiz questions per article
Instant feedback and scoring
Quiz content generated from article metadata
Built to reinforce reading and retention

🔮 3. Prediction Engine

Article-based prediction prompts
Confidence-driven answer format
Outcome tracking for accuracy over time
Designed to make learners think about context and consequences

📰 Smart News Feed

Features

✅ Bite-sized news format ✅ Fast and clean reading experience ✅ Category-based filtering ✅ Mobile-first UI ✅ Interactive article experience

Categories include:

Politics
Economy
Technology
Sports
Science
Global Affairs

🧪 Quiz System

Every article includes interactive quizzes.

Features

🎯 2–3 AI-generated MCQs per article ⚡ Instant feedback 📘 Answer explanations ⭐ XP rewards for correct answers 📊 Performance tracking

⚔️ Battle Mode

Real-Time Competitive Gameplay

Users can compete against others in live quiz battles.

Features

⚡ Fast-paced question answering 🏆 Bonus XP rewards 📈 Rank progression 🎮 Competitive learning environment

Battle scoring depends on:

Accuracy
Speed
Consistency

⭐ XP & Gamification System

Users earn XP by:

📰 Reading articles 🧪 Solving quizzes 🔮 Making predictions ⚔️ Winning battles 🔥 Maintaining streaks

Gamification Features

🏆 Global leaderboards 📅 Daily quests 🔥 Daily streak tracking 🎖️ Level progression system

🔥 Streak System

Role: Encourage consistent learning habits.

Features:

Daily login streaks
Reading streaks
Quiz streaks
XP multipliers for consistency =======

Real-time competition with other players
Battle sessions, queue joining, and invites
Points earned for speed and correctness
Competitive gameplay built on news knowledge

⭐ 5. XP, Levels & Rewards

Gain XP through reading, quizzes, predictions, and battles
Level progress shown in dashboard UI
Encourage continuous exploration and habit building

🔥 6. Streaks & Daily Goals

Daily engagement tracking
Reward streaks for consistent users
Encourages return visits and sustained learning

🧠 7. Cause Chain & Critical Thinking

Cause-chain exercises for article analysis
Break down event logic and consequences
Reinforces deeper understanding beyond headlines

🤖 AI-Powered Content

NewsQuest uses AI to create:

quiz questions
prediction scenarios
article summaries
cause-chain prompts

Key AI integrations

🏆 Leaderboard System

Global rankings based on:

⭐ XP earned 🧪 Quiz performance 🔮 Prediction accuracy ⚔️ Battle victories

Features:

Weekly resets
Competitive ranking
User progression tracking =======

Bytez for article intelligence
Supabase for real-time data and user sync

📅 Daily Quest System

Users receive dynamic daily objectives such as:

✅ Read 5 articles ✅ Complete 3 quizzes ✅ Make 2 predictions ✅ Win 1 battle

Rewards: ⭐ Bonus XP 🏆 Progress boosts 🔥 Streak protection

⚙️ Backend & Database

🗄️ Supabase Integration

Supabase powers:

✅ Authentication
✅ Database storage
✅ Real-time systems
✅ User progression tracking =======

🔹 Backend

Node.js + TypeScript
Express server with API routing
Rate limiting and error handling
Caching for news and article content

🔹 Database

User profiles
XP & levels
Quiz history
Predictions
Streak data
Leaderboards

🖥️ Frontend

Tech Stack

React.js
TypeScript
Tailwind CSS
Vite

Features

✨ Modern gaming-inspired UI 🌙 Dark theme with neon accents 📱 Mobile-first responsive design ⚡ Smooth transitions & animations

⚡ Backend

Features

✅ News aggregation ✅ AI quiz generation ✅ Prediction processing ✅ Real-time gameplay systems ✅ XP & progression handling ✅ Supabase integration

🧠 Core Gameplay Loop

Read news 📰 Take quiz 🧪 Make prediction 🔮 Battle players ⚔️ Earn XP ⭐ Maintain streak 🔥 Climb leaderboard 🏆 Repeat 🔁

🚀 Future Scope

Planned Features

🤖 AI-generated summaries 🎤 Voice-based news (TTS) 🧍 Avatar progression system ⚔️ Multiplayer tournaments 🧠 Personalized recommendations 📊 Advanced analytics dashboard 📱 Mobile app version

🔐 Security & Best Practices

✅ Environment variables protected using .env ✅ Supabase authentication system ✅ API keys hidden via .gitignore ✅ Modular scalable architecture ✅ Type-safe frontend using TypeScript

🧪 How to Run Locally

Prerequisites

Node.js 18+
npm
Internet connection for news APIs

1️⃣ Backend Setup

cd backend
npm install

Create:

backend/.env.local

Add:

NEWSDATA_API_KEY=your_api_key

Run backend:

npm run start

Default backend URL:

http://127.0.0.1:3001
=======
- Supabase for authentication and storage
- Stores user progress, activity, predictions, and leaderboard stats
- Real-time updates for engaged gameplay

---

## 🎮 Player Experience

1. Read a news article
2. Answer quiz questions
3. Predict the likely outcome
4. Earn XP and rewards
5. Join a leaderboard battle
6. Track streaks and progress

---

## 📂 Project Structure

```bash
NewsQuest-main/
├── backend/               # Express + TypeScript backend
│   ├── src/
│   │   ├── routes/        # auth, news, battle, predictions, leaderboard, cause chain
│   │   ├── services/      # news data, battle logic, user activity
│   │   └── lib/           # AI content generation, profile sync
│   ├── package.json
│   └── tsconfig.json
├── frontend/              # React + Vite + Tailwind frontend
│   ├── src/
│   │   ├── pages/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── lib/
│   │   └── store/
│   ├── package.json
│   └── vite.config.ts
├── SQL_MIGRATION_EXECUTE_ME.sql
└── README.md

2️⃣ Frontend Setup

cd frontend
npm install
npm run dev

Default frontend URL:

http://127.0.0.1:4000

=======

🚀 Tech Stack

Frontend: React, Vite, TypeScript, Tailwind CSS, Radix UI, Zustand, React Router
Backend: Node.js, Express, TypeScript, Supabase, dotenv, cors
Data: Supabase, custom news generation logic, cached article metadata
Deployment: npm scripts, build-ready Express server

🧩 API Endpoints

News

GET /api/news
GET /api/news/search?q=...
GET /api/news/category/:type
GET /api/news/featured
POST /api/news/generate

Activity

POST /api/activity/track
GET /api/activity/heatmap/:userId

Battle

GET /api/battle/session?userId=...
POST /api/battle/queue/join
POST /api/battle/invite

Predictions

POST /api/predictions/resolve

Leaderboard

GET /api/leaderboard

Cause Chain

GET /api/cause-chain/:articleId
POST /api/cause-chain/generate
POST /api/cause-chain/submit
GET /api/cause-chain/stats/:userId

Users

POST /api/users/sync

Health

GET /api/health

🔧 Setup

1. Install dependencies

cd backend && npm install
cd ../frontend && npm install

2. Configure environment

Create backend/.env.local with your keys. Example:

NEWSDATA_API_KEY=your_news_api_key
SUPABASE_URL=https://... 
SUPABASE_KEY=...

If the frontend needs a custom backend, create frontend/.env with:

VITE_API_URL=http://localhost:3001

3. Run locally

cd backend && npm run start
cd ../frontend && npm run dev

4. Access the app

Backend: http://127.0.0.1:3001
Frontend: http://127.0.0.1:4000

🛠️ Useful Scripts

Frontend

npm run dev
npm run build
npm run lint
npm run test

Backend

npm run start
npm run build
npm run typecheck

🌟 What Makes NewsQuest Unique

News becomes a game, not just a feed
AI-generated quizzes and prediction gameplay
Real-time battle mode for knowledge competition
Supabase-backed progress, streaks, and leaderboard
Learning through active news interaction

📌 Future Improvements

native mobile app or PWA
voice-enabled news summaries
daily challenge and achievement system
richer analytics for students and readers
more adaptive AI quiz generation

⚙️ Useful Scripts

Frontend

npm run dev
npm run build
npm run lint
npm run test

Backend

npm run start
npm run build
npm run typecheck

📁 Project Structure

NewsQuest/
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── services/
│   │   ├── utils/
│   │   └── assets/
│   └── package.json
│
├── backend/
│   ├── routes/
│   ├── services/
│   ├── utils/
│   ├── .env.local
│   └── package.json
│
├── public/
├── README.md
└── .gitignore

🏆 What Makes NewsQuest Unique?

👉 Combines news + gaming + AI + prediction systems 👉 Makes current affairs interactive and addictive 👉 Encourages critical thinking & retention 👉 Turns learning into competition 👉 Creates daily knowledge-building habits

🌍 SDG Alignment

SDG	Goal	Implementation
SDG 4	Quality Education	Interactive learning through gamified news
SDG 9	Industry, Innovation & Infrastructure	AI-powered news intelligence platform
SDG 16	Peace, Justice & Strong Institutions	Encourages informed civic awareness

🚀 Key Innovations

🧪 AI-generated quizzes from live news 🔮 Real-world prediction gameplay ⚔️ Real-time battle system ⭐ Full XP & progression mechanics 🔥 Habit-building streak system 🏆 Competitive leaderboard ecosystem 🧠 AI-enhanced educational experience

💬 Final Thought

NewsQuest is not just a news app — it’s a gamified intelligence platform.

“Don’t just read the news. Play it. Predict it. Master it.” 🚀 ======= NewsQuest is more than a news reader — it is a gamified learning companion for curious minds.

“Read, answer, predict, and compete with the news.”

⭐ If You Like This Project

Give it a ⭐ on GitHub and support interactive learning through AI-powered news gaming!!

Name		Name	Last commit message	Last commit date
Latest commit History 38 Commits
backend		backend
frontend		frontend
.DS_Store		.DS_Store
.gitignore		.gitignore
.vercelignore		.vercelignore
README.md		README.md
logo.png		logo.png
miku_cherry_blossom_my_sekai_doll.glb		miku_cherry_blossom_my_sekai_doll.glb
spirit_blossom_kindred.glb		spirit_blossom_kindred.glb
taichi_animations (1).glb		taichi_animations (1).glb
taichi_animations.glb		taichi_animations.glb
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation

🚀 NewsQuest — Play the News. Predict the Future.

🧠 Overview

Built with modern web technologies and AI-powered content generation

NewsQuest combines education, engagement, prediction intelligence, and competitive gameplay into one immersive platform.

🎥 Demo

🧠 Overview

🌍 Problem Statement

This results in low engagement, poor knowledge retention, and reduced critical thinking around current events.

💡 Solution

🏗️ Platform Architecture

🔷 High-Level Flow

🤖 AI-Powered Intelligence System

🧠 AI Quiz Generation

🔮 AI Prediction Engine (USP 🚀)

🧪 2. AI Quiz System

🔮 3. Prediction Engine

📰 Smart News Feed

Features

🧪 Quiz System

Features

⚔️ Battle Mode

Real-Time Competitive Gameplay

Features

⭐ XP & Gamification System

Users earn XP by:

Gamification Features

🔥 Streak System

⭐ 5. XP, Levels & Rewards

🔥 6. Streaks & Daily Goals

🧠 7. Cause Chain & Critical Thinking

🤖 AI-Powered Content

Key AI integrations

🏆 Leaderboard System

📅 Daily Quest System

⚙️ Backend & Database

🗄️ Supabase Integration

Supabase powers:

🔹 Backend

🔹 Database

🖥️ Frontend

Tech Stack

Features

⚡ Backend

Features

🧠 Core Gameplay Loop

🚀 Future Scope

Planned Features

🔐 Security & Best Practices

🧪 How to Run Locally

Prerequisites

1️⃣ Backend Setup

2️⃣ Frontend Setup

🚀 Tech Stack

🧩 API Endpoints

News

Activity

Battle

Predictions

Leaderboard

Cause Chain

Users

Health

🔧 Setup

1. Install dependencies

2. Configure environment

3. Run locally

4. Access the app

🛠️ Useful Scripts

Frontend

Backend

🌟 What Makes NewsQuest Unique

📌 Future Improvements

⚙️ Useful Scripts

Frontend

Backend

📁 Project Structure

Packages