Alchemy Bulletin Board

Demo

Link to Demo

Getting Started

Use the original web template to get started.

Learning Objectives

• Add data to a Supabase database using the Javascript library
• Load data from a Supabase database using the Javascript library
• Register new users on Supabase using the Javascript library
• Authenticate existing users on Supabase using the Javascript library
• Manage protected and unprotected pages by checking if a user is logged in
• Use location object to redirect users

Description

You are creating an online bulletin board with authentication. Don't forget that you will need to add the link to the supabase library to any HTML that is interacting with the database.

<script defer src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@1.35.7/dist/umd/supabase.min.js"></script>

Acceptance Criteria

• Users should see a list of posts on the home page
• Users should be able to register or login (/auth page)
• Authenticated users should be able to create new posts (/create page)

Rubric

The following is required for your assignment to be graded:

• PR open from dev to main
• PR Passes CI (lint + tests)
• PR preview on netlify
• At least 6 commits, aligning with individual features

Task	Points
Home Page Requirements
Styled list of posts	3
Header with links (or buttons) to auth and create pages	1
ASYNC: fetchPosts() : return array of posts from supabase	2
**Auth Page Requirements **
Allows users to login or sign up for the application	4
ASYNC: signUpUser - calls supabase signUp method and returns user	1
ASYNC: signInUser - calls supabase signIn method and returns user	1
Create Page Requirements
Displays a form for users to add post details	1
Can only be loaded when logged in, otherwise redirects to the auth page	2
Header with links (or buttons) to home	1
Creates a new row in the database on form submit and redirects back to the home page	2
ASYNC: createPost() creates a new row in the database	2

Stretch Goals

• Allow users to edit and delete posts (for now, you can allow ALL authenticated users to edit / delete all posts -- super stretch (i.e. what we'll do next), you can have posts belong to a specific user and only allow users to edit / delete their own posts)
• Allow users to add an image url and display the image on the post
• Add a post detail page and show additional information about the post on the detail page
• Allow users to "complete" a post (i.e. have a boolean field called "complete" and use a checkbox input)
• Add a toggle or dropdown to style the lists differently (i.e. dark mode)
• Row-level-security should be enabled on your Supabase database with policies only allowing logged in users to add new data