Design

Share is a Single Page Application written in HTML, CSS, JavaScript(es6+) and JSX.

Frameworks

Share uses the React component framework and MUI Component Library.

As the user interacts with the application, major state changes are reflected as URL-based events with React Router. Larger state is kept in a global Zustand store.

The 3D viewer for IFC is IFC.js. However, we use a custom fork of web-ifc to support larger models. We intend to release this. Please let us know if you're interested.

Authentication is handled via integrated with Auth0.

We store settings in HTTP cookies, and use Google Analytics to anonymously measure usage and effectiveness of the tool and track country of origin and demographic cohort to better understand user and market interest.

Development

We test with Jest, lint with eslint, build with esbuild.

Hosting

The website is mostly a static page, served on Netlify, which has server-side support for react-router. The production site is at http://bldrs.ai.

Detailed Design

URL Structure

See the full Design: URLs specification.

Privacy

See Share: Privacy Design

Authentication

Share uses Auth0 for third-party auth to GitHub and possibly other providers like Google, DropBox, etc..

Code Walks

IFC Scene Load

The URL handling and IFC scene loading process supports permalinks, which is a little complicated since we intend to support a complex URL structure while preserving backward compatibility of the permalinks.

First, we inspect the URL in src/BaseRoutes and src/ShareRoutes.

src/BaseRoutes checks if the path starts with '/share' and if so forwards to ShareRoutes.

src/ShareRoutes matches 3 path patterns with a different pathPrefix (this looks redundant on a second read):

• installed in project's serve directory (e.g. /share/v/p/index.ifc)
• linked from GitHub (e.g. /share/v/gh/bldrs-ai/Share/main/index.ifc)
• local load (/share/v/new/[file hash generated by browser].ifc)

src/Share is called by ShareRoutes with a valid model path.

src/Containers/CadView is the main React container for the app. It is called by Share, and then has a bunch of react hooks to setup UI components and loads the scene with IFCjs:

CadView#onModelPath CadView#loadIfc. The call to IFC.js is in this method here

Further scene setup is handled after the IFCjs load, including setting click listeners here

File download, OPFS, proxying

See detailed design in this issue: Load Model and OPFS