Challanges #2
Description
Challenge Feature Workflow
- Challenge Creation
Admin (or system) creates challenges.
Each challenge contains:
Picture (thumbnail or clue)
Description (text explaining the task)
Reward points (how much user earns if successful)
Submission type:
text (short answer, proof, link)
media (image/video upload)
Optionally: Campus-based (restricted to college events) or Remote-based (any user).
- Challenge Assignment
User spins the wheel (🎡 fun gamification element).
Wheel randomly selects 3 challenge options.
User chooses one challenge to attempt.
UI: Show 3 cards with challenge picture + description + “Accept” button.
- Challenge Attempt & Submission
User accepts one challenge → redirected to submission form:
If text challenge → input field.
If media challenge → file upload (Cloudinary or S3 for storage).
After submit → result sent to a hidden admin route (not public).
Example: /admin/review-submissions
- Admin Review
Admin panel lists all submissions:
Challenge picture + description
User’s submission (text/media)
Buttons: ✅ Approve / ❌ Reject
On Approve:
User gets reward points added to leaderboard.
On Reject:
No points added.
Optionally notify user (“Challenge not accepted”).
- Leaderboard Integration
Challenge points add to the same leaderboard as game points (or a separate one if you want dual leaderboards).
Leaderboard displays Top 3 candidates globally or per event.
Realtime updates via Socket.IO or periodic polling.
🛠️ Implementation Details
📌 Data Model (example in JSON)
{
"challengeId": "c123",
"title": "Campus Photo Hunt",
"description": "Take a picture of the library entrance.",
"imageUrl": "challenge_thumb.png",
"rewardPoints": 50,
"type": "media",
"scope": "campus"
}
📌 Submission Schema
{
"submissionId": "s789",
"challengeId": "c123",
"userId": "u456",
"submittedAt": "2025-09-12T18:30:00Z",
"answerText": "Here’s my proof...",
"answerMediaUrl": "uploads/user123/library.jpg",
"status": "pending" // can be pending, approved, rejected
}
📌 Spin the Wheel Logic
Implement a roulette spinner UI (CSS animation).
When it stops, backend randomly selects 3 unique challenges.
Return them to frontend:
{
"options": [
{"challengeId": "c101", "title": "Join coding contest"},
{"challengeId": "c102", "title": "Upload group photo"},
{"challengeId": "c103", "title": "Write a tech blog"}
]
}
📌 Admin Dashboard
/admin/review-submissions
Shows:
Pending submissions table.
Approve/Reject buttons.
Workflow:
On Approve → update status = approved, add rewardPoints to user score.
On Reject → status = rejected.
📌 Leaderboard
Table with:
Rank
Username
Total points
Real-time:
Emit leaderboardUpdate event whenever a challenge is approved.
Show Top 3 candidates in a highlighted card UI.
🔄 Full Flow Example
User clicks Spin the Wheel → gets 3 challenge options.
User picks one → sees challenge details + submission form.
User submits (text/media).
Submission → stored as pending.
Admin reviews:
✅ Approves → +points → leaderboard updated.
❌ Rejects → no points.
Leaderboard updates → top 3 visible to everyone.
⚙️ Tech Recommendations
Frontend:
Flutter
Wheel: react-custom-roulette or custom CSS animation
File upload: Cloudinary widget
Backend:
Go
File storage: Cloudinary
DB: Postgres (to track challenges, submissions, leaderboard)
Metadata
Metadata
Assignees
Labels
Type
Projects
Status