MeinNachlass.com WebApp

Web app for our MeinNachlass.com Service

What does this app do?

MeinNachlass.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.

Landingpage: www.MeinNachlass.com
WebApp: app.Meinnachlass.com

Screenshot of the app`s questionnaire

How is it built?

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.

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.

One highlight in the code architecture

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 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:

In the file questionnaire.ts, I have created a compiler for this syntax. It compiles the questions to a javascript object. The exported function get_questions() returns the questions and transitions for the questionnaire into a questions and transitions array.

export function get_questions(): {
    questions: questions_dict;
    transitions: transitions_network;
}

In the svelte code, these arrays are utilized to dynamically create the questionnaire. The selected answers are stored in the database.

• MeinNachlass.com WebApp
  • What does this app do?
  • How is it built?
  • One highlight in the code architecture
  • Installation
    • docker + aws cli for development of supabase edge functions and aws lambda functions
    • VS Code extensions
  • Usage
    • How to do Icons
    • setup supabase
    • generate typescript types for supabase
    • supabase edge functions
  • run the Deno: Initialize Workspace Configuration command.
    • usage
    • material UI colors
  • Architecture
    • initial architecture idea
    • infrastructure diagram
  • Database structure

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

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:

<Icon component={Svg} viewBox="0 0 24 24" width="20px" height="20px">
    <path fill="currentColor" d={mdiMenu} />
</Icon>

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/

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

supabase link --project-ref cpoebtwwvzcrewfytfad --password here-is-your-database-password

maybe also login to supabase with your cli token

supabase login

generate typescript types for supabase

supabase gen types typescript --linked --schema public > supabase/types/supabase.ts

or

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

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

  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

if no diagram is shown, please install the mermaid extension for vs code

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
    subgraph aws_lambda
        lambda_f[function to create pdfs from markdown]
    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
    lambda_f --> edge

Database structure

if no diagram is shown, please install the mermaid extension for vs code

classDiagram
    User <|-- Documents
    User <|-- Family_members
    User <|-- Testament_gen_question_answers
    Testament_gen_questions <|-- Testament_gen_question_answers
    Family_members <|-- Vermachtnisse
    User <|-- Vermachtnisse


    class User {
      +id: string
      +updated_at: string | null
      +username: string | null
    }
    class Documents {
        +id: number
        +owning_user_uuid: User
        +document_id: string
        +created_at: string
    }
    class Family_members {
      +id: number
      +created_at: string 
      +family_of_user: string 
      +first_name: string 
      +inheritance_quota: number
      +last_name: string 
      +relation: string 
    }
    class Testament_gen_question_answers {
      +question_id: Testament_gen_questions
      +user_id: string
      +chosen_option: number 
      +created_at: string 
      +updated_at: string 
    }
    class Testament_gen_questions {
      +id: number
      +created_at: string 
      +id_in_mermaid: string 
      +name_of_question: string
    }
    class Vermachtnisse {
      +id: number
      +created_at: string 
      +estimated_value: number 
      +to_family_member: Family_members
      +vermachtnis_item: string
      +vermachtnis_of_user: User
      +vorausvermachtnis: boolean
    }