An-Najah National University Faculty of Engineering & Information Technology Presented in partial fulfillment of the requirements for Bachelor degree in Computer Engineering Graduation Project 1 BuildFlow Students: Doaa Yasin Jararaa Wala’ Essam Ashqar Supervisor: Dr. Amjad AbuHassan amjad.abuhassan@najah.edu July 3, 2025 Acknowledgment We want to thank our parents for their amazing assistance, which has been essential to our success. Our parents have been a source of inspiration and patience for us. We like to thank our supervisor, Dr. Amjad AbuHassan, for his guidance and support throughout this project. We appreciate the contributions made by all of the instructors in the department of computer engineering. Additionally, we would like to thank our friends who have helped us and are grateful for their continuous presence. 1 Abstract BuildFlow is a platform for managing construction projects that aims to solve the challenges that face the construction industry, including the difficulty of communication between project The platform facilitates communication between project owners and their teams. This platform will primarily support personal home construction projects. We will use Flutter and Node.js as the core technologies to develop this platform. BuildFlow provides several tools that facilitate communication, allowing users to contact various engineering offices through this platform. These offices offer many services, including creating new buildings (covering interior and exterior design), completing existing structures, and other services such as providing engineering consultancy. Additionally, the platform enables communication between engineering offices and contrac- tors.companies to ensure the successful execution of user requests. The platform also ensures that Users stay updated on the progress of their projects at every stage. Through BuildFlow, we want to enhance the collaboration of all parties involved in construction projects, improving transparency at every stage. 2 Contents List of Figures 5 1 Introduction 7 1.1 Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 1.2 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2 Literature Review 9 3 Constraints and Earlier coursework 11 3.1 Constraints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 3.2 Earlier Coursework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 4 Methodology 13 4.1 Development Tools and Technologies . . . . . . . . . . . . . . . . . . . . . . . . . 13 4.1.1 Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 4.1.2 Programming Languages and Frameworks . . . . . . . . . . . . . . . . . . 14 4.1.3 Database Design and Management . . . . . . . . . . . . . . . . . . . . . . 14 4.2 Mobile App System Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4.2.1 Authentication and Validation: . . . . . . . . . . . . . . . . . . . . . . . . 16 4.2.2 Home Page: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 4.2.3 Search Page: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 4.2.4 Favorite Page: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 4.2.5 Notification Page: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 4.2.6 Profile Pages: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 4.2.7 Design Track . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4.2.8 3D Visualization via Planner 5D . . . . . . . . . . . . . . . . . . . . . . . 30 4.2.9 Supervision Track . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 4.2.10 Consultation Track . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 4.2.11 Map Feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 3 CONTENTS CONTENTS 5 Results and Discussion 39 5.1 Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 5.2 Discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 6 Conclusion and Future Work 41 6.1 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 6.2 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Appendix 44 .1 Webs Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 .1.1 Authentication and Validation . . . . . . . . . . . . . . . . . . . . . . . . 44 .1.2 Home Page: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 .1.3 Search Page: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 .1.4 Favorite Page: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 .1.5 Notification Page: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 .1.6 Profile Pages: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 .1.7 Design Track . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 .1.8 3D Visualization via Planner 5D . . . . . . . . . . . . . . . . . . . . . . . 58 .1.9 Supervision Track . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 .1.10 Consultation Track . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 .1.11 Map Feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 .1.12 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 4 List of Figures 4.1 Welcome Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4.2 Select type for registered . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3 User, Office, and Company registration screens . . . . . . . . . . . . . . . . . . . 17 4.4 Sign in screen and login error message . . . . . . . . . . . . . . . . . . . . . . . . 18 4.5 Interface screens from the BuildFlow mobile application. . . . . . . . . . . . . . . 19 4.6 Search features in the BuildFlow mobile application. . . . . . . . . . . . . . . . . 20 4.7 Favorite Page Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 4.8 Notification Page Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 4.9 Screens showing the user profile view and editing process in the BuildFlow app. . 23 4.10 Step 1 – Selecting an engineering office and receiving its response. . . . . . . . . 25 4.11 Step 2 – Pre-submission checklist displayed after office approval as a guidance. . 26 4.12 Step 3 – Licence request forms: user and land information plus agreement upload. 26 4.13 Step 4 – Entering detailed project design requirements. . . . . . . . . . . . . . . 27 4.14 Project details and Land Specifics for office, office can edit name . . . . . . . . . 28 4.15 Assigned Office, Project Owner, and Documents . . . . . . . . . . . . . . . . . . 28 4.16 Payment Proposal Interface for office . . . . . . . . . . . . . . . . . . . . . . . . . 28 4.17 Upload Progress and Stage Documents by office . . . . . . . . . . . . . . . . . . . 28 4.18 View After Uploading Documents from office . . . . . . . . . . . . . . . . . . . . 29 4.19 Payment Proposal from office to user . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.20 Project Description and Land Specifics for user . . . . . . . . . . . . . . . . . . . 30 4.21 Design Specifications, user can edit . . . . . . . . . . . . . . . . . . . . . . . . . . 30 4.22 Documents appear for user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 4.23 Project Progress, Documents for stages and 3D uploading from office . . . . . . . 30 4.24 3D design visualization using the integrated Planner 5D web view . . . . . . . . 31 4.25 Step 1 – Selecting a project and assigning a contractor for supervision. . . . . . . 31 4.26 Step 2 – Selecting the supervising office and sending them a request. . . . . . . . 32 4.27 Office & user view to track and manage project supervision stages. . . . . . . . . 33 4.28 Chat List, Displays all conversations between users, offices, and companies. . . . 34 5 LIST OF FIGURES LIST OF FIGURES 4.29 Chat Interface, Supports real-time messaging between all platform roles. . . . . . 34 4.30 Map Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 4.31 Office profile read-only for non-owners, with adding a review . . . . . . . . . . . 36 4.32 Company Profile Read-only for non-owners, adding a review . . . . . . . . . . . . 37 4.33 Project Profile Read-only for non-owners . . . . . . . . . . . . . . . . . . . . . . . 38 1 Select type for registered . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 2 User, Office, and Company registration screens . . . . . . . . . . . . . . . . . . . 45 3 Search features in the BuildFlow web application. . . . . . . . . . . . . . . . . . . 48 4 Favorite Page Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 5 Notification Page Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 6 Screens showing the user profile . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 7 Selecting an engineering office and receiving its response. . . . . . . . . . . . . . . 52 8 Licence request forms: user and land information plus agreement upload. . . . . 53 9 Project details and Land Specifics for office, office can edit name . . . . . . . . . 55 10 Assigned Office, Project Owner, and Documents . . . . . . . . . . . . . . . . . . 55 11 Assigned Office, Project Owner, and Documents . . . . . . . . . . . . . . . . . . 55 12 Assigned Office, Project Owner, and Documents . . . . . . . . . . . . . . . . . . 55 13 Assigned Office, Project Owner, and Documents . . . . . . . . . . . . . . . . . . 55 14 3D design visualization using the integrated Planner 5D web view . . . . . . . . 58 15 Selecting a project and assigning a contractor for supervision. . . . . . . . . . . . 59 16 Selecting the supervising office and sending them a request. . . . . . . . . . . . . 60 17 Chat List. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 18 Chat Interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 19 Map Screen (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 20 Map Screen (2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 21 Map Screen (3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 22 Office profile read-only for non-owners, with adding a review . . . . . . . . . . . 65 23 Company Profile Read-only . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 24 adding a review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 25 Project Profile Read-only for non-owners . . . . . . . . . . . . . . . . . . . . . . . 67 6 Chapter 1 Introduction Smart and effective management solutions are becoming more and more necessary in the con- struction industry, especially in personal homebuilding. Given the increasing use of digital tools in many different fields, there is a clear chance to use technology to solve some of the persistent problems in the construction industry. Many individuals who plan to build or renovate their homes face difficulties in following up on their projects, communicating with different service providers, and ensuring that all work progresses smoothly and transparently. This situation calls for a simple, organized, and accessible platform that supports the entire construction process from start to finish. 1.1 Problem One of the biggest obstacles to personal construction projects is the absence of constant and transparent communication between homeowners and the teams doing the work. There isn’t a single system that unites engineering offices, contractors, and clients in one location, despite the availability of numerous tools. Misunderstandings are therefore frequent, and a lot of projects experience delays, unclear roles, or additional expenses as a result of inadequate coordination. 1.2 Objective The goal of BuildFlow is to offer a practical digital solution that connects all parties involved in home construction. Through a single platform, users can request services, follow the progress of their projects, and communicate directly with engineering offices and contractors. BuildFlow incorporates a WebView to facilitate the early planning stage, enabling users to upload 2D de- sign files to be transformed into interactive 3D models with Planner 5D. This makes the design process more comprehensible and visually appealing. The system is lessen misunderstandings, and increase project management’s usability for non-technical people. BuildFlow was created 7 1.2. OBJECTIVE CHAPTER 1. INTRODUCTION with Node.js for the back end and Flutter for the front end to guarantee a dependable, respon- sive, and seamless user experience. 8 Chapter 2 Literature Review A major development in recent years has been the adoption of digital solutions in the architec- ture and construction sectors with the goal of enhancing workflow efficiency, data management, and coordination. To meet these demands, a number of platforms have surfaced that provide tools for document management, stakeholder communication, and project tracking. For instance, the all-inclusive construction management platform Procore [1] allows project par- ticipants to collaborate more simply. Scheduling, RFIs, submittals, and real-time field updates are just a few of the many features it supports. Despite its strength, Procore is frequently de- signed for large-scale commercial construction settings and necessitates extensive training and licensing, which may not be appropriate for smaller or more localized projects. Another instance is BuildNex, a platform created in 2024 by Tala Hamad and Khalid Jabr with the goal of bridging the divide between contractors, engineers, and users. With BuildNex, users can manage permits, interact with experts, and monitor the status of their projects. However, it still has limited support for 3D plans, land verification, and integration with official govern- ment data sources. Because the system relies on static form submissions, it can be improved in terms of user control and interactivity. Realistic architectural data input, geolocation features, and land mapping are not well inte- grated in the majority of current systems. The ability to choose a plot location using real geographic and administrative information, like plot numbers or basin identifiers, is rarely of- fered by platforms. Likewise, not many solutions provide a seamless transition between 2D architectural planning and interactive 3D visualization. In contrast, the development of BuildFlow was driven by the need to provide a more adaptable, user-friendly, and localized system tailored to real construction practices. BuildFlow integrates 9 CHAPTER 2. LITERATURE REVIEW features inspired by existing platforms but improves upon them by offering functionalities like interactive land location mapping using external services (such as GeoMOLG [2] and Pales- tinian Land and Water Settlement commission [3] ), and dynamic route planning to project sites using OpenRouteService [4], ensuring practical and accurate navigation support. as well as the ability to upload and convert 2D building plans into 3D visualizations via Planner 5D [5] integration. This allows users to better communicate their design preferences with offices and companies and bridges the gap between technical design and user understanding. In summary, BuildFlow sets itself apart from platforms like Procore and BuildNex by emphasiz- ing user accessibility, integrating real-world land data, supporting comprehensive construction documentation, and providing realistic collaboration tools—all of which are specifically tailored to the local context and regulatory environment. 10 Chapter 3 Constraints and Earlier coursework 3.1 Constraints During the development of BuildFlow, we encountered several constraints and challenges, such as: 1. Time and workload management: Balancing the development of a feature-rich sys- tem with exams and coursework was challenging. It required handling complex ideas under tight deadlines while managing academic pressure. 2. Technical constraints: Compatibility and performance problems made it more difficult to integrate several technologies (such as Flutter, Node.js, and PostgreSQL). 3. Data structure and location sourcing: Since ready-made database schemas for real construction workflows are not publicly available, we consulted engineering offices and reviewed actual project documents to build a realistic structure. We also faced challenges sourcing accurate land location data in official formats, as few platforms provide struc- tured, locally-relevant information. 4. Team coordination: As tasks were divided between frontend, backend, and database, consistent communication and version control were crucial. 5. Limited prior experience: Since we had no previous experience with full-stack devel- opment, we had to self-learn many concepts along the way. 11 3.2. EARLIER COURSEWORKCHAPTER 3. CONSTRAINTS AND EARLIER COURSEWORK 3.2 Earlier Coursework A number of the courses we previously took were crucial in the development of this project. We gained the theoretical understanding and practical abilities required for every BuildFlow component from these courses: � Database Systems: Directed our use of PostgreSQL and assisted us in comprehending the design and normalization of relational databases. � Software Engineering: Established a framework for applying best practices to the de- sign and administration of an organized development process. � Advanced Software Engineering: Improved our knowledge of system scalability, soft- ware architecture, and documentation, all of which we used to plan the expansion of our system and design it. � Web Development: Taught us about front-end and back-end concepts, which we used with Flutter and Node.js. � IT Project Management: Taught us how to efficiently assign tasks, plan projects, and meet deadlines. � Cybersecurity: Increased knowledge of the user authentication and data protection pro- cedures employed in our application. 12 Chapter 4 Methodology 4.1 Development Tools and Technologies 4.1.1 Tools We used a collection of useful tools that facilitated frontend and backend workflows, testing, and teamwork while developing BuildFlow: � Visual Studio Code: acted as the primary code editor for the Node.js backend and the Flutter frontend. It facilitated our workflow throughout the project by offering crucial development features like syntax highlighting, an integrated terminal, real-time debug- ging, and Git support. � Emulator for Android: used on various virtual Android devices to test and simulate the mobile application. This made it possible for us to confirm layout functionality, re- sponsiveness, and performance across a range of screen sizes and system versions. � Postman: Used to verify and test API endpoints. Throughout the backend development process, it assisted us in simulating various HTTP request types and inspecting responses to make sure the APIs operated as intended. � GitHub: For collaborative development and version control. The group used GitHub’s pull request system to review code changes, track issues, and maintain source code in private repositories. � Firebase: incorporated into the program to provide specific backend functions. We were able to manage and support features like in app messaging and notifications. 13 4.1. DEVELOPMENT TOOLS AND TECHNOLOGIES CHAPTER 4. METHODOLOGY � WebView (Planner 5D): To enable users to access and engage with Planner 5D, a WebView component was integrated into the program. By providing a more interactive and visual experience, this feature improved the planning stage of construction projects by allowing users to upload 2D design files and view them in 3D format. 4.1.2 Programming Languages and Frameworks We chose technologies for BuildFlow’s development that facilitate scalability, cross platform functionality, and front-end and backend system integration. � Flutter: The primary framework for creating the web and mobile interfaces. We were able to create a single codebase that functions on both Android and web browsers to its cross-platform capabilities. This ensured a consistent user experience across platforms. � Dart: Flutter programming language that provides a clear and expressive syntax for creating reactive and responsive user interfaces. � Node.js: Used for the backend because of its event-driven and asynchronous architec- ture. It enabled us to effectively manage numerous client requests and create scalable RESTful APIs. Through npm, Node.js also made a large number of packages available, which sped up backend development and frontend integration. � JavaScript: Used for API routing, backend logic, and integration with third-party ser- vices like Firebase in the Node.js environment. It was a dependable option for server-side programming in our system because of its adaptability and community support. 4.1.3 Database Design and Management During the development of BuildFlow, we chose PostgreSQL as our main database system be- cause it is reliable, flexible, and supports complex relationships. It helped us organize and connect important data like users, companies, offices, and projects. We created a clear and practical database structure that matches how people actually work together in construction. The main tables in the database include: 14 4.1. DEVELOPMENT TOOLS AND TECHNOLOGIES CHAPTER 4. METHODOLOGY 1. Users Table: Stores user profiles including personal information, contact details, loca- tion, ID number, and bank account. Each user can be a project owner who interacts with offices and companies. 2. Offices and Companies Tables: Contain essential details of engineering offices and construction companies such as email, location, capacity, rating, available branches, and profile images. These entities are linked to projects and can receive reviews and notifica- tions. 3. Projects Table: Captures detailed information about user-initiated construction projects. It includes project name, budget, timeline, associated office and company, uploaded doc- uments (such as 2D and 3D plans), agreement status, land details (plot number, basin number, area), and geographical location. 4. Reviews Table: Enables users to review and rate both companies and offices involved in their projects. Each review is linked to a specific project for contextual feedback. 5. Notifications Table: A versatile table that tracks system-generated or user-triggered notifications. It supports various recipient types (users, offices, companies), types of ac- tions (e.g., new request, project approved), and links notifications to specific entities for context. 6. Project Designs Table: Stores architectural preferences and structural features of projects, such as number of rooms, bathrooms, kitchen types, special room directions, and interior design descriptions. 7. User Favorites Table: Allows users to bookmark offices, companies, or projects. The schema ensures no duplicate favorites exist using unique constraints. 8. Permit Steps Table: Manages a multi-step permit submission workflow for users, in- cluding timestamps and current progress indicators. Relationships between tables are managed using foreign keys to keep the data accurate and con- nected. To make the database faster, we added indexes on important columns like ‘recipient-id‘, ‘project-id‘, and ‘user-id‘. We also used flexible data types such as ‘JSONB‘ and ‘TEXT[ ]‘ to allow the system to grow and handle more complex data in the future. 15 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY By designing the database structure carefully and filling it with realistic data, we made sure the system works smoothly and reflects how construction projects work in real life. 4.2 Mobile App System Features Welcome Page: When you enter the application, this interface is displayed. Figure 4.1: Welcome Page 4.2.1 Authentication and Validation: BuildFlow implements secure user authentication and validation mechanisms to ensure only authorized individuals access the system. Users must register with verified email addresses and unique credentials. Upon login, credentials are validated securely using hashed passwords. Role-based access control ensures that users, companies, and engineering offices only access features relevant to their role. Screenshots below demonstrate the login process, account regis- tration, and access control in action. 1. Sign Up: The platform provides separate registration interfaces for users, offices, and 16 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY companies, allowing each type to sign up with the required details for tailored access and services. Figure 4.2: Select type for registered Create account as user Create account as office Create account as company Figure 4.3: User, Office, and Company registration screens 2. Sign In: Once registered, users can securely sign in to the platform using their creden- tials to access personalized dashboards and features based on their account type. 17 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Sign in Login Faild Figure 4.4: Sign in screen and login error message 4.2.2 Home Page: 1. About Section: A section in the homepage that provides a brief description of the BuildFlow platform. 2. Home Buttons: Main buttons on the homepage that direct users to essential parts of the app. 3. Suggestions Screen: Display of recommended offices and companies based on user interests. 4. Contact Us: A form for users to contact the BuildFlow team for help or inquiries. 18 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY About Section Home Buttons Navigation Menu Suggestions Screen Contact Us Figure 4.5: Interface screens from the BuildFlow mobile application. 4.2.3 Search Page: The BuildFlow mobile application offers multiple search options to enhance user experience. Users can perform searches based on general input, specific office or company names, geographic location. This allows for quick and precise filtering, helping users find the most relevant con- struction service providers efficiently. 19 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Search Page Overview Search by Name for user Search by Location Search for an Office Figure 4.6: Search features in the BuildFlow mobile application. 4.2.4 Favorite Page: The Favorites page allows all users to save and quickly access preferred engineering offices, construction companies, and projects — making it easier to revisit and compare options. 20 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Figure 4.7: Favorite Page Overview 4.2.5 Notification Page: The Notifications page keeps users, offices, and companies informed of key updates, such as project approvals, new requests, and status changes. It also delivers weekly report updates, en- suring continuous tracking of project progress and smooth communication across the platform. Figure 4.8: Notification Page Overview 21 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY 4.2.6 Profile Pages: Every user type, including general users, engineering offices, and construction companies, has a dedicated profile page in the BuildFlow application. Viewing and editing relevant details, including location, contact information, and descriptions, is possible with these profiles. The user profile interface in particular is illustrated in the screenshots below, which also show how to view, edit, and save modifications to personal information. 22 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY User Profile Page Edit location, image or anything Save Edit After Edit Figure 4.9: Screens showing the user profile view and editing process in the BuildFlow app. 4.2.7 Design Track The design track in BuildFlow guides the homeowner through four key steps: Step 1: the user selects an engineering office and receives either approval or rejection. 23 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Step 2: once approved, the app shows a pre-submission checklist so the user can confirm that all required documents are ready. Step 3: the user completes three licence-request forms—personal details, land information, and the signed agreement upload. Step 4: finally, the user fills out detailed design preferences (room count, layout notes, style, etc.) that help the office prepare an accurate 2D/3D concept. 24 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Choose Engineering Office Office Notification Rejection Message appears for user Approval Message appears for user Figure 4.10: Step 1 – Selecting an engineering office and receiving its response. 25 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Figure 4.11: Step 2 – Pre-submission checklist displayed after office approval as a guidance. User Info Form Land Info Form Agreement Upload Figure 4.12: Step 3 – Licence request forms: user and land information plus agreement upload. 26 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Design Description (1) Design Description (2) Design Description (3) Design Description (4) Figure 4.13: Step 4 – Entering detailed project design requirements. 27 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Project Details for Office This section illustrates how engineering offices manage project details. They can view land and user information, send payment proposals, track progress, and upload required documents. Figure 4.14: Project details and Land Specifics for office, office can edit name Figure 4.15: Assigned Of- fice, Project Owner, and Doc- uments Figure 4.16: Payment Pro- posal Interface for office Figure 4.17: Upload Progress and Stage Documents by office 28 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Figure 4.18: View After Up- loading Documents from office Figure 4.19: Payment Pro- posal from office to user Project Details for Owner This section allows the homeowner to view the full scope of their project details. The first part presents a clear summary of the project description along with land-specific data. It is followed by an overview of the requested design specifications. Users can also access and review uploaded official documents relevant to the project. Additionally, a comprehensive screen displays the current progress of the project stages, along with any attached documents and the option to preview the architectural plans in 3D using integrated visualization features. 29 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Figure 4.20: Project Descrip- tion and Land Specifics for user Figure 4.21: Design Specifica- tions, user can edit Figure 4.22: Documents ap- pear for user Figure 4.23: Project Progress, Documents for stages and 3D uploading from office 4.2.8 3D Visualization via Planner 5D This feature allows users to explore the architectural design of their future home in a realis- tic and interactive 3D environment. Through integration with the Planner 5D web platform, users can view structural layouts, navigate interior and exterior perspectives, and better under- stand the spatial distribution and aesthetic of the proposed design. This visualization enhances 30 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY communication between homeowners and engineers, helping to align expectations and provide feedback before finalizing construction. Figure 4.24: 3D design visualization using the integrated Planner 5D web view 4.2.9 Supervision Track This track enables users to request supervision services for a specific project, starting with selecting the project, choosing a contractor company and engineering office, notifying them, and then completing required document submissions and tracking updates. Select Project for Supervision Choose Contractor Company Figure 4.25: Step 1 – Selecting a project and assigning a contractor for supervision. 31 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Choose Supervision Office Office Notification Figure 4.26: Step 2 – Selecting the supervising office and sending them a request. Project Details for Supervision Office This section enables the office to view, manage, and update the supervision process. The office can review basic details, track implementation stages, and upload relevant documentation. 32 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Supervision details for user User view weekly reports Supervision details for office Office set number of weeks Office upload weekly report Supervision reports Figure 4.27: Office & user view to track and manage project supervision stages. 33 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY 4.2.10 Consultation Track This track provides a dynamic chat system that enables communication between all parties within the BuildFlow platform. Users can initiate and continue conversations with engineering offices and construction companies. Likewise, offices and companies can communicate with each other or with users based on the context of the project. All conversations can be accessed through the chat icon in the navigation bar. Figure 4.28: Chat List, Dis- plays all conversations between users, offices, and companies. Figure 4.29: Chat Interface, Supports real-time messaging between all platform roles. 4.2.11 Map Feature The Flutter Map library was used to display an interactive map that allows the user to specify the land location in two ways: manually from the map or by entering the area name, plot number, and basin number, with a search feature available within the map. The application can also determine the user’s current location and plot the shortest route to the land location using a navigation algorithm, helping the office or company to reach it easily. The map is displayed via an open-source API without storing the location in the database, with reliance on the official GeoMOLG website when available. 34 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Figure 4.30: Map Screen 35 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Office Profile Figure 4.31: Office profile read-only for non-owners, with adding a review 36 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Company Profile Figure 4.32: Company Profile Read-only for non-owners, adding a review 37 4.2. MOBILE APP SYSTEM FEATURES CHAPTER 4. METHODOLOGY Project Profile Figure 4.33: Project Profile Read-only for non-owners 38 Chapter 5 Results and Discussion 5.1 Results BuildFlow delivers a set of features that streamline collaboration among homeowners, engineer- ing offices, and construction companies: 1. User Registration and Authentication: secure sign-up and authentication for users, offices, and companies. 2. Project Creation and Management: homeowners submit project details (budget, land data, documents) and track status. 3. Permit Submission Workflow: step-by-step form for uploading official documents and completing approval stages. 4. Office and Company Selection: users browse providers, view ratings, and invite them to projects. 5. Agreement and Document Storage: parties upload licences, contracts, and 2D/3D drawings in one place.. 6. 3D/2D House Visualization via Planner 5D (WebView Integration): interactive preview of house designs in both 2D and 3D. 7. Interactive Land Location Map (Flutter Map): displays exact plot and basin lo- cation for each project. 8. Notification System: real-time alerts for new requests, approvals, reviews, or document uploads. 9. Review and Rating System: users evaluate offices and companies at milestones or after completion. 10. Favorites System: quick bookmarking of preferred offices, companies, or projects. 11. Real-Time Chat: in-app messaging between users, offices, and companies for rapid clarification and decision-making. 12. Weekly Project Reports: engineering offices upload structured progress summaries 39 5.2. DISCUSSION CHAPTER 5. RESULTS AND DISCUSSION each week, visible to homeowners. 13. Realistic Data Integration: preloaded users, offices, companies, and projects drawn from real Palestinian contexts for meaningful testing. 5.2 Discussion BuildFlow achieves its goal of providing a practical, transparent workspace for residential con- struction: � Real-world alignment – Accurate land mapping and official document handling ground every project in verifiable data. � Enhanced visual insight – WebView integration with Planner 5D converts flat 2D plans into navigable 3D models, helping all parties understand design intent before construction begins. � Continuous communication – The real-time chat system eliminates slow email ex- changes, while weekly reports keep homeowners and contractors synchronised on progress and next steps. � Scalable architecture – A PostgreSQL schema that uses JSONB and arrays is ready for new modules (e.g., payments or extended messaging) without major refactoring. � Challenges met – Balancing academic deadlines with development and sourcing reliable land data were significant hurdles, yet the team met core milestones and delivered a working platform. � Future potential – User feedback can guide UI refinements, deeper map integrations, and advanced analytics, positioning BuildFlow to evolve alongside industry needs. Together, these results and insights demonstrate that BuildFlow is not only technically sound but also well-suited for real-world deployment in the Palestinian construction landscape and beyond. 40 Chapter 6 Conclusion and Future Work 6.1 Conclusion BuildFlow successfully bridges the gap between homeowners, engineering offices, and construc- tion companies through a unified and interactive digital platform. By integrating real-world data such as land location, legal documents, and architectural plans, the system provides users with clarity, control, and collaboration throughout the project lifecycle. Transparency and communication between all stakeholders are improved by essential features like the weekly re- porting, real-time chat, 2D-to-3D visual conversion, and the step-based permit workflow. The project achieved its main objectives and demonstrated its technical and practical viability, despite difficulties in finding realistic data and striking a balance between development and aca- demic obligations. These days, BuildFlow is a solid basis for scalable and intuitive construction workflow digitization. 6.2 Future Work Several enhancements are planned for upcoming versions of BuildFlow, including: 1. An integrated payment system that facilitates safe transactions between offices, busi- nesses, and users. 2. Advanced Analytics: offering information on project budgets, schedules, and performance patterns. 3. The Admin Dashboard gives system administrators the ability to control user behavior, keep an eye on approvals, and resolve conflicts. 4. Mobile optimization, which adds offline functionality to the existing app for users in places with spotty internet service. 5. Smart Recommendations: these offer workplaces and businesses based on user preferences 41 6.2. FUTURE WORK CHAPTER 6. CONCLUSION AND FUTURE WORK and previous evaluations. 6. The Mapping API has been expanded to include official government GIS data for more precise land verification. 7. Multilingual Support: enhancing usability for both English and Arabic users. 8. AI Chatbot for Consultation: An intelligent chatbot will be added to the chat system to provide instant answers, guide users through platform features, and offer basic consulta- tion—reducing the need for human support. BuildFlow will continue to develop as a dependable and cutting-edge platform that meets the changing demands of construction stakeholders in Palestine to these enhancements. 42 Bibliography [1] Procore Technologies, Inc., Procore - construction management software, Accessed: 2025- 06-27, 2024. [Online]. Available: https://www.procore.com. [2] Ministry of Local Government - Palestine, Geomolg land information viewer, Accessed: 2025-06-27, 2025. [Online]. Available: https://geomolg.ps/L5/index.html?viewer=A3. V1. [3] Local Water Utilities Administration, Lwsc geo portal, Accessed: 2025-06-27, 2025. [Online]. Available: https://geo.lwsc.ps/. [4] H. I. for Geoinformation Technology, Openrouteservice, https://openrouteservice.org, Accessed: 2025-06-27, 2025. [5] Planner 5D, Planner 5d: Home design software, Accessed: 2025-06-27, 2025. [Online]. Avail- able: https://planner5d.com. 43 https://www.procore.com https://geomolg.ps/L5/index.html?viewer=A3.V1 https://geomolg.ps/L5/index.html?viewer=A3.V1 https://geo.lwsc.ps/ https://openrouteservice.org https://planner5d.com Appendix .1 Webs Application .1.1 Authentication and Validation 1. Sign Up: Figure 1: Select type for registered 44 .1. WEBS APPLICATION APPENDIX Create account as user Create account as office Create account as company Figure 2: User, Office, and Company registration screens 45 .1. WEBS APPLICATION APPENDIX 2. Sign In: Sign in 46 .1. WEBS APPLICATION APPENDIX .1.2 Home Page: Home page For Users Home page for office and company 47 .1. WEBS APPLICATION APPENDIX .1.3 Search Page: Search Page Overview Search by Location Figure 3: Search features in the BuildFlow web application. 48 .1. WEBS APPLICATION APPENDIX .1.4 Favorite Page: Figure 4: Favorite Page Overview .1.5 Notification Page: Figure 5: Notification Page Overview 49 .1. WEBS APPLICATION APPENDIX .1.6 Profile Pages: User Profile Page Edit location, image or anything Figure 6: Screens showing the user profile 50 .1. WEBS APPLICATION APPENDIX 51 .1. WEBS APPLICATION APPENDIX .1.7 Design Track Choose Engineering Office Office Notification Design order complete Design guides Figure 7: Selecting an engineering office and receiving its response. 52 .1. WEBS APPLICATION APPENDIX User Info Form Land Info Form Agreement Upload Figure 8: Licence request forms: user and land information plus agreement upload. 53 .1. WEBS APPLICATION APPENDIX Design Description (1) Design Description (2) Design Description (3)54 .1. WEBS APPLICATION APPENDIX Project Details for Office Figure 9: Project details and Land Specifics for office, office can edit name Figure 10: Assigned Office, Project Owner, and Documents Figure 11: Assigned Office, Project Owner, and Documents Figure 12: Assigned Office, Project Owner, and Documents Figure 13: Assigned Office, Project Owner, and Documents 55 .1. WEBS APPLICATION APPENDIX Project Details for Owner 56 .1. WEBS APPLICATION APPENDIX 57 .1. WEBS APPLICATION APPENDIX .1.8 3D Visualization via Planner 5D Figure 14: 3D design visualization using the integrated Planner 5D web view 58 .1. WEBS APPLICATION APPENDIX .1.9 Supervision Track Select Project for Supervision Choose Contractor Company Figure 15: Selecting a project and assigning a contractor for supervision. 59 .1. WEBS APPLICATION APPENDIX Choose Supervision Office Office Notification Figure 16: Selecting the supervising office and sending them a request. 60 .1. WEBS APPLICATION APPENDIX Project Details for Supervision Office Supervision details for user (1) Supervision details for user (2) Supervision details for office (1) Supervision details for office (1) 61 .1. WEBS APPLICATION APPENDIX .1.10 Consultation Track Figure 17: Chat List. Figure 18: Chat Interface. 62 .1. WEBS APPLICATION APPENDIX .1.11 Map Feature Figure 19: Map Screen (1) Figure 20: Map Screen (2) 63 .1. WEBS APPLICATION APPENDIX Figure 21: Map Screen (3) 64 .1. WEBS APPLICATION APPENDIX Office Profile Figure 22: Office profile read-only for non-owners, with adding a review 65 .1. WEBS APPLICATION APPENDIX Company Profile Figure 23: Company Profile Read-only .1.12 Review Figure 24: adding a review 66 .1. WEBS APPLICATION APPENDIX Project Profile Figure 25: Project Profile Read-only for non-owners 67 List of Figures Introduction Problem Objective Literature Review Constraints and Earlier coursework Constraints Earlier Coursework Methodology Development Tools and Technologies Tools Programming Languages and Frameworks Database Design and Management Mobile App System Features Authentication and Validation: Home Page: Search Page: Favorite Page: Notification Page: Profile Pages: Design Track 3D Visualization via Planner 5D Supervision Track Consultation Track Map Feature Results and Discussion Results Discussion Conclusion and Future Work Conclusion Future Work Appendix Webs Application Authentication and Validation Home Page: Search Page: Favorite Page: Notification Page: Profile Pages: Design Track 3D Visualization via Planner 5D Supervision Track Consultation Track Map Feature Review