Web Development Final Project - HobbyHub

Submitted by: Kevon Dawkins

This web app: Allows users to share their passion by creating posts with titles, content, and images. My topic is focused on being a software/hardware engineer and learning how both fields together enhance future opportunities. Users can create, view, edit, delete, upvote, and comment on posts.

Time spent: 10 hours spent in total

The following required functionality is completed:

• Web app includes a create form that allows the user to create posts
  • Form requires users to add a post title
  • Forms allow users to add:
    • additional textual content
    • an image added as an external image URL
• Web app includes a home feed displaying previously created posts
  • Displays title, creation time, and upvote count
  • Posts are sorted by newest first
  • Clicking a post opens a separate detail page
• Users can view posts in different ways
  • Posts can be sorted by:
    • creation time
    • upvotes count
  • Users can search for posts by title
• Users can interact with each post in different ways
  • Each post has a detail page showing:
    • content
    • image
    • comments
  • Users can leave comments
  • Posts can be upvoted multiple times
• A post that a user previously created can be edited or deleted from its post pages
  • Posts have edit forms with pre-filled values
  • Users can delete posts from the detail page

The following optional features are implemented:

• Web app uses Row Level Security policies (SELECT and INSERT)
• Posts include upvote counts that update instantly
• Comments display with time of creation
• Clean UI with light theme and responsive layout

• Comment section auto-refreshes when a new comment is added
• Live upvote updates without refresh
• Navigation bar with links to all pages
• Minimal and accessible design

Here's a walkthrough of implemented user stories:

GIF created with ScreenToGif

Challenges:

• Supabase Row Level Security blocked data until policies were configured correctly
• Used .env setup for storing Supabase API keys
• React state management with live updates was tricky to debug at first

Copyright 2025 Kevon Dawkins

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.