Structure#

The Chatness app folder structure is basically composed of

.
โ”œโ”€โ”€ \elements
โ”œโ”€โ”€ \functions
โ”œโ”€โ”€ \resources
โ”œโ”€โ”€ \seeds
โ”œโ”€โ”€ \src
โ”‚ โ”œโ”€โ”€ \app
โ”‚ โ”‚ โ”œโ”€โ”€ \actions
โ”‚ โ”‚ โ”œโ”€โ”€ \components
โ”‚ โ”‚ โ”œโ”€โ”€ \config
โ”‚ โ”‚ โ”œโ”€โ”€ \effects
โ”‚ โ”‚ โ”œโ”€โ”€ \guards
โ”‚ โ”‚ โ”œโ”€โ”€ \interfaces
โ”‚ โ”‚ โ”œโ”€โ”€ \pages
โ”‚ โ”‚ โ”œโ”€โ”€ \reducers
โ”‚ โ”‚ โ”œโ”€โ”€ app-routing.module.ts
โ”‚ โ”‚ โ”œโ”€โ”€ app-component.ts
โ”‚ โ”‚ โ”œโ”€โ”€ app.module.ts
โ”‚ โ”‚ โ”œโ”€โ”€ shell-routing.module.ts
โ”‚ โ”‚ โ”œโ”€โ”€ shell-component.ts
โ”‚ โ”‚ โ””โ”€โ”€ shell.module.ts
โ”‚ โ”œโ”€โ”€ \assets
โ”‚ โ”‚ โ”œโ”€โ”€ \fonts
โ”‚ โ”‚ โ””โ”€โ”€ \images
โ”‚ โ”œโ”€โ”€ \environments
โ”‚ โ”‚ โ”œโ”€โ”€ \environment.prod.ts
โ”‚ โ”‚ โ””โ”€โ”€ \environment.ts
โ”‚ โ””โ”€โ”€ \theme
โ””โ”€โ”€ package.json

Elements#

Decoupled environment for building web components. In case you need to modify or add a new element based on Chatness you can edit the elements.modules.ts which lives inside this folder and then issue npm run build:elements

Functions#

Dedicated environment for server side stuff like the push notification trigger.

Resources#

Icon and splash files you can use as example to edit your own before deploying the app to device.

Seeds#

Where lives all the related code to pre populate database. This way you can test and extract the maximum of Chatness right on the beginning.

Actions#

Actions are the way app communicates with the global state. It carries a payload of information and can execute side effects as adding something to cache.

/src/app/actions/uiSetDisplay.ts
import { setCache } from '@rebased/cache';
export function uiSetDisplay(mode: 'light' | 'dark') {
return function (dispatch) {
setCache('uiDisplay', mode);
dispatch({
type: 'setDisplay',
payload: mode,
});
};
}

Components#

Place where every reusable/exportable components lives in. If you aren't an angular developer run a simple command and they're all exported as custom elements to be used as web components.

Config#

General app configurations

Effects#

App specific side effects

Guards#

Route guards from angular

Interfaces#

App specific interfaces

Pages#

App specific pages

Reducers#

App specific reducers

Assets#

Fonts and images shipped within the app.

Available fonts

  • New York
  • SF Compact Rounded
  • SF Compact Display
  • SF Compact Text
  • SF Mono
  • SF Pro Display
  • SF Pro Rounded
  • SF Pro Text

Available images

  • favicon.png
  • 404.svg

Theme#

General styling stuff built with css variables in mind. So if you wanna change some primary color in the app/elements you gonna just need to edit a variable located here.

Fonts are loaded from fonts.scss so pick one font and uncomment its line.