Web Development Final Project - SongDrop

Submitted by: Kelly Chan

This web app: Song Drop is a community forum designed to spotlight and support users' favorite songs. Users can create posts, view them on the home feed, edit or delete their posts, leave comments for discussion, and upvote the songs they enjoy.

Time spent: 3.5 hours spent in total

Required Features

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 should have the option for users to add:
    • additional textual content
    • an image added as an external image URL
• Web app includes a home feed displaying previously created posts
  • Web app must include home feed displaying previously created posts
  • By default, each post on the posts feed should show only the post's:
    • creation time
    • title
    • upvotes count
  • Clicking on a post should direct the user to a new page for the selected post
• Users can view posts in different ways
  • Users can sort posts by either:
    • creation time
    • upvotes count
  • Users can search for posts by title
• Users can interact with each post in different ways
  • The app includes a separate post page for each created post when clicked, where any additional information is shown, including:
    • content
    • image
    • comments
  • Users can leave comments underneath a post on the post page
  • Each post includes an upvote button on the post page.
    • Each click increases the post's upvotes count by one
    • Users can upvote any post any number of times
• A post that a user previously created can be edited or deleted from its post pages
  • After a user creates a new post, they can go back and edit the post
  • A previously created post can be deleted from its post page

The following additional features are implemented:

• Users can edit or delete their comments

Video Walkthrough

Here's a walkthrough of implemented user stories:

GIF created with Adobe Express

Notes

Throughout the development of the app, one of the main challenges was getting familiar with how different components interact and managing their layout in a clean and responsive way. Another challenge was figuring out how to manage state effectively, especially when dealing with interactivity like upvoting. Debugging small styling issues and aligning elements properly also took some time and trial-and-error.

License

Copyright 2025 Kelly Chan

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.