# MeinNachlass.com WebApp
Web app for our MeinNachlass.com Service
Landingpage: [www.MeinNachlass.com](https://github.com/walkerdustin/beyond-webapp/blob/master/www.MeinNachlass.com)
WebApp: [app.Meinnachlass.com](https://github.com/walkerdustin/beyond-webapp/blob/master/app.Meinnachlass.com)
[](https://github.com/walkerdustin/beyond-webapp/blob/master/https://app.netlify.com/sites/service-beyond/deploys)
I have solo developed this WebApp including frontend and backend.
I made the CSS and style of this website according to a proto.io prototype.
This website is built with svelte-kit and Supabase in a JAM-stack configuration.
The Sveltekit Frontend is compiled into a static website hosted on Netlify (CDN).
Supabase is a Backend as a service based on a Postgres DB.
Supabase is used for all Database stuff, Authentication and Authorisation and as a blob storage for PDFs.
I use a single aws lambda function for generating PDFs from markdown.
Check out the infrastructure diagram in the [infrastructure diagram](https://github.com/walkerdustin/beyond-webapp/blob/master/#infrastructure-diagram-id).
Thanks to the simplicity of the architecture and the power of my hosting providers Netlify and Supabase,
My 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.
Another cool thing about this WebApp is how I have done my CMS for storing and configuring the questions
and answers for my questionnaire. My CMS is just a markdown file versioned through this git repository.
[My Markdown file](https://github.com/walkerdustin/beyond-webapp/blob/master/./app\src\lib\Testamentgenerator_qusetions.md) has one code block with a mermaid tag.
mermaid is a cool extension, that can render flowcharts and everything. (I have also used this tool to make the architecture graph in this README).
I use the flowchart syntax of mermaid, to represent my questionnaire.
I use my one extra syntax in the comments of the flowchart to encode extra information.
The transitions of the questions are represented in the regular mermaid syntax.
With the mermaid extension in VsCode, this flowchart is automatically rendered as a graph.
This allows me to edit the flow of my questionnaire in a simple process with quick feedback.
This looks like the following:
```
flowchart TD;
%%Template
%%Questions
__00100(verheiratet?)
%%typ 'regular'
%%frage 'Wie ist Ihr Familienstand?'
%%option0 'Verheiratet'
%%option1 'Nicht (mehr) verheiratet'
%%info 'Hier ist Ihr offizieller Familienstand mageblich. Das bedeutet, dass selbst wenn Sie in fester Partnerschaft leben, nur eine Ehe oder eingetragene Lebenspartnerschaft für Ihr Testament entscheidend sind. (ninebarc)'
%%Transitions
__00100--ja-->__00110
__00100--nein-->__00200
__00110--gemeinsam-->__00120
__00110--alleine-->__00200
```
In the file [questionnaire.ts](https://github.com/walkerdustin/beyond-webapp/blob/master/./app\src\lib\questionnaire.ts), I have created a compiler for this syntax.
It compiles the questions to a javascript object.
The exported function get_questions() then returns the data and flow of the questionnaire into a questions and transitions array.
```js
export function get_questions(): {
questions: questions_dict;
transitions: transitions_network;
}
```
- [MeinNachlass.com WebApp](https://github.com/walkerdustin/beyond-webapp/blob/master/#meinnachlasscom-webapp)
- [Installation](https://github.com/walkerdustin/beyond-webapp/blob/master/#installation)
- [docker + aws cli for development of supabase edge functions and aws lambda functions](https://github.com/walkerdustin/beyond-webapp/blob/master/#docker--aws-cli-for-development-of-supabase-edge-functions-and-aws-lambda-functions)
- [VS Code extensions](https://github.com/walkerdustin/beyond-webapp/blob/master/#vs-code-extensions)
- [Usage](https://github.com/walkerdustin/beyond-webapp/blob/master/#usage)
- [How to do Icons](https://github.com/walkerdustin/beyond-webapp/blob/master/#how-to-do-icons)
- [setup supabase](https://github.com/walkerdustin/beyond-webapp/blob/master/#setup-supabase)
- [generate typescript types for supabase](https://github.com/walkerdustin/beyond-webapp/blob/master/#generate-typescript-types-for-supabase)
- [supabase edge functions](https://github.com/walkerdustin/beyond-webapp/blob/master/#supabase-edge-functions)
- [run the Deno: Initialize Workspace Configuration command.](https://github.com/walkerdustin/beyond-webapp/blob/master/#run-the-deno-initialize-workspace-configuration-command)
- [usage](https://github.com/walkerdustin/beyond-webapp/blob/master/#usage-1)
- [material UI colors](https://github.com/walkerdustin/beyond-webapp/blob/master/#material-ui-colors)
- [Architecture](https://github.com/walkerdustin/beyond-webapp/blob/master/#architecture)
- [initial architecture idea](https://github.com/walkerdustin/beyond-webapp/blob/master/#initial-architecture-idea)
- [infrastructure diagram {infrastructure-diagram-id}](https://github.com/walkerdustin/beyond-webapp/blob/master/#infrastructure-diagram----infrastructure-diagram-id)
- [Database structure](https://github.com/walkerdustin/beyond-webapp/blob/master/#database-structure)
- [What Views should my database generate?](https://github.com/walkerdustin/beyond-webapp/blob/master/#what-views-should-my-database-generate)
- [netlify](https://github.com/walkerdustin/beyond-webapp/blob/master/#netlify)
- [sveltekit](https://github.com/walkerdustin/beyond-webapp/blob/master/#sveltekit)
- [copilot is actually pretty good](https://github.com/walkerdustin/beyond-webapp/blob/master/#copilot-is-actually-pretty-good)
- [development Journey](https://github.com/walkerdustin/beyond-webapp/blob/master/#development-journey)
- [install sveltekit](https://github.com/walkerdustin/beyond-webapp/blob/master/#install-sveltekit)
- [setup static adapter](https://github.com/walkerdustin/beyond-webapp/blob/master/#setup-static-adapter)
- [deploy with netlify](https://github.com/walkerdustin/beyond-webapp/blob/master/#deploy-with-netlify)
- [setup git LFS](https://github.com/walkerdustin/beyond-webapp/blob/master/#setup-git-lfs)
- [error when deploying](https://github.com/walkerdustin/beyond-webapp/blob/master/#error-when-deploying)
- [try out reusable components and routing](https://github.com/walkerdustin/beyond-webapp/blob/master/#try-out-reusable-components-and-routing)
- [check out UI Framworks](https://github.com/walkerdustin/beyond-webapp/blob/master/#check-out-ui-framworks)
- [link our custom domain](https://github.com/walkerdustin/beyond-webapp/blob/master/#link-our-custom-domain)
- [Evaluate UI Library](https://github.com/walkerdustin/beyond-webapp/blob/master/#evaluate-ui-library)
- [Trello Aufgaben überlegen](https://github.com/walkerdustin/beyond-webapp/blob/master/#trello-aufgaben-überlegen)
- [https://svelte.dev/tutorial/basics](https://github.com/walkerdustin/beyond-webapp/blob/master/#httpssveltedevtutorialbasics)
- [migrate Sveltekit](https://github.com/walkerdustin/beyond-webapp/blob/master/#migrate-sveltekit)
- [setup SMUI](https://github.com/walkerdustin/beyond-webapp/blob/master/#setup-smui)
- [Learn SCSS and SASS](https://github.com/walkerdustin/beyond-webapp/blob/master/#learn-scss-and-sass)
- [figure out and setup icons](https://github.com/walkerdustin/beyond-webapp/blob/master/#figure-out-and-setup-icons)
- [scss thing was not working](https://github.com/walkerdustin/beyond-webapp/blob/master/#scss-thing-was-not-working)
- [setup tailwind](https://github.com/walkerdustin/beyond-webapp/blob/master/#setup-tailwind)
- [reset css styles](https://github.com/walkerdustin/beyond-webapp/blob/master/#reset-css-styles)
- [stupid links are draggable and mess with dem being abel to be clicked.](https://github.com/walkerdustin/beyond-webapp/blob/master/#stupid-links-are-draggable-and-mess-with-dem-being-abel-to-be-clicked)
- [make the footer stick to bottom](https://github.com/walkerdustin/beyond-webapp/blob/master/#make-the-footer-stick-to-bottom)
- [try out the official tailwind installation, to fix bug](https://github.com/walkerdustin/beyond-webapp/blob/master/#try-out-the-official-tailwind-installation-to-fix-bug)
- [check out supabase ui](https://github.com/walkerdustin/beyond-webapp/blob/master/#check-out-supabase-ui)
- [do auth based on the supabase-js documentation](https://github.com/walkerdustin/beyond-webapp/blob/master/#do-auth-based-on-the-supabase-js-documentation)
- [connect supabase with my email server (mail.zoho.eu)](https://github.com/walkerdustin/beyond-webapp/blob/master/#connect-supabase-with-my-email-server-mailzohoeu)
- [stupid problem with supabase auth.](https://github.com/walkerdustin/beyond-webapp/blob/master/#stupid-problem-with-supabase-auth)
- [setup protected route with svelte await blocks](https://github.com/walkerdustin/beyond-webapp/blob/master/#setup-protected-route-with-svelte-await-blocks)
- [implement static optimized tailwind for production](https://github.com/walkerdustin/beyond-webapp/blob/master/#implement-static-optimized-tailwind-for-production)
- [make the password field have the correct type and have hidden characters](https://github.com/walkerdustin/beyond-webapp/blob/master/#make-the-password-field-have-the-correct-type-and-have-hidden-characters)
- [Create the Questionaire from a Human Readable and editable flow chart](https://github.com/walkerdustin/beyond-webapp/blob/master/#create-the-questionaire-from-a-human-readable-and-editable-flow-chart)
- [Requirements for storage](https://github.com/walkerdustin/beyond-webapp/blob/master/#requirements-for-storage)
- [Create a Questionaire from the data](https://github.com/walkerdustin/beyond-webapp/blob/master/#create-a-questionaire-from-the-data)
- [Generate a Pdf from the data of the questionaire](https://github.com/walkerdustin/beyond-webapp/blob/master/#generate-a-pdf-from-the-data-of-the-questionaire)
- [What do I need to create the pdf](https://github.com/walkerdustin/beyond-webapp/blob/master/#what-do-i-need-to-create-the-pdf)
- [ways to create a pdf in a deno function](https://github.com/walkerdustin/beyond-webapp/blob/master/#ways-to-create-a-pdf-in-a-deno-function)
- [I can not do it in deno on the edge](https://github.com/walkerdustin/beyond-webapp/blob/master/#i-can-not-do-it-in-deno-on-the-edge)
- [lambda function to convert markdown to pdf](https://github.com/walkerdustin/beyond-webapp/blob/master/#lambda-function-to-convert-markdown-to-pdf)
- [supabase edge functions](https://github.com/walkerdustin/beyond-webapp/blob/master/#supabase-edge-functions-1)
- [write to storage (from cloud function)](https://github.com/walkerdustin/beyond-webapp/blob/master/#write-to-storage-from-cloud-function)
- [Build a family tree](https://github.com/walkerdustin/beyond-webapp/blob/master/#build-a-family-tree)
- [Find the correct library](https://github.com/walkerdustin/beyond-webapp/blob/master/#find-the-correct-library)
- [YFIles / YWorks](https://github.com/walkerdustin/beyond-webapp/blob/master/#yfiles--yworks)
- [How to do testing in sveltekit](https://github.com/walkerdustin/beyond-webapp/blob/master/#how-to-do-testing-in-sveltekit)
- [Problem:](https://github.com/walkerdustin/beyond-webapp/blob/master/#problem)
- [Vitest is amazing](https://github.com/walkerdustin/beyond-webapp/blob/master/#vitest-is-amazing)
- [development of aws lambda function for generating pdf testamant from markdown](https://github.com/walkerdustin/beyond-webapp/blob/master/#development-of-aws-lambda-function-for-generating-pdf-testamant-from-markdown)
- [can I use local file system with aws lambda](https://github.com/walkerdustin/beyond-webapp/blob/master/#can-i-use-local-file-system-with-aws-lambda)
- [plan:](https://github.com/walkerdustin/beyond-webapp/blob/master/#plan)
- [How to make the edge function secure?](https://github.com/walkerdustin/beyond-webapp/blob/master/#how-to-make-the-edge-function-secure)
- [Using a random secret key seems like the best option, because it is the easiest to implement.](https://github.com/walkerdustin/beyond-webapp/blob/master/#using-a-random-secret-key-seems-like-the-best-option-because-it-is-the-easiest-to-implement)
- [env variable in supabase edge function](https://github.com/walkerdustin/beyond-webapp/blob/master/#env-variable-in-supabase-edge-function)
## Installation
I use git-lfs for large binary files like images and other media
install https://git-lfs.github.com/
install dependencies and run the dev-server for the svelte-kit frontend
```bash
cd app
npm install
npx smui-theme template src/theme
npm run prepare
npm run dev -- --open
```
create your theme files with smui-theme > `npx smui-theme template src/theme`
Whenever you add a new SMUI package, run > `npm run prepare` again to rebuild your CSS file with the new component’s styles included.
### docker + aws cli for development of supabase edge functions and aws lambda functions
I use docker only for my aws lambda function to
https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
https://docs.docker.com/get-docker/
### VS Code extensions
These extensions are necessary
- German - Code Spell Checker
- HTML CSS Support
- Svelte for VS Code
- Svelte 3 Snippets
- Tailwind CSS IntelliSense
- Markdown Preview Mermaid Support
- Mermaid Markdown Syntax Highlighting
- deno
- github copilot
- Node.js Notebooks (REPL)
- Material Icon Theme
## Usage
### How to do Icons
choose icon from here https://materialdesignicons.com/
and import it in the script as follows
`import { mdiMenu } from '@mdi/js';`
`import { Svg } from '@smui/common/elements';`
`import { Icon } from '@smui/common';`
and then:
```html
```
or download svg from here https://www.svgrepo.com/svg/485460/right-2
### setup supabase
https://supabase.com/docs/guides/cli
first you may need to install scoop
it is a command line installer for windows
https://scoop.sh/
```sh
irm get.scoop.sh | iex
```
then install supabase
```
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase
```
then you have to link your cli to your supabase project
```sh
supabase link --project-ref cpoebtwwvzcrewfytfad --password here-is-your-database-password
```
maybe also login to supabase with your cli token
```sh
supabase login
```
### generate typescript types for supabase
```sh
supabase gen types typescript --linked --schema public > supabase/types/supabase.ts
```
or
```sh
supabase gen types typescript --linked --schema public > app/src/lib/database.types.ts
```
### supabase edge functions
For this to work some stuff needs to be installed and set up:
- Docker
https://www.docker.com/products/docker-desktop/
- deno (language server)
https://deno.land/#installation
- setup deno extension in vs code
run the Deno: Initialize Workspace Configuration command.
-
#### usage
```sh
supabase functions -h
```
- delete- > Delete a Function from Supabase
- deploy -> Deploy a Function to Supabase
- new -> Create a new Function locally
- serve -> Serve a Function locally
```sh
supabase start
```
to start the local supabase docker server
### material UI colors
need to be set in src/variables.scss and src/theme/_smui-theme.scss
## Architecture
### initial architecture idea
Actually, for now, we don't need any external data storage notion CMS is replaced by a mermaid flowchart in the markdown file
### infrastructure diagram {infrastructure-diagram-id}
if no diagram is shown, please install the mermaid extension for vs code
```mermaid
flowchart BT
sk[Svelte Kit]
netlify[Netlify]
subgraph supabase
direction LR
edge[Edge Functions]
s-storage[document Storage]
s-db[Postgress Database]
client[Client API]
auth[Auth]
end
subgraph cms
direction LR
cmsq[Questions and answers \n are written in\n a mermaid flowchart\n in\n Testamentgenerator.md]
end
subgraph styling
direction LR
smui[Material UI]
tailwind[Tailwind]
daisyUi
end
styling --> sk
sk --compile to static html and js --> netlify
client --> supabase
client --> sk
cmsq --compiled to js object during build --> sk
s-storage --> client
auth --> client
s-db --> client
edge --> client
edge --> s-storage
edge --> s-db
edge --> auth
```
## Database structure
*if no diagram is shown, please install the mermaid extension for vs code*
```mermaid
classDiagram
Document <|-- User
Question_Answers <|-- User
class User {
+id: string
+email: string
+password: string
+name: string
+surname: string
+phone: string
+address: string
+city: string
+zip: string
+country: string
+documents: Document[]
}
class Document {
+id: string
+name: string
+type: string
+url: string
+user: User
}
class Question_Answers {
+id: string
+user: User
+answer_option: int
+created_at: timestamp
+updated_at: timestamp
}
```
### What Views should my database generate?
answers of a User
| question_id | answer_option |
|----|---------|
|q-id|0|
|q-id|1|
|q-id|0|
|q-id|null|
### netlify
hosts static files (js, html, css, images, media)
### sveltekit
Startet with the SvelteKit demo app (simple ToDo app)
Typescript - Yes
ESLint - Yes
Prettier - Yes
Playwright - Yes
### copilot is actually pretty good
# development Journey
## install sveltekit
---
https://kit.svelte.dev/
Started with the SvelteKit demo app (simple ToDo app)
Typescript - Yes
ESLint - Yes
Prettier - Yes
Playwright - Yes
## setup static adapter
---
https://github.com/sveltejs/kit/tree/master/packages/adapter-static
npm i -D @sveltejs/adapter-static
## deploy with netlify
---
very easy
just specify the base dir as "app/"
thats it....
build time for the sceleton app with routes and an image. __Build time:__ 16s
## setup git LFS
---
https://git-lfs.github.com/
I found out, that it actually works with netlify even though, i couldnt find any posts online, that suggest so
I did NOT use netlify Large Media
### error when deploying
deploying only works when I manually use "clear cache and retry deploy"
there is a fix available
https://answers.netlify.com/t/builds-fail-after-new-commit-to-git-lfs/1362
set environment variable: https://docs.netlify.com/configure-builds/environment-variables/#netlify-configuration-variables
The following variables should be set in the Netlify UI rather than in netlify.toml. This is because the Netlify configuration file is read after your repository has been cloned.
__GIT_LFS_ENABLED:__ value that is undefined by default. If set, we’ll use git lfs clone to check out your repository — otherwise we use git clone.
## try out reusable components and routing
---
https://www.youtube.com/watch?v=5IajHJULs5I&list=PL4cUxeGkcC9hpM9ARM59Ve3jqcb54dqiP&index=5
## check out UI Framworks
https://www.youtube.com/watch?v=RkD88ARvucM
## link our custom domain
---
we want app.service-beyond to be the domain
use a cname https://fixed.net/blog/cname-a-record-difference?gclid=Cj0KCQjwxb2XBhDBARIsAOjDZ35IOSvvas90sGRQxwRdl2JdNpHchOk4aZDuKQuKyPsQM07DaCESfr0aAq98EALw_wcB
setting up cname on Google cloud DNS was very easy.
it took affect instantlly
setting up ssl certificate took just 1 click on netlify.
it worked after (less then) 2 min
## Evaluate UI Library
| Library | link | note | gitHub Stars |
| ------------ | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------ |
| Svelte UI | [link](https://github.com/walkerdustin/beyond-webapp/blob/master/https://svelte-headlessui.goss.io/docs) | very barebones | |
| Attractions | [link](https://github.com/walkerdustin/beyond-webapp/blob/master/https://www.svelteui.org/) | very barebones | |
| Smelt | [link](https://github.com/walkerdustin/beyond-webapp/blob/master/https://smeltejs.com/) | Smelte is a UI framework built on top of Svelte and Tailwind CSS using Material Design spec | 1.3k |
| SMUI | [link](https://github.com/walkerdustin/beyond-webapp/blob/master/https://sveltematerialui.com/) | | 2.6k |
| Svelterial | [link](https://github.com/walkerdustin/beyond-webapp/blob/master/https://svelterialjs.github.io/svelterial/?path=/story/introduction--introduction) | | |
| Svelma | link | | 152 |
| Svelte Strap | link | | |
| Svelte Atoms | link | | |
| Agnostic UI | link | | |
| Framework 7 | link | | |
---
## Trello Aufgaben überlegen
https://svelte.dev/tutorial/basics
---
## migrate Sveltekit
https://github.com/sveltejs/kit/discussions/5774
one fix was needed
https://github.com/sveltejs/svelte-preprocess
---
## setup SMUI
https://sveltematerialui.com/SVELTEKIT.md
one Issue due to the new sveltekit version needed to be fixed.
https://github.com/hperrin/svelte-material-ui/issues/507
### Learn SCSS and SASS
https://www.youtube.com/watch?v=Zz6eOVaaelI
https://www.youtube.com/watch?v=TymGwiNMlh0&t=389s
### figure out and setup icons
https://youtu.be/OyjZ7dezADw?t=859
https://materialdesignicons.com/
`npm i -D @mdi/js`
### scss thing was not working
`@use 'smui-theme';` had to be put in some scss thing.
There was one thing missing in the `npm run prepare` script
`"site-light": "sass --no-source-map -I src/theme -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site.css"`
## setup tailwind
with https://github.com/svelte-add/tailwindcss
## reset css styles
user agent stylesheet is anoying me
i copyed the reset style thing from https://github.com/filipelinhar ... ...