{"id":36499679,"url":"https://github.com/casimir-one/frontend","last_synced_at":"2026-01-12T02:18:10.790Z","repository":{"id":36957572,"uuid":"364064643","full_name":"casimir-one/frontend","owner":"casimir-one","description":"⚡ Casimir is an open-source low-code constructor for Creators Economy Protocol. The DEIP-Modules consist of Java Script packages designed to build front-end applications and Portals.  ","archived":false,"fork":false,"pushed_at":"2022-10-14T14:50:16.000Z","size":13406,"stargazers_count":6,"open_issues_count":5,"forks_count":5,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-12-10T01:49:34.193Z","etag":null,"topics":["constructor","creators","modular","vue","web3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/casimir-one.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-03T21:23:10.000Z","updated_at":"2024-05-16T23:03:10.000Z","dependencies_parsed_at":"2023-01-17T08:30:53.669Z","dependency_job_id":null,"html_url":"https://github.com/casimir-one/frontend","commit_stats":null,"previous_names":["deipworld/deip-modules","deipworld/casimir-frontend"],"tags_count":317,"template":true,"template_full_name":null,"purl":"pkg:github/casimir-one/frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casimir-one%2Ffrontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casimir-one%2Ffrontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casimir-one%2Ffrontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casimir-one%2Ffrontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/casimir-one","download_url":"https://codeload.github.com/casimir-one/frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casimir-one%2Ffrontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28331929,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["constructor","creators","modular","vue","web3"],"created_at":"2026-01-12T02:18:10.134Z","updated_at":"2026-01-12T02:18:10.783Z","avatar_url":"https://github.com/casimir-one.png","language":"JavaScript","readme":"# Casimir\n\n**Casimir** — is a low-code constructor (framework) for building Portals in the Casimir ecosystem.\nWith Casimir, you can quickly build a front-end application to connect to the server-side of the Casimir infrastructure. The modular structure formed the basis of Casimir’s development. This implementation allows connecting to the portal only required functionality without redundant code.\n\n#### The Casimir Modules repository consists of 2 main areas\n* Common — a set of self-sufficient and independent packages, utilities, plugins, components that can be used outside the Casimir ecosystem\n* Casimir — a low-code constructor for building Portals in the Casimir ecosystem\n\n#### Casimir, in turn, consists of several types of entities:\n* platform — a set of self-sufficient and independent utilities and components that can be used in different areas of the low-code constructor\n* models — data transfer models and format packages\n* services — Data Service Packages. Currently, only the rest-API transmission option is available\n* modules — functional modules of Casimir. Use modules for bringing to the application everything necessary for the full usage of certain functionality\n\n#### Mechanic of using casimir app:\nuser creates attributes through admin panel (attributes in this context\nmeans the set of instruments like forms, inputs and if necessary, some\ncustom elements with predefined set of settings in each, in general,\nall kind of content) and layouts for displaying such attributes for such a\nportal.\n\n## Create Portal\nThe Casimir-modules repository consists of Java Script packages designed to build front-end applications and Portals. Modules allow you to connect to services to interact with Casimir infrastructure and are implemented using the Vue framework and Vuetify components library.\n\n```\n# install vue services global\nnpm install -g @vue/cli\n\n# create our project\nvue create deip-app\n\n# navigate to the new project directory\ncd deip-app\n```\n\nAdd needed Casimir modules:\n* [vuetify](https://vuetifyjs.com/en/getting-started/installation/) - is a components library\n* [vue-i18n](https://kazupon.github.io/vue-i18n/) - is internationalization plugin for Vue.js\n* [vuex](https://vuex.vuejs.org/) - is a data storage for Vue.js applications\n* [router](https://router.vuejs.org/) - is an application navigation\n```\nnpm install -S vuetify vue-i18n vuex vue-router\n```\n* @casimir.one/scopes-module\n* @casimir.one/validation-plugin\n* @casimir.one/vuetify-extended\n* @casimir.one/env-module — is a module of environment variables and transport instance libraries\n* @casimir.one/attributes-module — is a module of entities attributes (e.g. to add the user’s avatar)\n* @casimir.one/layouts-module — is a layout module for the application\n* @casimir.one/auth-module — is an authentication and access rights module\n* @casimir.one/users-module — is an user module\n\n```\nnpm install -S @casimir.one/env-module @casimir.one/attributes-module @casimir.one/layouts-module @casimir.one/auth-module @casimir.one/users-module\n```\n\nEdit the main file of the application:\n\n```\nimport Vue from 'vue';\nimport { CreateApp } from '@casimir.one/platform-util'; // the class, needed to prepare the application\nimport { EnvModule } from '@casimir.one/env-module';\nimport { AttributesModule } from '@casimir.one/attributes-module';\nimport { LayoutsModule } from '@casimir.one/layouts-module';\nimport { AuthModule } from '@casimir.one/auth-module';\nimport { UsersModule } from '@casimir.one/users-module';\n\nimport App from './App';\nimport router from './router';\nimport store from './store';\nimport vuetify from './plugins/vuetify';\nimport i18n from './plugins/i18n';\n\nconst deipApp = new CreateApp(Vue); // create new container\n\ndeipApp\n  // setup environment - used in most modules\n\n.addModule(EnvModule, {\n    proxydi: { // store instances\n      vuetifyInstance: vuetify,\n      routerInstance: router,\n      storeInstance: store,\n      i18nInstance: i18n\n    }\n  })\n\n  // register Casimir modules - used as dependency in Casimir modules\n  .addModule(AuthModule)\n  .addModule(UsersModule)\n  .addModule(AttributesModule)\n  .addModule(LayoutsModule)\n\n  // resolve and install all modules\n  .bootstrap()\n\n  // create application\n  .then(() =\u003e {\n    // setup locales\n    if (Vue.$env.VUE_APP_I18N_LOCALE) {\n      i18n.locale = Vue.$env.VUE_APP_I18N_LOCALE;\n    }\n    if (Vue.$env.VUE_APP_I18N_FALLBACK_LOCALE) {\n      i18n.fallbackLocale = Vue.$env.VUE_APP_I18N_FALLBACK_LOCALE;\n    }\n\n    const app = new Vue({\n      router,\n      store,\n      vuetify,\n      i18n,\n      render: (h) =\u003e h(App)\n    });\n\n    app.$mount('#app');\n\n    console.info('complete');\n  });\n```\n\nFollowing this instruction, you can build an application with the specified functionality.\nExplore another example of a Casimir-based application by the [link](https://youtu.be/C5VwmWefSbI).\n\n## Casimir-Modules\n\nThe Casimir Modules is a monorepository implemented based on [Lerna](https://github.com/lerna/lerna) with many npm packages used as a building material for the portal. The repository already contains all the necessary tools for development. Install some modules globally, if you want to manage some processes more subtly.\n\n```\nnpm install -g npm-check-updates lerna\n```\n\n### Prepare repository for work\n\nRun the following two commands to prepare the repository for work.\n\nInstall core modules and dependencies:\n\n```\nnpm install\n```\n\nInstall modules for repository packages and link internal dependencies:\n\n```\nnpm run bootstrap\n```\n\n### Work with repository\n\n#### Testing\n\nVue application created for module development and testing. It does not contain a business model and is used exclusively for development.\n\n```\nnpm run start\n```\n\n#### Add new npm-package\n\nCheck [docs](https://github.com/lerna/lerna) for all commands.\n\nAdd module\n```\nlerna create new-cool-module casimir/modules\n```\n\nAdd dependencies\n```\nlerna add lodash --scope=new-cool-module\n```\n\n#### Build\n\nWork in progress\n\n#### Lint\\Test\n\n```\nnpm run test\nnpm run lint\n```\n\n\n#### Publish\n\nnpm register keeps stable versions of modules to install them with the command `npm install -S module-name`.\n\n#### Additional information\n\nThe Casimir-Modules repository uses the [Conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) agreement.\nStrongly recommend making changes in one commit that will specify the type of change and scope to which the changes apply.\n\n```\nfeat(@casimir.one/auth-module): add translation support\nfix(@casimir.one/vue-elements): wrong gutter property\n...etc\n```\n\nDevelopment and modification takes place in separate branches with naming according to type of change (see [Conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)):\n- fix/*\n- feat/*\n- docs/*\n- ...etc\n\nPre-commit hooks are used to verify the code. If your code fails the eslint check, you will not be able to commit your changes.\n\n## Future improvements\n* Increase the number of modules to fully cover platform functionality\n* Create a detailed documentation on the use of Casimir and its API\n* Create an online no-code mode Constructor\n* Create use-cases and examples for a better understanding of Casimir and its assumptions\n\n\n## Example of Portal creating process and modules usage\n\n#### Create portal with minimal set of module and settings\n\n### Steps\n\n#### Create portal\n\nuser creates a portal, using manual from casimir-frontend app from above description.\n\n#### Create admin panel\n ```\n//TODO: develop admin module as a npm package\n```\n* #### add auth module (while we don't have certain npm package):\n  * install npm package `@casimir.one/auth-module` (is required)\n  * create folder `/src/modules` (if it's not created)\n  * copy to this folder the folder from `/casimir-sandbox-portal/src/modules/auth` with the all content\n  * import this module as a `TestAppAuthModule` into `main.js` of created portal:\n    * ```import { TestAppAuthModule } from '@/src/auth'```\n    * ```\n      const testApp = new CreateApp(Vue, {\n        ...\n      });\n      testApp\n       ...\n       .addModule(AuthModule)\n       .addModule(TestAppAuthModule)\n      ```\n* #### add admin module\n  * install npm packages: `@casimir.one/attributes-module`, `@casimir.one/nft-collections-module`,\n  `@casimir.one/users-module`, `@casimir.one/teams-module` `@casimir.one/toolbox`\n  и `@casimir.one/layouts-module` (all these are required)\n  * copy `/casimir-sandbox-portal/src/modules/adimn` with the all content into `/src/modules`\n    there are layouts and attributes which portal admin is able to set in admin panel\n  * import this module as a `TestAppAdminModule` into `main.js` of created portal\n  * ```import { TestAppAdminModule } from '@/src/auth'```\n    * ```\n      const testApp = new CreateApp(Vue, {\n        ...\n      });\n\n      testApp\n       ...\n       .addModule(TestAppAdminModule)\n      ```\n  * for minimal working routing, insert the below code into `/src/modules/admin/router`:\n  * ```\n    import { ViewMode, SYSTEM_ROLE } from '@casimir.one/platform-core';\n\n    import { AdminAttributes } from '@/modules/admin/components/attributes/AdminAttributes';\n    import { AdminAttributesForm } from '@/modules/admin/components/attributes/AdminAttributesForm';\n    import { AdminAttributesSettings } from '@/modules/admin/components/attributes/AdminAttributesSettings';\n\n    import { AdminLayouts } from '@/modules/admin/components/layouts/AdminLayouts';\n    import { AdminLayoutsForm } from '@/modules/admin/components/layouts/AdminLayoutsForm';\n    import { AdminLayoutsSettings } from '@/modules/admin/components/layouts/AdminLayoutsSettings';\n\n    import { routerView } from '@casimir.one/platform-util';\n    const formViewMeta = (auth = [SYSTEM_ROLE.ANY]) =\u003e ({\n      auth,\n      viewSetup: {\n        appBar: { type: 'back' },\n        sideBar: { disabled: true }\n      }\n    });\n    const editorMeta = () =\u003e ({\n      auth: [SYSTEM_ROLE.ANY],\n      viewSetup: {\n        appBar: { disabled: true },\n        sideBar: { disabled: true }\n      }\n    });\n    export const adminRouter = [\n      {\n        path: '/admin',\n        name: 'admin',\n        component: routerView,\n        meta: {\n          auth: [SYSTEM_ROLE.ADMIN],\n          redirectTo: 'home'\n        },\n        redirect: { name: 'admin.attributes' },\n        children: [\n          {\n            path: 'attributes',\n            component: { template: '\u003crouter-view /\u003e' },\n            children: [\n              {\n                name: 'admin.attributes',\n                path: '',\n                component: AdminAttributes,\n                meta: { auth: [SYSTEM_ROLE.ANY] }\n              },\n              {\n                name: 'admin.attributes.settings',\n                path: 'settings',\n                component: AdminAttributesSettings,\n                meta: formViewMeta()\n              },\n              {\n                name: 'admin.attributes.create',\n                path: 'create',\n                component: AdminAttributesForm,\n                meta: formViewMeta()\n              },\n              {\n                name: 'admin.attributes.edit',\n                path: ':attributeId/edit',\n                component: AdminAttributesForm,\n                meta: formViewMeta(),\n                props: (route) =\u003e ({\n                  attributeId: route.params.attributeId,\n                  mode: ViewMode.EDIT,\n                  title: 'Edit attribute'\n                })\n              }\n            ]\n          },\n          {\n            path: 'layouts',\n            component: { template: '\u003crouter-view /\u003e' },\n            children: [\n              {\n                name: 'admin.layouts',\n                path: '',\n                component: AdminLayouts,\n                meta: { auth: [SYSTEM_ROLE.ANY]}\n              },\n              {\n                name: 'admin.layouts.settings',\n                path: 'settings',\n                component: AdminLayoutsSettings,\n                meta: formViewMeta()\n              },\n              {\n                name: 'admin.layouts.create',\n                path: 'create',\n                component: AdminLayoutsForm,\n                meta: editorMeta()\n              },\n              {\n                name: 'admin.layouts.edit',\n                path: ':layoutId/edit',\n                component: AdminLayoutsForm,\n                meta: editorMeta(),\n                props: (route) =\u003e ({\n                  layoutId: route.params.layoutId,\n                  mode: ViewMode.EDIT,\n                  title: 'Edit layout'\n                })\n              }\n            ]\n          }\n        ]\n      }\n    ];\n    ```\n  * Remove folders `AdminProjects`, `AdminTeams`, `AdminUsers` from `/admin/components`\n  * use components from `/modules/auth/components` in certain place of the portal (set into proper file)\n  * while the casimir uses vuetify by default, the app should be wrapped with \u003cv-app\u003e\u003c/v-app\u003e tag (in App.vue file)\n\nafter all these steps you'll have access to add, set and redact attributes for\nyour portal, but there is one more important step - you should add layouts\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasimir-one%2Ffrontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcasimir-one%2Ffrontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasimir-one%2Ffrontend/lists"}