{"id":14968967,"url":"https://github.com/walkerdustin/beyond-webapp","last_synced_at":"2026-01-24T12:10:14.096Z","repository":{"id":62203361,"uuid":"520630368","full_name":"walkerdustin/beyond-webapp","owner":"walkerdustin","description":"Webapp for our beyond service at service-beyond.de","archived":false,"fork":false,"pushed_at":"2024-02-16T22:21:12.000Z","size":1937,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T16:05:39.878Z","etag":null,"topics":["jamstack","netlify","static-site","static-site-generator","supabase","supabase-auth","supabase-js","svelte","svelte-kit","sveltekit","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"Svelte","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/walkerdustin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-08-02T19:48:07.000Z","updated_at":"2023-12-01T06:01:23.000Z","dependencies_parsed_at":"2024-02-16T23:29:27.121Z","dependency_job_id":"57030272-eb82-49ff-bed6-99ae179f43e4","html_url":"https://github.com/walkerdustin/beyond-webapp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walkerdustin%2Fbeyond-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walkerdustin%2Fbeyond-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walkerdustin%2Fbeyond-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walkerdustin%2Fbeyond-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/walkerdustin","download_url":"https://codeload.github.com/walkerdustin/beyond-webapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238275937,"owners_count":19445315,"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":["jamstack","netlify","static-site","static-site-generator","supabase","supabase-auth","supabase-js","svelte","svelte-kit","sveltekit","tailwindcss"],"created_at":"2024-09-24T13:40:52.882Z","updated_at":"2025-10-26T06:30:50.912Z","avatar_url":"https://github.com/walkerdustin.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MeinNachlass.com WebApp\nWeb app for our MeinNachlass.com Service\n\n## What does this app do?\nMeinNachlass.com allows you to take care of your estate yourself. Just as a notary or estate planning advisor would do, we guide you through the process of creating your will in a questionnaire.\n\nLandingpage: [www.MeinNachlass.com](https://www.MeinNachlass.com)   \nWebApp: [app.Meinnachlass.com](https://app.Meinnachlass.com)  \n[![Netlify Status](https://api.netlify.com/api/v1/badges/45ba1b8d-677f-4139-a2bf-1cabdbd4eaaf/deploy-status)](https://app.netlify.com/sites/service-beyond/deploys)\n\nScreenshot of the app`s questionnaire\n\n![screenshot of the app](docs/images/app_screenshot.PNG)\n\n## How is it built?\n\nI have solo developed this WebApp including frontend and backend.  \nI made the CSS and style of this website according to a proto.io prototype.  \nThis website is built with svelte-kit and Supabase in a JAM-stack configuration.  \nThe Sveltekit Frontend is compiled into a static website hosted on Netlify (CDN).  \nSupabase is a Backend as a service based on a Postgres DB.  \nSupabase is used for all Database stuff, Authentication and Authorisation and as a blob storage for PDFs.  \nI use a single aws lambda function for generating PDFs from markdown.  \nCheck out the infrastructure diagram in the [infrastructure diagram](#infrastructure-diagram).  \n\nThanks to the simplicity of the architecture and the power of my hosting providers Netlify and Supabase,  \nMy web app has the full DevOps workflow with continuous deployment built right in. If I create a pull request to main, a staging site is automatically deployed and online available for review.\n\n\n\n## One highlight in the code architecture\n\nAnother cool thing about this WebApp is how I have done my CMS for storing and configuring the questions\nand answers for my questionnaire. My CMS is just a markdown file versioned through this git repository.\n[My Markdown file](/app/src/lib/Testamentgenerator_qusetions.md) has one code block with a mermaid tag. \nmermaid is a cool extension, that can render flowcharts and everything. (I have also used this tool to make the architecture graph in this README).\nI use the flowchart syntax of mermaid, to represent my questionnaire.\nI use my one extra syntax in the comments of the flowchart to encode extra information.\nThe transitions of the questions are represented in the regular mermaid syntax.  \nWith the mermaid extension in VsCode, this flowchart is automatically rendered as a graph.\nThis allows me to edit the flow of my questionnaire in a simple process with quick feedback.  \nThis looks like the following:\n![CMS workflow](/docs/images/CMS_workflow.PNG)\n\nIn the file [questionnaire.ts](./app/src/lib/questionnaire.ts), I have created a compiler for this syntax.\nIt compiles the questions to a javascript object.\nThe exported function get_questions() returns the questions and transitions for the questionnaire into a questions and transitions array. \n```js\nexport function get_questions(): {\n    questions: questions_dict;\n    transitions: transitions_network;\n}\n```\nIn the svelte code, these arrays are utilized to dynamically create the questionnaire.\nThe selected answers are stored in the database.\n\n- [MeinNachlass.com WebApp](#meinnachlasscom-webapp)\n  - [What does this app do?](#what-does-this-app-do)\n  - [How is it built?](#how-is-it-built)\n  - [One highlight in the code architecture](#one-highlight-in-the-code-architecture)\n  - [Installation](#installation)\n    - [docker + aws cli for development of supabase edge functions and aws lambda functions](#docker--aws-cli-for-development-of-supabase-edge-functions-and-aws-lambda-functions)\n    - [VS Code extensions](#vs-code-extensions)\n  - [Usage](#usage)\n    - [How to do Icons](#how-to-do-icons)\n    - [setup supabase](#setup-supabase)\n    - [generate typescript types for supabase](#generate-typescript-types-for-supabase)\n    - [supabase edge functions](#supabase-edge-functions)\n  - [run the Deno: Initialize Workspace Configuration command.](#run-the-deno-initialize-workspace-configuration-command)\n      - [usage](#usage-1)\n    - [material UI colors](#material-ui-colors)\n  - [Architecture](#architecture)\n    - [initial architecture idea](#initial-architecture-idea)\n    - [infrastructure diagram](#infrastructure-diagram)\n  - [Database structure](#database-structure)\n\n\n\n\n## Installation\nI use git-lfs for large binary files like images and other media  \ninstall https://git-lfs.github.com/  \n\ninstall dependencies and run the dev-server for the svelte-kit frontend\n```bash\ncd app  \nnpm install  \nnpx smui-theme template src/theme\nnpm run prepare\nnpm run dev -- --open\n```\ncreate your theme files with smui-theme \u003e `npx smui-theme template src/theme`  \nWhenever you add a new SMUI package, run \u003e `npm run prepare` again to rebuild your CSS file with the new component’s styles included.\n\n### docker + aws cli for development of supabase edge functions and aws lambda functions\nI use docker only for my aws lambda function to \nhttps://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html\n\nhttps://docs.docker.com/get-docker/\n\n### VS Code extensions\nThese extensions are necessary\n- German - Code Spell Checker\n- HTML CSS Support\n- Svelte for VS Code\n- Svelte 3 Snippets\n- Tailwind CSS IntelliSense\n- Markdown Preview Mermaid Support\n- Mermaid Markdown Syntax Highlighting\n- deno\n- github copilot\n- Node.js Notebooks (REPL)\n- Material Icon Theme\n\n\n## Usage\n\n### How to do Icons\nchoose icon from here https://materialdesignicons.com/  \nand import it in the script as follows   \n`import { mdiMenu } from '@mdi/js';`  \n`import { Svg } from '@smui/common/elements';`  \n`import { Icon } from '@smui/common';`\nand then:\n```html\n\u003cIcon component={Svg} viewBox=\"0 0 24 24\" width=\"20px\" height=\"20px\"\u003e\n    \u003cpath fill=\"currentColor\" d={mdiMenu} /\u003e\n\u003c/Icon\u003e\n```\nor download svg from here https://www.svgrepo.com/svg/485460/right-2\n### setup supabase\nhttps://supabase.com/docs/guides/cli  \n\nfirst you may need to install scoop\nit is a command line installer for windows\nhttps://scoop.sh/\n```sh\t\nirm get.scoop.sh | iex\n```\nthen install supabase\n\n```\nscoop bucket add supabase https://github.com/supabase/scoop-bucket.git\nscoop install supabase\n``` \nthen you have to link your cli to your supabase project\n```sh\nsupabase link --project-ref cpoebtwwvzcrewfytfad --password here-is-your-database-password\n```\nmaybe also login to supabase with your cli token\n```sh\nsupabase login\n```\n\n### generate typescript types for supabase\n```sh\nsupabase gen types typescript --linked --schema public \u003e supabase/types/supabase.ts\n```\nor\n```sh\nsupabase gen types typescript --linked --schema public \u003e app/src/lib/database.types.ts\n```\n### supabase edge functions\nFor this to work some stuff needs to be installed and set up:\n- Docker  \n https://www.docker.com/products/docker-desktop/\n- deno (language server) \n https://deno.land/#installation\n- setup deno extension in vs code  \n run the Deno: Initialize Workspace Configuration command.\n- \n\n#### usage\n```sh\nsupabase functions -h\n```\n- delete- \u003e      Delete a Function from Supabase  \n- deploy -\u003e      Deploy a Function to Supabase  \n- new    -\u003e      Create a new Function locally  \n- serve  -\u003e      Serve a Function locally  \n```sh\nsupabase start\n```\n\nto start the local supabase docker server\n### material UI colors\nneed to be set in src/variables.scss and src/theme/_smui-theme.scss\n\n## Architecture\n### initial architecture idea\n![architecture](docs/images/architecture.PNG)\nActually, for now, we don't need any external data storage notion CMS is replaced by a mermaid flowchart in the markdown file\n\n### infrastructure diagram\n\nif no diagram is shown, please install the mermaid extension for vs code\n\n```mermaid\nflowchart BT\n    sk[Svelte Kit]\n    netlify[Netlify]\n    subgraph supabase\n    direction LR\n        edge[Edge Functions]\n        s-storage[document Storage]\n        s-db[Postgress Database]\n        client[Client API]\n        auth[Auth]\n    end\n\n    subgraph cms\n        direction LR\n        cmsq[Questions and answers \\n are written in\\n a mermaid flowchart\\n in\\n Testamentgenerator.md]\n    end\n    subgraph styling\n    direction LR\n        smui[Material UI]\n        tailwind[Tailwind]\n        daisyUi\n    end\n    subgraph aws_lambda\n        lambda_f[function to create pdfs from markdown]\n    end\n    styling --\u003e sk\n    sk --compile to static html and js --\u003e netlify\n    client --\u003e supabase\n    client --\u003e sk\n    cmsq --compiled to js object during build --\u003e sk\n    s-storage --\u003e client\n    auth --\u003e client\n    s-db --\u003e client\n    edge --\u003e client\n    edge --\u003e s-storage\n    edge --\u003e s-db\n    edge --\u003e auth\n    lambda_f --\u003e edge\n```\n\n## Database structure\n*if no diagram is shown, please install the mermaid extension for vs code*\n\n```mermaid\nclassDiagram\n    User \u003c|-- Documents\n    User \u003c|-- Family_members\n    User \u003c|-- Testament_gen_question_answers\n    Testament_gen_questions \u003c|-- Testament_gen_question_answers\n    Family_members \u003c|-- Vermachtnisse\n    User \u003c|-- Vermachtnisse\n\n\n    class User {\n      +id: string\n      +updated_at: string | null\n      +username: string | null\n    }\n    class Documents {\n        +id: number\n        +owning_user_uuid: User\n        +document_id: string\n        +created_at: string\n    }\n    class Family_members {\n      +id: number\n      +created_at: string \n      +family_of_user: string \n      +first_name: string \n      +inheritance_quota: number\n      +last_name: string \n      +relation: string \n    }\n    class Testament_gen_question_answers {\n      +question_id: Testament_gen_questions\n      +user_id: string\n      +chosen_option: number \n      +created_at: string \n      +updated_at: string \n    }\n    class Testament_gen_questions {\n      +id: number\n      +created_at: string \n      +id_in_mermaid: string \n      +name_of_question: string\n    }\n    class Vermachtnisse {\n      +id: number\n      +created_at: string \n      +estimated_value: number \n      +to_family_member: Family_members\n      +vermachtnis_item: string\n      +vermachtnis_of_user: User\n      +vorausvermachtnis: boolean\n    }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalkerdustin%2Fbeyond-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwalkerdustin%2Fbeyond-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalkerdustin%2Fbeyond-webapp/lists"}