Kaibo is an app that serves as an assistant to architects, helping architects to navigate through the multiple intractable webs of building regulations.

It will provide checklists for monitoring compliances with regulations from different technical agencies, provide an interactive 3D display for architects to intuitively understand the context of the regulation, and answer any ad-hoc questions regarding regulations that architects may have - i.e. questions that the authorities cannot give a clear answer for quickly.

A community of architects will be engendered in this platform - i.e. architects will have a platform to ask their questions, under the guidance of officers from the different technical agencies.

Users are authenticated either via their emails or google accounts.

Users can view reference 3D models of different building types with annotations to understand the contexts of various regulatory clauses with visual aids.

By entering the details of a building profile, users can generate checklists of relevant regulatory clauses that pertains to the building profile, and monitor the progress on complying with the clauses.

A chat bot integrated with ChatGPT provides a platform for the users to ask ad-hoc questions about any regulatory clause that they may need urgent clarification for.

The forums provide users with a medium to form a community to assist each other on the understanding of any regulatory clause that they may have questions about. Officers from the technical agencies may also use this platform to answer the users' queries.

Users can update their personal details and these details would be propagated to other components of the app.

Users can enter the relevant queries in the contact form and the submission of the form would send an email to the system administrators or officers from the relevant technical agencies.

Users can view a summary of the lists of the latest circulars from different technical agencies to be up to date on the newest regulations.

By entering the postal code of any address, users will be able to obtain the planning parameters for the searched address.

1. ReactJS
2. Auth0
3. Three.js
4. ChatGPT
5. Three.js
6. Tailwind CSS
7. Cheerio.js
8. Firebase Storage
9. Express.js
10. Sequelize/ PostgreSQL

Three.js, along with React Three Fiber and React Three/ Drei, were used to render and visualize the 3D models. These libraries tailored to React allow 3D models to be scalable, rotatable, zoomable, and annotatable. This library/ npm package allows easy real-time web scraping of target sites. A SQL database was used, due to the complexity of the datasets and the multiple relations that each dataset had to have with the other datasets. With relations made via multiple junction tables, data can be queried easily in the desired format.

• Frontend
• Backend

In order to run this application, you will need to install PostgreSQL and Sequelize in your terminal.

You will need to obtain the following APIs and include the keys in the .env files for the frontend and backend repos: -

• Auth0
• Formspree
• Firebase
• ChatGPT

Refer to the .env sample files for the desired formats.

3D models are not included in these repositories, hence you will have to obtain your own 3D models in .glb format and place them in the public - "models" folder.

Once you have forked both the frontend and backend repos, run "npm i" in the respective terminals to download all the relevant dependencies.

Create a new database in your PostgreSQL terminal, and run "npx sequelize db:migrate" in the backend repo directory in the backend terminal to migrate the relevant tables.

Once all the tables have been migrated successfully, run "npx sequelize db:seed:all" in the backend repo directory in the backend terminal to seed all seeded data from the seeded files.

Run "npm start" for both frontend and backend repos in separate terminals.

The backend server will run in http://localhost:3000, while the frontend display will run in http://localhost:3001.

Run "node webscraper.js" in the backend repo directory in a separate backend terminal to run the web scrapper for the Circulars page.

The page will reload when you make changes.
You may also see any lint errors in the console.