The client side of MicroEarn is a responsive micro-tasking platform interface built with React.js and Tailwind CSS. It serves three primary user roles—Workers, Buyers, and Admins—allowing them to interact with tasks, submissions, and earnings through a user-friendly dashboard experience. The app integrates Firebase for authentication, uses React Router for seamless navigation, and communicates securely with the backend via Axios.
URL: https://micro-earn-7be08.web.app/
Email: [email protected]
Password: Admin@1234
- 🔐 Role-Based Authentication – Firebase authentication with Buyer, Worker, and Admin roles
- 📋 Task Creation – Buyers can post tasks with descriptions, instructions, and required workers
- 🨠 Task Discovery – Workers can browse tasks with filters by category, coins, deadline, etc.
- 📝 Task Submission – Workers can submit proof with file upload and message
- ✅ Buyer Review System – Buyers approve/reject submissions; coins awarded upon approval
- 📤 ImgBB Upload – Workers upload task proof/images via ImgBB API
- 💰 Coin-Based Economy – Buyers buy coins with Stripe, Workers earn coins from tasks
- 💸 Withdrawals – Workers can withdraw coins (20 coins = $1, min 200 coins); status = pending until admin approval
- 📊 Dashboards – Role-specific dashboards showing tasks, payments, coins, and submissions
- 📥 Notifications – Real-time alerts for submission approvals, rejections, new tasks, and withdrawals
- 🧑💼 Admin Panel – Manage users, tasks, and approve withdrawals
- 📄 Payment History – Buyers see purchase history; Workers see withdrawals
- 🛡️ Secure Routes – Route protection and role-based redirection
- 🖼️ Profile Management – Edit name, profile photo, and track performance
- 📱 Responsive UI – Fully responsive layout with TailwindCSS + DaisyUI
- 📈 Performance Analytics – Track total coins earned, tasks completed, and payment history
- 🪪 Form Validation – Clean forms using React Hook Form + custom validation
- ⚙️ Custom Hooks – All role and auth logic separated into reusable hooks
| Feature | Description |
|---|---|
| Role-Based Authentication | Separate login access for Workers, Buyers, and Admins |
| Task Creation | Buyers can post detailed tasks with instructions and deadlines |
| Task Submission | Workers can submit task proofs with image upload |
| Buyer Review System | Buyers approve or reject submissions; status updates in real-time |
| Worker Earnings | Earn coins per approved task; track coin balance |
| Coin-Based Economy | Internal system where 20 coins = $1 for withdrawal |
| Stripe Payments | Buyers purchase coins securely using Stripe |
| Withdrawals | Workers can request to withdraw money after earning minimum coins |
| Admin Panel | Manage users, tasks, and withdrawal requests |
| Notifications | Bell-based alert system for submissions, approvals, and withdrawals |
| Route | Description |
|---|---|
/ |
Homepage with banner, features, and top workers |
/login |
User login page |
/register |
User registration page |
/dashboard |
Redirects based on user role |
/dashboard/my-tasks |
Buyer: Manage own tasks |
/dashboard/create-task |
Buyer: Post a task |
/dashboard/payments |
Buyer: View payments |
/dashboard/take-task |
Worker: Browse available tasks |
/dashboard/my-submissions |
Worker: See submitted tasks |
/dashboard/request-withdraw |
Worker: Submit a withdrawal request |
/dashboard/withdrawals |
Worker: View withdrawal history |
/dashboard/all-users |
Admin: View/manage users |
/dashboard/all-tasks |
Admin: View/delete tasks |
/dashboard/stats |
Admin: View platform stats |
/dashboard/withdraw-requests |
Admin: Approve withdrawals |
Create a .env.local file in the root:
VITE_apiKey=your_firebase_api_key
VITE_authDomain=your_firebase_auth_domain
VITE_projectId=your_project_id
VITE_storageBucket=your_storage_bucket
VITE_messagingSenderId=your_messaging_id
VITE_appId=your_app_id
VITE_IMGBB_API_KEY=your_imgbb_api_key
VITE_API_URL=https://micro-earn-server.vercel.app
VITE_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_keygit clone https://github.com/Programming-Hero-Web-Course4/b11a12-client-side-md-zeon
cd b11a12-client-side-md-zeon
npm installRun the development server:
npm run dev- Uses JWT from Firebase for secure API communication.
- Fully responsive and mobile-friendly.
- Includes loading states, error boundaries, and fallback UIs.
- Integrated with backend server hosted at: https://micro-earn-server.vercel.app
- Tested manually across major routes and dashboard flows.
- Protected routes tested for all roles.
- Browse and complete available tasks
- Earn coins and withdraw real money
- View task history and performance stats
- Create and manage tasks
- Review and approve/reject submissions
- Monitor task performance and payments
- Oversee the entire platform
- Manage users, tasks, and withdrawal requests
- Monitor overall platform statistics and earnings
This project is for educational purpose only.
micro-earn-client/
├── public/ # Static assets (SVGs, video, favicon)
├── src/
│ ├── api/ # API utilities
│ ├── assets/ # SVGs and images
│ ├── components/ # Reusable UI components
│ ├── contexts/ # React context providers
│ ├── firebase/ # Firebase config
│ ├── hooks/ # Custom React hooks
│ ├── layouts/ # Page layouts
│ ├── pages/ # Route pages (Home, About, Auth, Dashboard, etc.)
│ ├── providers/ # App-level providers
│ ├── Routes/ # Route protection and role-based routes
│ └── index.css, main.jsx, App.jsx
├── package.json # Project metadata and dependencies
├── vite.config.js # Vite configuration
├── firebase.json # Firebase hosting config
├── eslint.config.js # ESLint configuration
└── README.md
The Home page (src/pages/Home/Home.jsx) features these main sections:
- Hero – Landing banner and introduction
- HowItWorks – Steps to get started
- BestWorkers – Showcase of top workers
- TestimonialSlider – User testimonials
- WhyChooseUs – Platform benefits
- FAQ – Frequently asked questions
Contributions are welcome! Feel free to fork the repo and submit pull requests. Whether it's fixing bugs, improving documentation, or adding new features — all efforts are appreciated.
If you have any questions or feedback, feel free to reach out:
Developer: Zeanur Rahaman Zeon
Email: [email protected]
LinkedIn: https://www.linkedin.com/in/zeanur-rahaman-zeon