SpiritWord Chapel

Simple website for my dad to host his weekly sermons. Originally a quick and dirty project I built in a day in response to the lockdown. I recently revisited it to add a little homegrown CMS so he can update it himself.

The frontend is Next.js with some fun uses of Image and getStaticProps.

The backend is Supabase, which is an open source Firebase competitor but it's mostly a thin layer over Postgres and was a really good fit. The database, plus authentication, plus row level security, plus storage, was the exact set of features I needed.

To run this locally you'll need to set up a Supabase project and export these in your local environment:

NEXT_PUBLIC_SUPABASE_URL=<your url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your anon key>

And then in Supabase you'll need to create a "sermons" table and a "admins" table. (I just manually edit the admins table to add the uid of me and my dad).

Here's the query:

create table sermons (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  inserted_at timestamp with time zone DEFAULT timezone('utc'::text, now()) NOT NULL,
  date date,
  title text,
  pdf text,
  youtube_id text
);

create table admins (
  user_id uuid references auth.users
);

alter table sermons enable row level security;

create policy "View."
  on sermons for select
  using ( true );

create policy "Insert."
  on sermons for insert
  with check ( auth.uid() in ( select user_id from admins ) );

create policy "Update."
  on sermons for update
  using ( auth.uid() in ( select user_id from admins ) );

create policy "Delete."
  on sermons for delete 
  using ( auth.uid() in ( select user_id from admins ) );

For storage I used the Supabase UI to add true for insert and (uid() IN ( SELECT admins.user_id FROM admins)) for insert.

Next.js stuff

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.