Frontend Apps

The Pivot frontend consists of multiple apps and libraries.

Apps

pivot repo

Expo

apps/expo is the source for our React Native app (iOS/Android), desktop app (built with React Native for Web and Tauri), and web app (Expo web export). Most components are imported from packages.

Storybook is build from inside the Expo app.

Tauri

apps/expo/src-tauri defines Tauri specific configuration for the Pivot desktop apps.

Docs Site

apps/docs is a totally separate Next.js app for the pivot.app/docs site.

pivot-internal repo

Marketing Site

apps/marketing-site in the pivot-internal repo is a Next.js app for the marketing site, which uses middleware to route to the other two Next.apps, app and docs.

PivotAdmin

An internal dashboard built with Next.js that allows the Pivot team to administer users and organizations on the Pivot Cloud Platform.

Libraries

• app-context
• app-hooks
• app-screens
• app-ui
• app-client
• app-config

Frontend Engineering Tooling

Storybook

Pivot uses Storybook for UI components development, testing and documentation. Each component/screen/page must have a story.

Any PR that modifies /apps/expo/* or our UI libraries triggers a deployment of Storybook.

Currently, we have two sections of Storybook:

Design System

It contains the base components that are being used in other compound components and screens. These components are inside the components folder at root level.

App Components

App components are the components those are build using Design System components and are specific to one or more then one screen. Storybook story structure matche component folder structure.

State Management and Caching

We use TanStack Query and Zustand for state management. We persist those stores to local storage.

Features Enabled When Offline

The below are possible when offline. (Almost) all other mutations are disabled in the UI when offline.

• Sending messages (in rooms and in response to blocks) are queued
• Creating and updating blocks
• Reading messages and reading notifications updates are queued
• Block/space/room presence events and applicaton usage telemetry
• Logging out

Disabled When Offline

• Any and all admin buttons and functions
• Editing space settings
• Adding / changing space members
• Creating new rooms
• Modifying room properties / changing room membership
• Changing your user profile
• Search, because search directly queries the API, it doesn't use the local cache.
• Custom web views

Routing

See Routing

Live Audio and Video

See Live Audio and Video

Component Architecture

Following Emotion guidelines, we have three levels of components: Base Components, Compound Components, and Layout Components.

Layout Components

We created our layout components like Row , Col , SafeAreaView and many more from React Native base components like Text , View and TextInput. We don't use React Native built-in components directly.

Base Components

We have created our base components from layout components and these are the major building blocks of screens. These main components includes Button , Text , TextInput , Avatar , Card , Chip and etc.

useResponsiveLayout

we have designed a hook which is giving us all the information about platform and dimensions. Like isMobile , isSmall , isHandHeld , isHandHeldSmall , isDesktop and etc. You can get idea from property naming.

1. isMobile will be true only if you app is running on mobile based on dimensions, no matter it;s web or mobile app.
2. isHandHeld will be true only if it's mobile or tablet app running on handheld. Others are same as above, we will about each soon in next iteration after taking decision.

Theming

We use emotion and styled-system for styling React Native components. Theme is supporting light and dark mode. We designed our app theme system from scratch, This way we can change our theme any property any time.

1. color: all colors are stored is variables for light and dark mode
2. fontSize: currently we have defined heading: 18 , title: 16 , body: 14 , caption: 12 , label: 10 font sizes. In our components we are using fontSizes names like heading , title and others, based on Figma UI font size. In case designs in Figam have odd number fontSize we will directly give number instead of our defined fontSize.
3. size: sizes are defined in string 3xs:4 , 2xs:8 , xs:12 , s:16 , m:18 , l:24 , xl:32 , 2xl:40 and 3xl:48. We mostly use predefined sizes for margins and paddings. If figma and our defined size differ by 1,2 pixels then we are strict to our defined sizes, b/c this way sizes complexity will decrease and 1,2 pixels won't effect UI.