| 1. configs
|-- 1.1 firebase
| 2. services
|-- 2.1 storage
|---- 2.1.1 store
|------ store example
|---- 2.1.2 cookies
|---- 2.1.3 remote
Configs API
is a module that holds various configurations used in this project.
Services API
consists of application's internal services.
@storage
is a bundle of various modules that persist data
store
is based on valtio plugin. Valtio is a proxy that listens to data changes and allows for both react and vanillaJS data operations.
import { proxy, useSnapshot } from 'valtio';
const stateOne = { one: null };
const stateTwo = { two: false };
const store = {
one: proxy(stateOne),
two: proxy(stateTwo),
};
const operator = {
get: store,
set: {
status: (key, type, msg = undefined) => {
store[key].status = { type, msg };
},
geo: (update) => update(store.geo.data),
visitor: (update) => update(store.visitor.data),
},
use: useSnapshot,
};
export default operator;
cookies
is based on js-cookie plugin. This internal module is just a hijack of import Cookies from 'js-cookie'
, so that it matches syntactically to the rest of the storage
API
remote
provides connection to external storages
FirebaseConfig
sets up firebase connection using FirebaseInitialConfig
which should be an object with { apiKey: ..., authDomain: ..., etc }
and plugs into firebase
's internal API.
export default class FirebaseConfig {
public db: ReturnType<firebase.app.App['firestore']>;
public auth: typeof firebase.auth;
public functions: typeof firebase.functions;
public storage: typeof firebase.storage;
public api: typeof firebase;
constructor(config: Config = FirebaseInitialConfig) {
this.db = !firebase.apps.length
? firebase.initializeApp(config).firestore()
: firebase.app().firestore();
this.auth = firebase.auth;
this.functions = firebase.functions;
this.storage = firebase.storage;
this.api = firebase;
}
}
@geo
is responsible from grabbing visitor's position
Deploy the example using Vercel:
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app
Deploy it to the cloud with Vercel (Documentation).