README.md

Runtime FM 🎤

Single page app that powers the runtime.fm website!

Design

What started out as wireframing very quickly became quite similar to neo brutalist design.

Since then we have become quite found of this style of design and decided to continue in this direction.

Stack

The site is deployed to Vercel and the API is a PocketBase instance running on Digital Ocean.

Other tools include:

• Twind
• XState
• sitemap
• Signals
• Podcast
• howler.js

For API setup see this repo.

Pre-rendering

We make extensive use of pre-rendering. To do this effectively we have to fetch data in a suspense friendly way.

Initially we tried to do this with an off the shelf solution, unfortunately we had a number of issues (#950, #957) when doing this, a list of the solutions we tried can be found below:

• pmndrs/use-asset
• dai-shi/react-hooks-fetch
• dai-shi/react-suspense-fetch
• CharlesStover/fetch-suspense
• vigzmv/react-promise-suspense

Tailwind

PostCSS is currently not supported which makes Tailwind usage impossible.

Fortunately twind exists and includes an out of the box WMR integration.

Unfortunately because we are using preact/compat we are required to use className until a fix is found.

Future improvements

• Use Zod to validate data before sending to Pocketbase.
• Use Stork to create pre-compiled search index.
• Use Ranger to handle volume/progress sliders.

Gotcha's

If you are experiencing issues with React types update your tsconfig.json specifically compilerOptions to include the following:

"paths": {
  "react": ["./node_modules/preact/compat/"],
  "react-dom": ["./node_modules/preact/compat/"]
}