https://github.com/nazmulxdev/building-management-system-client
A modern single building management system's client site.
https://github.com/nazmulxdev/building-management-system-client
axios daisyui framer-motion leaflet lottie-react react-leaflet react-router reactjs recharts stripe-payments tailwindcss tanstack-query
Last synced: 27 days ago
JSON representation
A modern single building management system's client site.
- Host: GitHub
- URL: https://github.com/nazmulxdev/building-management-system-client
- Owner: nazmulxdev
- Created: 2025-08-02T05:17:23.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-08-16T12:33:05.000Z (5 months ago)
- Last Synced: 2025-08-16T14:23:25.610Z (5 months ago)
- Topics: axios, daisyui, framer-motion, leaflet, lottie-react, react-leaflet, react-router, reactjs, recharts, stripe-payments, tailwindcss, tanstack-query
- Language: JavaScript
- Homepage: https://my-house-6de15.web.app/
- Size: 2.13 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BuildMate - Building Management System (Client-Side)
This is the client-side of "BuildMate," a full-stack, responsive web application designed as a comprehensive Building Management System. It provides distinct functionalities for regular users, members (tenants), and an administrator to manage a single building efficiently.
[](https://my-house-6de15.web.app/)
[](https://github.com/nazmulxdev/Building-Management-system-Server)
[](https://my-house-server.vercel.app/)
---
### **Project Overview**
The objective of this project is to deliver a robust and user-friendly platform for managing building operations. This includes apartment listings, user agreements, a secure payment system, announcements, and role-based dashboards. The application is built with a modern tech stack, ensuring a seamless and responsive user experience on all devices.
---
### **Key Features**
✅ **Role-Based Access Control:**
- **User Role:** Can browse apartments and make agreement requests.
- **Member Role:** Has a dedicated dashboard to make payments, view payment history, and see announcements.
- **Admin Role:** Full control over the system, including member management, agreement approvals, coupon management, and posting announcements.
✅ **Secure Payments with Coupon System:**
- Integrates **Stripe** for secure, card-based payment processing.
- Members can apply valid coupon codes on the payment page to receive a percentage-based discount on their rent before finalizing the transaction.
✅ **Interactive Home Page:**
- A dynamic banner with auto-sliding images.
- An "About the Building" section with elegant typography.
- A dedicated section to display available coupons.
- An integrated map (Leaflet) showing the building's location.
✅ **Apartment Browsing & Agreements:**
- A paginated list of all available apartments (6 per page).
- Search functionality to filter apartments by a specific rent range.
- Users can request an agreement for an apartment, which is then sent to the admin for approval.
✅ **Secure Authentication:**
- Email/Password and Google-based login and registration system.
- Password validation (uppercase, lowercase, min. 6 characters).
- JWT-based authentication to protect private routes and user data.
✅ **Comprehensive Dashboards:**
- **User/Member:** View personal profile information and announcements.
- **Member:** Access the secure payment page and view a detailed payment history.
- **Admin:** A powerful dashboard to manage members, approve/reject agreements, create and manage coupons, and post announcements.
- **Admin Profile:** Displays key statistics like total rooms, available/unavailable room percentages, and user/member counts.
---
### **Technologies & Dependencies**
This project is built with the following technologies and packages:
- **UI & Components:** `@mantine/core`, `daisyui`, `react-icons`, `lottie-react`
- **Data Fetching & State:** `@tanstack/react-query`, `axios`
- **Routing:** `react-router`
- **Forms:** `react-hook-form`
- **Payments:** `@stripe/react-stripe-js`, `@stripe/stripe-js`
- **Maps:** `leaflet`, `react-leaflet`
- **Charts & Visuals:** `recharts`
- **Notifications:** `react-hot-toast`, `sweetalert2`
- **Animations:** `framer-motion`
---
### **Getting Started Locally**
Follow these steps to run the client-side on your local machine:
**1. Clone the repository:**
```bash
git clone [https://github.com/nazmulxdev/Building-Management-system-Client.git](https://github.com/nazmulxdev/Building-Management-system-Client.git)
```
**2. Navigate to the project directory:**
```bash
cd b11a12-client-side-nazmulxdev
```
**3. Install NPM packages:**
```bash
npm install
```
**4. Set up environment variables:**
Create a file named `.env.local` in the root directory and add the following keys:
```.env.local
# Your Firebase configuration keys
VITE_APIKEY=your_firebase_apikey
VITE_AUTHDOMAIN=your_firebase_authdomain
VITE_PROJECTID=your_firebase_projectid
VITE_STORAGEBUCKET=your_firebase_storagebucket
VITE_MESSAGINGSENDERID=your_firebase_messagingsenderid
VITE_APPID=your_firebase_appid
# Your Stripe Publishable Key
VITE_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
```
**5. Run the project:**
```bash
npm run dev
```
The application will be available at `http://localhost:5173`.
---