The client side of PropertyPulse is the front-end interface for users, members, and admins to interact with the Building Management System. The client handles authentication, dynamic UI rendering, and interaction with the server via API endpoints.
- user is = Resident
- member is = Tenant
- admin is = Manager
-
Authentication System
- Email and password-based login and registration.
- OAuth with Google/GitHub.
- Password strength validation and error messages.
- Persistent private routes after reloading.
-
Responsive Design
- Fully responsive for mobile, tablet, and desktop views.
-
Dynamic Navigation
- Navbar with conditional icons based on login status.
- Profile dropdown with user-specific options.
-
Home Page Highlights
- Auto-sliding banner showcasing apartments.
- About section with building details in elegant typography.
- Coupons displayed attractively for easy visibility.
- Location map using a third-party npm package.
-
Apartment Management
- Paginated apartment list with details (image, floor, rent, etc.).
- Apartment agreement feature with database integration.
- Search functionality with rent range filtering.
-
Dashboard Pages
- User Dashboard: Profile and announcements.
- Member Dashboard: Profile, payment system, payment history, and announcements.
- Admin Dashboard: User management, announcements, agreements, and coupon management.
-
Secure API Calls
- All Firebase configuration keys and MongoDB credentials are secured with environment variables.
-
Data Fetching
- TanStack Query (React Query) for GET requests to enhance performance and caching.
-
Notifications
- SweetAlert2 and toastify notifications for CRUD operations and user feedback.
-
Animations
- Framer Motion for smooth transitions and animations.
- React.js: Frontend library.
- Tailwind CSS: For elegant and responsive UI.
- React Router DOM: For routing and private route management.
- TanStack Query: Efficient data fetching and state management.
- SweetAlert2 / Toastify: Enhanced notifications.
- React Icons: Beautiful icons for UI.
- Framer Motion: Animations for better user experience.
- Added login & registration system with validation.
- Integrated private routing with token persistence.
- Designed the responsive apartment listing with pagination & search.
- Implemented TanStack Query for GET requests.
- Secured environment variables for Firebase.
Deployed on Firebase Hosting. Ensure domain is added to Firebase authentication settings.