M.tower 🏢✨

Welcome to M.tower !!!

M.tower is a comprehensive Building Management System designed to simplify property management for administrators, enhance convenience for tenants, and ensure efficient collaboration among building members. With its modern UI and real-time data, M.tower provides a seamless experience for all stakeholders.

🚀 Live site URL:

• https://assignment-12-47b30.web.app/
• https://assignment-12-47b30.firebaseapp.com/

Admin Credential :

• Admin Email: zxc@zxc.zxc
• Admin password: zxcZXC

🛠️ Technologies Used:

M.tower is built with modern React-based technologies:

• Frontend: React, React Router, React Icons
• State Management: TanStack React Query, LocalForage
• Authentication: Firebase (Email/Password, Google Auth)
• Styling: Tailwind CSS, DaisyUI
• UI Enhancements: Lottie React, Responsive Carousel
• Google Maps Integration: @vis.gl/react-google-maps
• Notifications: SweetAlert2

🚀 Core Features:

✔ Apartment Availability Status - Displays available and unavailable apartments with floor and room details.
✔ Rent Payment System - Tenants can pay rent securely online.
✔ Discount Coupons - One-time use coupons for rent discounts.
✔ Location Details - Interactive map and description of the building's location at 50 Rd No. 8, Banani, Dhaka.
✔ Tenant Management - Admins can view and manage tenant details.
✔ Notification System - Alerts for due payments, maintenance updates, and special offers.
✔ Modern UI - Responsive and intuitive design with real-time data visualization.
✔ Secure Authentication - Firebase authentication with Email/Google login.
✔ Admin Dashboard - Manage tenant records, payment history, and maintenance requests.
✔ Fully Responsive - Optimized for desktop, tablet, and mobile devices.

📦 Dependencies:

Here are the key dependencies used in this project:

🔹 Frontend Libraries:

• "react": "^18.3.1",
• "react-dom": "^18.3.1",
• "react-router-dom": "^7.1.1",
• "react-icons": "^5.4.0",
• "react-responsive-carousel": "^3.2.23",
• "react-copy-to-clipboard": "^5.1.0"

🔹 Authentication & Storage:

• "firebase": "^11.2.0",
• "localforage": "^1.10.0"

🔹 State Management & API Handling:

• "@tanstack/react-query": "^5.64.2",
• "axios": "^1.7.9"

🔹 Utilities & Sorting:

• "match-sorter": "^8.0.0",
• "sort-by": "^1.2.0"

🔹 Styling & Animations:

• "tailwindcss": "^3.4.17",
• "daisyui": "^4.12.23",
• "lottie-react": "^2.4.0",
• "sweetalert2": "^11.15.10"

🔹 Google Maps Integration:

• "@vis.gl/react-google-maps": "^1.5.0"

🛠️ Setup & Installation:

Follow these steps to run the project locally:

1️⃣ Clone the Repository:

git clone https://github.com/Motiur-Rahman-Dhrubo/Assignment-12-client
cd Assignment-12-client

2️⃣ Install Dependencies:

npm install

3️⃣ Setup Firebase:

• Create a Firebase project on Firebase Console.
• Enable Authentication (Email/Google).
• Copy your Firebase config and create a .env file:

VITE_apiKey_map=AIzaSyAOVYRIgupAurZup5y1PRh8Ismb1A3lLao

VITE_apiKey=AIzaSyBqMoJkWI6qQiBZ8QsArHhLONp_tXAx_hQ
VITE_authDomain=assignment-12-47b30.firebaseapp.com
VITE_projectId=assignment-12-47b30
VITE_storageBucket=assignment-12-47b30.firebasestorage.app
VITE_messagingSenderId=372682021113
VITE_appId=1:372682021113:web:df09b77725714eff4f2a28

4️⃣ Run the Development Server"

npm run dev

This will start the project at http://localhost:5173/

🔗 Resources & Links:

• 🌐 Live Site: M.tower
• 📘 Firebase Docs: Firebase Documentation
• 🎨 Tailwind CSS: Tailwind Docs
• 🔥 React Router: React Router Docs