Task Match is a dynamic and modern freelance marketplace where clients can post small tasks, and freelancers can bid to secure a job. Whether you need help with design, development, writing, or marketing, Task Match makes it fast and easy to connect with the right talent.
-
✅ Post a Task
Clients can quickly create tasks with details like title, category, deadline, budget, and description. -
🔍 Browse & Bid
Freelancers can explore tasks, view detailed information, and submit competitive bids. -
👤 User Authentication
Login with Google or email/password using Firebase Authentication. -
💼 My Tasks Dashboard
Logged-in users can view, update, or delete their posted tasks. -
📈 Bid Count & Status
Each task displays live bid count and real-time status. -
📬 Email Confirmation & Alerts
Seamless feedback with toasts and modals on task creation or errors. -
🔒 Protected Routes
Access to certain pages is limited to logged-in users only.
- React.js – Component-based UI
- Tailwind CSS + DaisyUI – Utility-first styling with ready-to-use components
- React Router DOM – Routing and navigation
- React Hook Form – Simplified form handling and validation
- Framer Motion – Animation and transitions
- Node.js + Express.js – RESTful API
- MongoDB – Database for storing tasks and bids
- Firebase Auth – Secure authentication and authorization
- Vercel – Backend deployment
- Firebase Hosting – Frontend deployment
| Tool | Purpose |
|---|---|
react-router-dom |
Client-side routing |
react-hook-form |
Form validation |
sweetalert2 |
Modern pop-up alerts |
react-toastify |
Toast notifications |
react-icons |
Icon components |
framer-motion |
UI animations |
daisyui |
Tailwind UI components |
firebase |
Auth & hosting |
axios (optional) |
Simplified HTTP requests |
classnames (optional) |
Conditional CSS class handling |
moment or date-fns |
Date manipulation |
To run locally, create a .env file and add your Firebase config:
VITE_API_URL=https://your-backend-url.com
VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...
💻 Getting Started Locally
Clone the repository:
```bash
git clone https://github.com/your-username/task-match.git
cd task-matchInstall dependencies:
npm installAdd your .env file (see above)
Run the app:
npm run dev🔐 Firebase Setup Go to Firebase Console
Create a new project
Enable Email/Password and Google Auth
Add your credentials to .env
📁 Folder Structure
Task Match
├── public
├── src
│ ├── assets
│ ├── components
│ │ ├── Dashboard
│ │ ├── Login
│ │ ├── Pages
│ │ ├── Register
│ │ ├── ResetPassword
│ ├── Firebase
│ ├── Layouts
│ ├── Provider
│ └── Route
│ └── PrivateRoute.jsx
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── firebase.json
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── tailwind.config.js
└── vite.config.js
# App root
🤝 Contributing Contributions are welcome! To contribute:
Fork the repository.
Create a new branch: git checkout -b feature/your-feature.
Make your changes and commit: git commit -m "Add feature".
Push to the branch: git push origin feature/your-feature.
Open a Pull Request.
## 🧑💻 Author
Md. Yousuf Ali
📬 Contact
👨💻 Developer: Yousuf Ali
📧 Email: mdyousufali.dev@gmail.com
📄 License This project is open source and available under the MIT License.
👨💻 Built with ❤️ by Md. Yousuf Ali – Grapes Market LTD ❤️
Using React, Tailwind CSS, Firebase, and MongoDB
Let me know if you'd like a separate version for the **server-side (backend)** `README.md` as well.
☕ Support Me
