rcps.app

Table of Contents:

1. Stack
2. Setup
3. Features
4. General TODOs
5. Deployment checklist

Stack

• Vue.js (Progressive web app frontend)
• Dexie.js (Local-first database)
• PocketBase (Sync server and user authentication)

Setup

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e

Lint with ESLint

npm run lint

Start the PocketBase server

./pocketbase serve

Features

MVP

• Basic user accounts
• Local data persistence and server sync
• Card views for browsing tags and recipes
• Recipe view for creating, viewing, editing and deleting single recipes
• Importing recipes from screenshots/photos, workflow:
  1. Select screenshots/photos from gallery (view with large buttons and icons prompting user to choose one for ingredients and one for instructions)
  2. Crop both images in one view (types indicated by the icons from step 1)
     Images are then scanned with OCR (executed on client via Tesseract.js or similar)
  3. Check imported data (quick-correct view with larger monospace font and common OCR errors highlighted)
• Settings view
  • Dark/light theme switch
  • Accent color selection (based on dark/light theme)
  • Tags (view, add, edit, delete)
  • Language (automatic or manual locale selection)

Planned (sorted by urgency in relation to complexity)

• Favorites filter toggle for card views
• Alphabetical <-> recent sorting toggle for card views
• Multiple tags selection mode
• Bulk importing recipes from exports of other recipe apps / Schema.org / JSON-LD
• Share screenshots/photos for recipe creation (Web Share Target API, ingredients <-> directions assignment toggle view)
• Ticking ingredients and resetting ticks

General TODOs

• Set up multilangual landing page with SEO
• Research about web dev implications of right-to-left and other language types

Deployment checklist

• PocketBase docs "Going to production"
• Email translations import endpoint deleted from pb_hooks?
• All API Rules safe?