“Travel Pocket” 📸 Easy CMS with PocketBase

Monorepo for a Travel Blogging app! Featuring a frontend similar to the portfolio app, but a powerful backend with a CMS for admins; with PocketBase doing all of the hard work to set that up instead of us!

Learning Content

Deploying PocketBase: Your own CMS + Backend in 15’: How to deploy PocketBase to Fly.io 🚀 DevEx, version control, CI/CD!
How to fetch data from PocketBase (or anywhere else!): 4+1 ways to fetch data with SvelteKit (ft. PocketBase) client-side, SSR, BFF 🛜

Development of this app happens live on Johnny’s YouTube channel.

Check out the related playlist!

What’s inside?

A Turborepo including the following packages/apps:

web: SvelteKit implementation of the web app
pb: The PocketBase backend, including a CMS for admins
api: ElysiaJS API for use by other apps

Heavily featured tech

Overall

TypeScript for static type checking
bun as the package manager
Prettier for code formatting
ESLint for code linting
Docker for containerization, namely for the PocketBase stack

Frontend (web)

Meta framework: SvelteKit
Styling: Tailwind with shadcn-svelte
Browser tests: Playwright
Backend + CMS: PocketBase

CMS (pb)

API (api)

Framework: ElysiaJS

Local development

Most actions can and should be run from the root of the repository, thanks to Turborepo and as specified in turbo.json.

bun i & bun dev will get you there, but only after you’ve created your own .env, and given Docker permissions to mount directories inside ./apps/pb as volumes!

Install dependencies

bun i

Will install dependencies for everything in the monorepo!

Environment variables

Apps can have their own .env / .env.local / .env.test files. Only .env.test is committed to version control, so you should use that as a template to create your own .env & .env.local.

The PocketBase stack requires Docker to be available, and have permission to mount some directories within our apps/pb. With the Docker Desktop app for Mac running, you can go to its Settings -> Resources -> File Sharing tab, and add the to apps/pb in the Virtual file shares section.

If you only want to do this once in your life, you may allowlist all paths under where you keep your code, like /Users/your-username/Code… but that depends on how YOLO you’re feeling.

Run all dev servers on watch mode

bun dev

Navigate to localhost:5137 to see the core web app.

This command includes spinning up a local database, so everything should just work!

… If not, make sure you’ve created your own .env / .env.local files, as described elsewhere in this README.

Keep in mind that the local database is spun up using the Turso CLI, which does require you to login / authenticate with your Turso account. Weird choice by them, but hey, at least it works with a free account!

Run all tests

With the dev servers running, run:

bun run test

Update all dependencies in all apps

To update all dependencies, including all package.jsons to point to their latest versions, run:

bun run update

Interactive UI will let you select which packages you actually want to update! Recommended to do all of them anyway.

Other handy scripts

Refer to the package.json & turbo.json for more scripts, namely linting & formatting.

Architectural Decision Records

We keep track of particularly important, or arguable, architecture decisions in the docs/adr directory.

Read more about Architectural Decision Records, including how create new ones, or supercede old ones.

Concept

Picture-heavy blog for a client who wants a CMS where they can easily tweak the content, add new posts and especially upload and reorder pictures!