💼 Micro Tasking and Earning Platform

A full-featured MERN stack platform where users can register as Workers or Buyers. Workers complete small tasks and earn coins, which they can later withdraw. Buyers can post tasks and pay workers upon approval. The platform includes real-time notifications, Stripe payments, role-based dashboards, and full admin control.

🌐 Live Website: https://aruncse21.web.app (https://aruncse21.web.app)

Admin Email: admin@gmail.com Admin Password: admin@123

---

✨ Features

🧑‍💼 Worker

• Register/Login via Firebase (Email/Password + Google)
• View available tasks
• Submit task proof
• Earn coins for approved tasks
• Withdraw coins (minimum 200 coins)
• View dashboard with earnings and stats
• Notification system

👨‍💼 Buyer

• Post tasks by spending coins
• Monitor and review submissions
• Approve/Reject tasks with optional feedback
• Rejected submissions return worker slots
• Buy coins via Stripe or dummy gateway
• View payment and task stats
• Notifications for new submissions

🛡️ Admin

• View all users, buyers, and workers
• Approve or reject withdrawal requests
• Manage tasks (delete if necessary)
• Manage user roles (upgrade/downgrade/delete)
• Monitor total system stats

🔔 Notification System

• In-app floating popup triggered by:
  • Task submissions
  • Task approval/rejection
  • Withdrawal approvals
• Real-time UI updates using polling

---

🔧 Tech Stack

Frontend

• React + Vite
• React Router DOM
• Tailwind CSS + DaisyUI + MUI Joy
• Axios + React Query
• Firebase Authentication
• SweetAlert2 for alerts
• Lottie for animations

Backend

• Node.js + Express.js
• MongoDB (Native driver)
• JWT for protected routes
• Stripe Payment Integration (Test Mode)
• REST API with role-based access

---

📦 NPM Packages Used

Frontend (client/)

npm install axios react-router-dom firebase sweetalert2 @mui/joy lottie-react @tanstack/react-query daisyui tailwindcss
axios – API calls

react-router-dom – Routing

firebase – Authentication

sweetalert2 – Alert popup

@mui/joy – Component library

lottie-react – Animations

@tanstack/react-query – Data fetching & caching

daisyui – Tailwind UI plugin

tailwindcss – Utility-first CSS

Backend (server/)
bash
Copy
Edit
npm install express cors dotenv jsonwebtoken mongodb stripe cookie-parser
express – Server framework

cors – Cross-origin resource sharing

dotenv – Environment variable loader

jsonwebtoken – JWT authentication

mongodb – MongoDB native driver

stripe – Stripe payment API

cookie-parser – Parse HTTP cookies

📁 Folder Structure
Frontend (client/)
css
Copy
Edit
src/
├── components/
├── context/
├── hooks/
├── layouts/
├── pages/
├── routes/
└── utils/
Backend (server/)
pgsql
Copy
Edit
server/
├── routes/
├── controllers/
├── middlewares/
├── .env
└── index.js
🔐 Environment Variables
Frontend .env
env
Copy
Edit
VITE_API_URL=http://localhost:5000
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
...
Backend .env
env
Copy
Edit
PORT=5000
MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/<dbname>
JWT_SECRET=your_secret_key
STRIPE_SECRET_KEY=your_stripe_secret
🚀 Getting Started (Local Setup)
1. Clone the Repository
bash
Copy
Edit

2. Backend Setup
bash
Copy
Edit
cd server
npm install
npm run dev
3. Frontend Setup
bash
Copy
Edit
cd client
npm install
npm run dev
Make sure to set up .env files in both folders with appropriate keys.

👨‍💻 Developer Info
👤 Arun Kumar Roy
🚀 Portfolio

🔗 LinkedIn