backpad

Imagine a pad attached to your back that your colleauges could read and write, but you can't 🗒️ Don't worry: they all have one too! 😅

This would allow your colleagues to communicate your special features to new people, saving them from finding out the hard way. It could show up missing stairs possibly bringing serious issues to resolution. Perhaps it enables new forms of bullying?

This idea comes from Seth Frey's “Why can’t I work with this person?”: Your collaborator’s secret manual and is mostly focussed on implementing the key feature without bigtech tooling.

Outline

• v1
  • users create account
  • all users considered part of same group
  • users can:
    • see all other users
    • read and write on the pad every other user has
• v1.1
  • error handling in forms (back to inputs)
  • warning if deleting in backpad
  • basic in-app onboarding
  • a comprehensive design

Tech

• Svelte & SvelteKit - front & backend framework
• Valibot - data validation library
• Better-auth - authentication library
• Prisma - object relational mapper
• PostgreSQL - relational database management system
• node, typescript, vite...

Setup

pnpm i
# adapt `.env.example` and rename `.env`
pnpx prisma migrate dev --name init
pnpx prisma generate

Steps I took to set up

# created empty repo on github
git clone git@github.com:DougInAMug/backpad.git

# setup sveltekit
# https://svelte.dev/docs/kit/creating-a-project
pnpx sv create . # all defaults: minimal, TS, no add-ons

# prisma ORM setup
# hhttps://www.prisma.io/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql
service postgresql status # check postgres running
pnpm i prisma --save-dev
pnpx prisma init --datasource-provider postgresql --output ../node_modules/@prisma-generated/client # https://github.com/prisma/prisma/discussions/20200#discussioncomment-7441241
pnpx prisma migrate dev --name init

# prisma client setup
# https://www.prisma.io/docs/orm/prisma-client/setup-and-configuration/introduction
pnpm i @prisma/client
pnpx prisma generate

# better-auth installation
# https://www.better-auth.com/docs/installation
pnpm add better-auth

Todo

• Make wireframes
  • Done on Penpot
• Setup better-auth
• Create sign-up, log-in, log-out flows
• Adapt User data model from better-auth to contain backpad
• Create view of backpads
  • SELECT backpad FROM every user whose id != id of logged-in user
  • display backpads as list. (See details)
• Make backpads editable. Form actions.
• Make it prettier