Welcome to MatchMate, the ultimate marriage media application designed to help you find your ideal partner and build your dream love story. Our platform is user-friendly, feature-rich, and crafted to make your journey to love seamless and memorable.
- Tech Stack
- Features
- Credintails
- Installation
- Usage
- Configuration
- Dependencies
- Development Dependencies
- Troubleshooting
- License
- Secure Authentication – Integrated with Firebase for seamless login and user management.
- Premium Subscription – Stripe-powered payment integration for premium services.
- Interactive UI – Built with React, Tailwind CSS, and animations via Lottie.
- Digital Payment Gateway – global transactions and real-time processing.
- Role Based Dashboard – Keep track of matches, request, and others things.
- Live-Link
- admin email: admin@gmail.com
- admin pass: Asdf!1
- Node.js (Latest LTS recommended)
- npm or yarn installed
- Vite for development
-
Clone the repository:
git clone https://github.com/Najmul-Shaon/Match-Mate-Client.git cd Match-Mate-Client -
Install dependencies:
npm install
-
Create a
.env.localfile in the root directory and add the following:VITE_apiKey=YOUR_FIREBASE_API_KEY VITE_authDomain=YOUR_FIREBASE_AUTH_DOMAIN VITE_projectId=YOUR_FIREBASE_PROJECT_ID VITE_storageBucket=YOUR_FIREBASE_STORAGE_BUCKET VITE_messagingSenderId=YOUR_FIREBASE_MESSAGING_SENDER_ID VITE_appId=YOUR_FIREBASE_APP_ID VITE_IMGBB_KEY=YOUR_IMGBB_KEY VITE_PK_STRIPE=YOUR_STRIPE_PUBLIC_KEY
-
Start the development server:
npm run dev
-
Open http://localhost:5173 in your browser.
- Sign Up or Log In using Firebase authentication.
- Create your profile, upload image.
- Explore Matches using AI-powered recommendations.
- Request & Interact with potential partners.
- Upgrade to Premium via Stripe for exclusive features.
MatchMate uses environment variables to configure Firebase, IMGBB, and Stripe. Make sure to update .env.local with your own credentials.
MatchMate is built using the following technologies:
- Frontend Framework: React
- State Management: TanStack React Query
- Styling: Tailwind CSS
- Animations: Lottie React
- Authentication: Firebase
- Databage: MongoDb
- Payments: Stripe
- Data Fetching: Axios
"dependencies": {
"@lottiefiles/dotlottie-react": "^0.12.1",
"@smastrom/react-rating": "^1.5.0",
"@stripe/react-stripe-js": "^3.1.1",
"@stripe/stripe-js": "^5.5.0",
"@tanstack/react-query": "^5.64.1",
"axios": "^1.7.9",
"firebase": "^11.1.0",
"flowbite": "^2.5.2",
"localforage": "^1.10.0",
"lottie-react": "^2.4.0",
"match-sorter": "^8.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet-async": "^2.0.5",
"react-hook-form": "^7.54.2",
"react-hot-toast": "^2.5.1",
"react-icons": "^5.4.0",
"react-loader-spinner": "^6.1.6",
"react-parallax": "^3.5.1",
"react-router-dom": "^7.1.1",
"react-select": "^5.9.0",
"react-tooltip": "^5.28.0",
"recharts": "^2.15.0",
"sort-by": "^1.2.0",
"sweetalert2": "^11.15.10",
"swiper": "^11.2.1"
}"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"eslint": "^9.17.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"vite": "^6.0.5"
}-
App doesn't start? Make sure you've installed all dependencies:
npm install
-
Environment variables not working? Ensure you’ve created the
.env.localfile and restarted the server. -
Firebase errors? Verify your Firebase credentials in
.env.local. -
Payment issues? Confirm that you’re using valid Stripe API keys.
This project is licensed under the MIT License.