Skip to content

Design

Jump to bottom
Conor Stokes edited this page May 16, 2023 · 15 revisions

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.

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 code and issue tracking are at https://github.com/bldrs-ai/Share. 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 URL-Structure specification.

Privacy

See Share: Privacy Design

Authentication

Bldrs is evaluating Auth0 for third-party auth to GitHub and possibly other providers like Google, DropBox, etc..

There is a draft PR #242 testing the integration.

We are seeing the issues described in auth0-spa-js FAQ, namely that refreshing the page in Safari and Brave loses the authentication, but still works in Chrome. This suggests we'll need to use one of the suggested workarounds there.

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

Clone this wiki locally