✅ Prompt: Microtask Web App with Admin Control (Full Scope)
> Create a modern, fast-loading, minimalist microtask earning web app using the
following tech stack:
HTML5 + Tailwind CSS (using a white-black-blue color theme)
Vanilla JavaScript (no frameworks)
Firebase Realtime Database for dynamic task loading and user data
Firebase Authentication for user login/signup
Firebase Hosting for deployment
🔹 The app will consist of two main interfaces:
1. index.html (User Interface):
A responsive and lightweight dashboard where users can:
View their balance (in USD and BDT)
Complete tasks (like YouTube watch, link visit, etc.)
Submit proof via a step-based modal system (3–4 steps)
Request withdrawals through local methods (bkash, nagad, rocket, binance) — shown
dynamically based on Firebase settings
View referral code and task completion stats
2. admin.html (Admin Panel):
A powerful, clean control panel for managing:
All tasks (Create/Edit/Delete)
Currency conversion rate (USD to BDT)
Available payment methods (toggle on/off)
Minimum withdrawable amount (in USD)
Approving/rejecting proof submissions and withdrawal requests
Maintenance mode toggle and global settings
🔸 Color Scheme:
White: Backgrounds (#ffffff)
Black: Text/Headers (#000000 / #111111)
Blue: Highlights, Buttons (#1D4ED8 / #2563EB)
🔸 Functional Requirements:
User Side (index.html):
Show tasks from Firebase (only active ones)
Dynamic balance calculation: Points in USD × conversion rate from Firebase
Step-based modal to do tasks → submit proof → confirmation
Responsive layout with grid-based task cards
Admin Side (admin.html):
Firebase Auth protected (only allow admin UID)
Add/Edit/Delete tasks with details like title, type, reward, duration
Toggle payment methods on/off (bkash, nagad, etc.)
View and approve submitted proofs
View and process withdrawal requests
Update live settings like rate, min withdrawal, and maintenance
🔸 Firebase Data Structure (Example):
settings: {
usdToBdtRate: 120,
minWithdrawUsd: 1.00,
paymentMethods: {
bkash: true,
nagad: true,
rocket: false,
binance: true
}
},
tasks: {
taskId123: {
title: \"Watch YouTube Video\",
type: \"youtube\",
url: \"https://...\",
reward: 0.03,
duration: 30,
active: true
}
},
users: {
uid123: {
points: 1.25,
submittedTasks: {
taskId123: {
status: \"pending\",
proof: \"https://imgur.com/...\"
}
},
referralCode: \"boss001\"
}
},
withdrawRequests: {
uid123: {
requestId789: {
amountUsd: 2.5,
method: \"bkash\",
number: \"01xxxxxxxxx\",
status: \"pending\"
}
}
}
🔸 Performance Goals:
No frameworks, no heavy libraries
Tailwind CSS only (custom build preferred)
Modular JS files: /js/auth.js, /js/index.js, /js/admin.js
CDN-based Firebase SDK for better load times
Hosted on Firebase Hosting with HTTPS + caching
🔸 Pages to Build:
index.html – user dashboard with dynamic task view, proof submission, balance &
referral system
admin.html – full admin control panel with settings, approvals, and task/payment
management, in-built admin auth.
login.html – Firebase Auth with login & sign-up for users
🎯 This app should be clean, lightweight, lightning fast, and fully manageable by
the admin — even payment options, withdrawal limits, and currency rates.
