bible-reading-challenge

A Bible reading challenge progressive web app. Has personal progress tracking and leaderboard.

Technologies

• Vue 3 with Composition API with setup syntactic sugar
• Pinia store
• Quasar as UI framework
• Supabase for database and authentication
• Netlify to host as static site.

Supabase Setup

Client-side Setup

Create a .env at project root containing your API keys.

VITE_SUPABASE_URL=https://abcdefghijklmnop.supabase.co
VITE_SUPABASE_ANON_KEY=qI2Znoa03NsKfTrF8aCGdVWrtQsssn6Fr0aItWiaXtgmNMMUITDbL3vElCSxXkf

Database Setup

CREATE TABLE public.profiles (
    id uuid NOT NULL,
    first_name text DEFAULT ''::text NOT NULL,
    last_name text DEFAULT ''::text NOT NULL
);

ALTER TABLE ONLY public.profiles
    ADD CONSTRAINT profiles_pkey PRIMARY KEY (id);
    
ALTER TABLE ONLY public.profiles
    ADD CONSTRAINT profiles_id_fkey FOREIGN KEY (id) REFERENCES auth.users(id);

CREATE TABLE public.readings_done (
    id bigint NOT NULL,
    created_at timestamp with time zone DEFAULT now(),
    reader uuid,
    book smallint,
    chapter smallint
);

ALTER TABLE public.readings_done ALTER COLUMN id ADD GENERATED BY DEFAULT AS IDENTITY (
    SEQUENCE NAME public.readings_done_id_seq
    START WITH 1
    INCREMENT BY 1
    NO MINVALUE
    NO MAXVALUE
    CACHE 1
);

ALTER TABLE ONLY public.readings_done
    ADD CONSTRAINT readings_done_pkey PRIMARY KEY (id);

ALTER TABLE ONLY public.readings_done
    ADD CONSTRAINT readings_done_reader_fkey FOREIGN KEY (reader) REFERENCES auth.users(id);

CREATE VIEW public.leaderboard AS
 SELECT users.id,
    count(readings_done.reader) AS count,
    profiles.first_name,
    profiles.last_name
   FROM ((auth.users
     LEFT JOIN public.readings_done ON ((users.id = readings_done.reader)))
     LEFT JOIN public.profiles ON ((profiles.id = users.id)))
  GROUP BY users.id, profiles.first_name, profiles.last_name
  ORDER BY (count(readings_done.reader)) DESC;

Row Level Security Dump

--
-- Name: readings_done Enable delete for users based on user_id; Type: POLICY; Schema: public; Owner: supabase_admin
--

CREATE POLICY "Enable delete for users based on user_id" ON public.readings_done FOR DELETE USING ((auth.uid() = reader));


--
-- Name: readings_done Enable insert for authenticated users only; Type: POLICY; Schema: public; Owner: supabase_admin
--

CREATE POLICY "Enable insert for authenticated users only" ON public.readings_done FOR INSERT TO authenticated WITH CHECK (true);


--
-- Name: readings_done Enable select for authenticated users only; Type: POLICY; Schema: public; Owner: supabase_admin
--

CREATE POLICY "Enable select for authenticated users only" ON public.readings_done FOR SELECT TO authenticated USING (true);


--
-- Name: profiles Public profiles are viewable by anyone authenticated.; Type: POLICY; Schema: public; Owner: supabase_admin
--

CREATE POLICY "Public profiles are viewable by anyone authenticated." ON public.profiles FOR SELECT TO authenticated USING (true);


--
-- Name: profiles Users can insert their own profile.; Type: POLICY; Schema: public; Owner: supabase_admin
--

CREATE POLICY "Users can insert their own profile." ON public.profiles FOR INSERT WITH CHECK ((auth.uid() = id));


--
-- Name: profiles Users can update own profile.; Type: POLICY; Schema: public; Owner: supabase_admin
--

CREATE POLICY "Users can update own profile." ON public.profiles FOR UPDATE USING ((auth.uid() = id));


--
-- Name: profiles; Type: ROW SECURITY; Schema: public; Owner: supabase_admin
--

ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;

--
-- Name: readings_done; Type: ROW SECURITY; Schema: public; Owner: supabase_admin
--

ALTER TABLE public.readings_done ENABLE ROW LEVEL SECURITY;

Attribution

The icon bible.png is created by Freepik on flaticon.com