{"id":15152903,"url":"https://github.com/stellar-dapps/4m00se-dapp","last_synced_at":"2025-08-22T07:21:17.748Z","repository":{"id":252818385,"uuid":"841455338","full_name":"stellar-dapps/4m00se-dapp","owner":"stellar-dapps","description":"Web3-enabled WYSIWYG form builder application yielding customized embeddable HTML form widgets","archived":false,"fork":false,"pushed_at":"2024-12-03T14:55:20.000Z","size":1292,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-14T11:59:52.514Z","etag":null,"topics":["forms","ipfs","mdsvex","picocss","soroban","stellar","sveltekit","vitepress","web3","widget"],"latest_commit_sha":null,"homepage":"https://4m.lol","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stellar-dapps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-12T12:49:19.000Z","updated_at":"2024-12-03T15:05:37.000Z","dependencies_parsed_at":"2024-10-10T05:28:25.494Z","dependency_job_id":"64311737-f41e-418c-b1d1-212c0319563a","html_url":"https://github.com/stellar-dapps/4m00se-dapp","commit_stats":{"total_commits":62,"total_committers":2,"mean_commits":31.0,"dds":"0.032258064516129004","last_synced_commit":"fafb198f7d06376ec7594d9e97b5d8bdb0789836"},"previous_names":["stellar-dapps/4m00se-dapp"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stellar-dapps%2F4m00se-dapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stellar-dapps%2F4m00se-dapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stellar-dapps%2F4m00se-dapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stellar-dapps%2F4m00se-dapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stellar-dapps","download_url":"https://codeload.github.com/stellar-dapps/4m00se-dapp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234718141,"owners_count":18876320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["forms","ipfs","mdsvex","picocss","soroban","stellar","sveltekit","vitepress","web3","widget"],"created_at":"2024-09-26T16:41:25.539Z","updated_at":"2025-01-20T00:27:31.607Z","avatar_url":"https://github.com/stellar-dapps.png","language":"HTML","funding_links":[],"categories":["OSS examples built with metaframeworks"],"sub_categories":[],"readme":"# 4m00se — web3-enabled form widgets builder\n\nSee [the official website](https://4m.lol) for the details on the application, its architecture, philosophy, and also the user guides and the developer guides.\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Features](#features)\n- [Technology Stack](#technology-stack)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Project Structure](#project-structure)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Introduction\n\n4m00se is a decentralized-by-default application designed to provide a seamless experience for creating and managing forms, both on the blockchain, and outside of it (pure habitual web2 flow). It leverages the power of decentralized storage (IPFS via Pinata) and blockchain technology (Stellar/Soroban) to ensure data integrity and security, but also allows to work with JSON directly and use HTML widgets with custom user-provided callbacks.\n\n## Major features\n\n- **WYSIWYG Form builder**: Create custom forms with ease via simple web interface.\n- **Embeddable widgets**: Easily embed forms you'd built into web pages and applications via simple unique HTML code snippets.\n- **Form submission reader**: Read and manage form responses for each of the forms.\n- **Decentralized storage**: All form data (both config and user responses) can be stored as transactions on the Stellar network and linked to IPFS for JSON storage itself.\n\n## Technology Stack\n\n- **Frontend**:\n\n  - SvelteKit\n  - TypeScript\n  - Vite\n  - VitePress (the documentation)\n  - MDsveX (the blog)\n  - PicoCSS\n\n- **Embeddable Widget**:\n\n  - Svelte\n  - TypeScript\n  - markdown-it\n  - PicoCSS\n  - Rollup\n\n- **Authentication**:\n\n  - Freighter Wallet API\n\n- **Data Storage**:\n  - Stellar Network API/SDK\n  - IPFS (via Pinata API/SDK)\n\n## Installation\n\n### Prerequisites\n\n- Rust environment for Soroban smart contracts, and Stellar CLI, see [the official guide](https://developers.stellar.org/docs/build/smart-contracts/getting-started/setup) for reference\n- Node.js v20 or later (with `npm`), you can use [NVM](https://github.com/nvm-sh/nvm) with the included `.nvmrc`\n- Reading the starter guides from the official Stellar documentation for [writing smart contracts](https://developers.stellar.org/docs/build/smart-contracts/overview) and [building dapp frontends](https://developers.stellar.org/docs/build/apps/dapp-frontend) gives good context for working with the technologies\n- The approach of building Soroban contract TS clients is shortly described [here](https://github.com/stellar-dapps/stellar-contracts-with-astro?tab=readme-ov-file#how-it-works)\n\n### Steps\n\n1. Clone the repository:\n\n```bash\ngit clone git@github.com:stellar-dapps/4m00se-dapp.git\ncd 4m00se-dapp\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Copy and populate required environment variables\n\n```bash\ncp .env.example .env\n```\n\n4. [Optional] Initialize environment for smart contracts, as mentioned above, if it's not there yet\n\n```bash\nnpm run setup-environment\n```\n\n5. [Optional] Initiate the contracts and their TS clients for the dapp to work with (included into the previous step so not necessary if it was run already, but also can be run separately for existing Rust/Soroban environment)\n\n```bash\nnode scripts/initialize.js\n```\n\n6. [Optional but recommended] Build the documentation pages\n\n```bash\nnpm run build:docs\n```\n\n7. [Optional] Build widget bundle\n\n```bash\nnpm run build:widget\n```\n\n8. Start the development server\n\n```bash\nnpm run dev\n```\n\n## Usage\n\n### Form Builder\n\n- Navigate to the form builder page and log in via browser's Freighter wallet extension (use testnet).\n- Create a new form by adding fields and configuring options.\n- Preview and save the form.\n- Get embeddable widget code and instructions.\n\n### Form Responses\n\n- Navigate to the form responses subpage.\n- View and manage form submissions.\n\n### Embeddable Widget\n\n1. Include the widget from CDN in your application by adding the following script tag\n\n```html\n\u003cscript src=\"https://4m.lol/widget/4m00s.js\"\u003e\u003c/script\u003e\n```\n\n2. Initialize the widget with the desired configuration\n\n```html\n\u003cdiv id=\"4m00se-widget-container\"\u003e\u003c/div\u003e\n...\n\u003cscript\u003e\n  formWidgetSDK.initFormWidget({\n    \u003c!-- see the \"Form configuration\" guide --\u003e\n  });\n\u003c/script\u003e\n```\n\n3. Form configuration\n\nYou can configure the following parameters of a form widget:\n\n- `configUrl` — required, generated when a form is built\n- `container` — optional, gives the possibility to use custom container id instead of the default `4m00se-widget-container`\n- `onSubmit` — optional, gives the possibility to use custom callback on form submission (by default, dedicated Freighter transaction signing flow is triggered)\n\n### Examples\n\nSee `/static/demo/...` for real-life usage example(s).\n\n## Project Structure\n\n```\n4m00se-dapp/\n├── contracts/\n│   └── hello_world\n│       ├── src\n│       │   ├── lib.rs\n│       │   └── test.rs\n│       └── Cargo.toml\n├── docs/\n│   └── ...\n├── packages/\n│   └── ...\n├── scripts/\n│   └── ...\n├── src/\n│   └── blogposts/\n│   │   └── ...\n│   └── contracts/\n│   │   ├── ...\n│   │   └── util.ts\n│   ├── lib/\n│   │   ├── components/\n│   │   ├── content/\n│   │   ├── models/\n│   │   ├── stores/\n│   │   └── utils/\n│   ├── routes/\n│   │   ├── ...\n│   │   ├── api/\n│   │   ├── +layout.svelte\n│   │   └── +page.svelte\n│   └── widget/\n│   │   ├── FormWidget.svelte\n│   │   ├── init-form-widget.ts\n│   │   └── ...\n│   ├── app.css\n│   ├── app.d.ts\n│   ├── app.html\n│   └── env.d.ts\n├── static/\n│   ├── demo/\n│   └── ...\n├── Cargo.toml\n├── package.json\n├── rollup.config.js\n├── svelte.config.js\n├── vite.config.ts\n└── ...\n```\n\n## Contributing\n\nContributions are welcome! Please refer to [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## License\n\nThis project is licensed under the Apache-2.0 license. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstellar-dapps%2F4m00se-dapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstellar-dapps%2F4m00se-dapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstellar-dapps%2F4m00se-dapp/lists"}