MateMatch is a modern web application built to help users find compatible roommates and shared housing opportunities. Built with Next.js 14 and Firebase, it provides a seamless experience for connecting people looking for shared living arrangements.
💡 Click the image above to watch the full demo video on YouTube!
- 🏠 Housing Listings: Browse and manage shared housing opportunities
- 👥 Roommate Matching: Find potential roommates based on compatibility
- 🎯 Smart Filtering: Filter listings by location, price, and amenities
- 🗺️ Location Intelligence: View commute times and nearby amenities
- ⭐ Saved Listings: Save your favorite listings for later
- 💬 Real-time Chat: Communicate with potential roommates
- 🔔 Activity Feed: Stay updated with the latest housing opportunities
- 📱 Responsive Design: Optimized for desktop and tablet experiences
- Framework: Next.js 14, React 18, TypeScript
- UI Components: Shadcn/UI, Radix UI
- Styling: Tailwind CSS
- Icons: Lucide Icons
- Maps: Google Maps API
- Authentication: Firebase Auth
- Database: Firebase Firestore
- Storage: Firebase Storage
- Functions: Firebase Cloud Functions
- Hosting: Vercel
- Data Scraping: Puppeteer, Cheerio
- Date Handling: date-fns
- State Management: React Context, Firebase Hooks
- Location Services: Google Maps API, Distance Matrix API
- Node.js 18 or higher
- npm or yarn
- Firebase account
- Google Cloud account (for Maps API)
- Clone the repository:
git clone https://github.com/tonaldo48/matematch.git
cd matematch- Install dependencies:
npm install- Create a
.env.localfile in the root directory and add your configuration:
# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
# Google Maps Configuration
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key
# Optional: Scraping Configuration
BRIGHT_DATA_USERNAME=your_bright_data_username
BRIGHT_DATA_PASSWORD=your_bright_data_password-
Set up Firebase:
- Create a new Firebase project
- Enable Authentication (Email/Password and Google)
- Create a Firestore database
- Set up Firebase Storage
- Deploy Firestore rules and indexes
-
Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run format- Format code with Prettier
matematch/
├── app/ # Next.js app directory
├── components/ # React components
├── lib/ # Utility functions and configurations
├── hooks/ # Custom React hooks
├── public/ # Static assets
└── types/ # TypeScript type definitions
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature - Make your changes
- Run tests and linting
- Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature/your-feature - Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.