https://github.com/md-zeon/micro-earn-client
Frontend for MicroEarn, a micro-task and earning platform where users can earn rewards by completing tasks. Built with React, Tailwind CSS, and Firebase. Features role-based dashboards for Workers, Buyers, and Admins, real-time notifications, secure authentication, task submissions, and payment processing with Stripe.
https://github.com/md-zeon/micro-earn-client
aos daisyui firebase-auth javascript jwt mongodb motion react reactjs tailwindcss
Last synced: 3 months ago
JSON representation
Frontend for MicroEarn, a micro-task and earning platform where users can earn rewards by completing tasks. Built with React, Tailwind CSS, and Firebase. Features role-based dashboards for Workers, Buyers, and Admins, real-time notifications, secure authentication, task submissions, and payment processing with Stripe.
- Host: GitHub
- URL: https://github.com/md-zeon/micro-earn-client
- Owner: md-zeon
- Created: 2025-07-29T06:19:28.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-12-18T17:21:37.000Z (6 months ago)
- Last Synced: 2025-12-21T20:49:25.760Z (6 months ago)
- Topics: aos, daisyui, firebase-auth, javascript, jwt, mongodb, motion, react, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://micro-earn-7be08.web.app/
- Size: 5.78 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MicroEarn - Client Side
## Overview
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.
## 🌐 Live Site
**URL:** [https://micro-earn-7be08.web.app/](https://micro-earn-7be08.web.app/)
## 👤 Admin Credentials
**Email:** [admin@microearn.com](mailto:admin@microearn.com)
**Password:** Admin@1234
---
## ✨ Key Features
- 🔐 **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 Overview Table
| 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 |
---
## 🛠️ Tech Stack
### Frontend
[](https://reactjs.org/)
[](https://vitejs.dev/)
[](https://tailwindcss.com/)
[](https://daisyui.com/)
[](https://firebase.google.com/)
[](https://stripe.com/)
[](https://tanstack.com/query)
[](https://reactrouter.com/)
[](https://www.framer.com/motion/)
[](https://react-hook-form.com/)
### Backend
[](https://expressjs.com/)
[](https://www.mongodb.com/)
[](https://firebase.google.com/docs/admin)
[](https://stripe.com/docs/api)
[](https://www.npmjs.com/package/dotenv)
---
## 🧪 Pages and Routes
| 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 |
## 🔑 Environment Variables
Create a `.env.local` file in the root:
```env
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_key
```
## 🛠️ Installation
```bash
git clone https://github.com/Programming-Hero-Web-Course4/b11a12-client-side-md-zeon
cd b11a12-client-side-md-zeon
npm install
```
Run the development server:
```bash
npm run dev
```
## 🧾 Notes
- 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](https://micro-earn-server.vercel.app)
## 🧪 Testing
- Tested manually across major routes and dashboard flows.
- Protected routes tested for all roles.
---
## 👥 User Roles
### 👷 Workers
- Browse and complete available tasks
- Earn coins and withdraw real money
- View task history and performance stats
### 💼 Buyers
- Create and manage tasks
- Review and approve/reject submissions
- Monitor task performance and payments
### 🛡️ Admins
- Oversee the entire platform
- Manage users, tasks, and withdrawal requests
- Monitor overall platform statistics and earnings
---
## 📄 License
This project is for educational purpose only.
## 🗂️ Project Structure
```
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
```
### Home Page Sections
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
## 🤝 Contributing
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.
## 📬 Contact
If you have any questions or feedback, feel free to reach out:
**Developer:** Zeanur Rahaman Zeon
**Email:** [zeon.cse@gmail.com](mailto:zeon.cse@gmail.com)
**LinkedIn:** [https://www.linkedin.com/in/zeanur-rahaman-zeon](https://www.linkedin.com/in/zeanur-rahaman-zeon)