DEV Community

Cover image for Smart Estate Management Platform
Walid Adebayo
Walid Adebayo Subscriber

Posted on

10 3 3 3 3

Smart Estate Management Platform

#devchallenge #kendoreactchallenge #react #webdev

🎯 Submission for the KendoReact Free Components Challenge.

🏡 What We Built:

EstateLuxe - Smart Estate Management Platform

EstateLuxe is a modern, intuitive, and AI-powered estate management platform that streamlines property management for both users and administrators.

Built using Next.js, KendoReact, and a customised Bootstrap theme generated with Kendo ThemeBuilder, it offers a seamless user experience with powerful features, including:

✅ User Dashboard: Quick stats, favourite properties, payments, and viewings.

✅ AI Assistant: Uses Gemini API to provide intelligent property recommendations, morgage calculations and assistance. 🤖

✅ Property Management for Admins: CRUD functionality for properties, tenants, and payments, with automated reminders.

✅ Custom Theme Switching: Dynamic theme switching between Default, Bootstrap, Custom Bootstrap, and Dark Mode using KendoReact’s ThemeBuilder-generated CSS.

🎥 Demo:

🔗 Live Demo Link (https://estateluxe.vercel.app/)

🔗 GitHub Repository (https://github.com/Walidadebayo/EstateLuxe)

📸 Screenshots: (Not showing all pages here)

  • Admin Management Screens Admin Dashbaord

Payment Tracker

  • AI Assistant Interface AI Assistant Interface Popup

AI Assistant Interface Page

  • User User Dashboard

Properties Search

Property Details

  • Custom Theme Demonstration

  • 🎥 Video Demo

⚡️ KendoReact Experience:

We used KendoReact’s free components extensively across different pages. Here’s a detailed breakdown:

🎨 Components Used:

  1. Buttons: For quick actions and form submission.
  2. Grid: To display property lists, payments, and tenants with filtering and sorting.
  3. Charts: To visualise property viewings in the dashboard.
  4. DatePicker: To pick dates for tenants, payments, and other events.
  5. DateInput: For date selection in multiple forms.
  6. DropDowns: For theme toggle, filtering, and user dropdowns.
  7. Inputs: For search, filtering options, and other features.
  8. Dialogs: To handle confirmations and modals.
  9. Conversational UI: Powers the AI Assistant chat.
  10. Indicators: For loading states and progress bars.
  11. SVG Icons and Common: For UI font icons.
  12. Form & FormField: To accept inputs for login/register and CRUD operations.
  13. ScrollView: For carousels showcasing property images and customer reviews.
  14. Notifications: For success/error messages on login/registration and other actions.
  15. Upload: For file uploads when adding property details.
  16. Card: For displaying properties, charts, and other elements.
  17. AppBar: For the navbar (top navigation) displaying different navigation for admin and user.
  18. Drawer: For sidebar navigation in the admin layout.
  19. Data Query: For querying data in Grid (table).
  20. Map: To display the location of properties and contact maps.
  21. Popover: For AI assistant popover.
  22. TextArea: For contact messages and property descriptions.
  23. Slider: For filtering price ranges in property search.
  24. Checkbox: For accepting terms and “remember me” options in login/register.
  25. TabStrip and TabStripTab: To create tabs on login pages for admin and user.

These components were leveraged across different sections, ensuring an efficient and polished user experience.

🧠 AIm to Impress:

We went beyond the ordinary by integrating cutting-edge AI technology powered by Gemini API to elevate the user experience to a whole new level! 🚀

💡 Why It's Impressive:

🔹 AI Assistant: Provides personalised property recommendations, mortgage calculations, property advice, and real-time assistance to users.

🔹 Contextual AI Learning: Learns user preferences over time to refine search results and suggest relevant properties automatically.

🔹 Intelligent Automation: AI-assisted property management for both users and administrators, reducing workload and improving efficiency.

This integration sets EstateLuxe apart by combining human-like conversational abilities with seamless property management. 💥

🎨 Delightfully Designed:

We customised the theme extensively using the Kendo ThemeBuilder to create a visually appealing and dynamic design.

🎨 Custom Theme Setup:

  • Bootstrap Theme: Used ThemeBuilder to generate a custom Bootstrap theme (custom-theme-bootstrap.css).
  • Dark Theme: Created an alternative dark theme (dark-theme-bootstrap.css) for a sleek night mode.
  • Theme Switching Logic: Dynamically switched themes based on user preference, supporting 4 themes:
    • Default
    • Bootstrap
    • Custom Bootstrap
    • Dark Mode Bootstrap

📸 In-Progress Screenshots:

Custom Bootstrap green

Dark Mode Bootstrap

🎥 Custom Theme Demo:

  • A video demo showing how the custom themes and dark mode switch dynamically.

💡 Ideal For:

🏢 Real Estate Agencies: To manage listings, payments, and tenants efficiently.

🏡 Property Owners: To track payments, viewings, and property analytics.

📊 Property Managers: To automate tenant communication, reminders, and property viewings.

👩‍💻 Developers: Looking to integrate AI and powerful UI components into their projects.

EstatLuxe is ideal for any organisation that wants to digitally transform property management while enhancing user engagement with AI-driven features.

📚 Pages & Features:

👤 User-Focused Pages:

  1. Dashboard: Quick stats, favourites, payments, and property viewings.
  2. Favourite Properties: List, view, and manage favourite properties.
  3. Property Search: Search by type, price, and bedrooms, with grid/list view.
  4. Property Details: Detailed property information and contact options.
  5. Upcoming Payments: List payments with a “Pay Now” functionality.
  6. AI Assistant: Smart assistant providing recommendations and assistance.

🔥 Admin-Focused Pages:

  1. Admin Dashboard: Overview of key metrics and quick actions.
  2. Manage Properties: Add, edit, and delete properties.
  3. Manage Tenants: Add, edit, and delete tenant profiles.
  4. Manage Payments: Track payments, send reminders, and perform CRUD operations.

🔒 Additional Pages:

  1. Home Page: Displays featured properties and an introduction.
  2. Contact Page: Enables communication with property owners/admins.
  3. Privacy Policy Page: Outlines user privacy and platform terms.
  4. Terms of Service: Outlines terms and conditions for using our services.

👥 Team Members:

This project was built by a team of two:

🏆 Why This Project Stands Out:

✅ Leverages KendoReact’s powerful components effectively.

✅ AI-Powered Assistant gives the project an innovative edge.

✅ Custom Themes with ThemeBuilder showcase design flexibility.

✅ Comprehensive features with both user and admin management.

✅ Ideal for real-world estate management solutions with AI enhancements.

🎉 We’re excited to share our work and look forward to showcasing the power of KendoReact! 🚀

💬 We would love your feedback. Drop a comment below. Thank you!

Top comments (1)

Collapse
 
boynovska profile image
Antoniya •

Congrats on the win @walidadebayo and @volde , really a stunning app! I am Toni from the product team at Progress. Would you mind getting in touch for a quick chat to tell me more about your experience building this app with KendoReact? Ping me here or at antoniya.boynovska@progress.com