codepath · ccao-angelo · Jul 5, 2026 · Jul 5, 2026 · Jul 6, 2026 · Jul 6, 2026
diff --git a/README.md b/README.md
@@ -1,48 +1,85 @@
-# [your app name here]
+# Sona
 
 CodePath WEB103 Final Project
 
-Designed and developed by: [your names here]
+Designed and developed by:
+
+- Gustave Ntwali
+- Abdul Khan
+- Carolina Herrera
+- Chau Cao
+- Dev Goswami
+- Armin Erika Polanco
 
 🔗 Link to deployed app:
 
 ## About
 
 ### Description and Purpose
 
-[text goes here]
+**Sona** is a full-stack web app where users can browse artist profiles, follow their favorite artists, view upcoming concert dates, and shop artist merch all in one place.
+
+Music fans often have to juggle multiple platforms to keep up with an artist. From social media for updates, ticketing sites for shows, separate stores for merch. **Sona** exists to bring that experience together in one app, making it easier for fans to stay connected and for artists to reach their community directly.
 
 ### Inspiration
 
-[text goes here]
+This project builds on ideas from several of our previous coursework projects. Multiple members of our group have worked on music-themed projects earlier in the course that explored artist/music reference content, vinyl and merch customization, and community-oriented spaces. **Sona** brings these ideas together into a single hub where fans can follow artists, engage with a community built around music, and shop artist merch. Furthermore, we take inspiration from existing platforms, such as Ticketmaster and Bandcamp, to build from. 
 
 ## Tech Stack
 
-Frontend:
+Frontend: React (Vite), React Router
 
-Backend:
+Backend: Express, Node.js, PostgreSQL
 
 ## Features
 
-### [Name of Feature 1]
+### Artist Directory
 
-[short description goes here]
+- Browse all artists with genre, bio, and profile image; click into a full artist page.
 
-[gif goes here]
+- [gif goes here]
 
-### [Name of Feature 2]
+### Follow Artists
 
-[short description goes here]
+- Users can follow/unfollow artists to build a personalized list of who they're keeping up with.
 
-[gif goes here]
+- [gif goes here]
+
+### Merch Shop with Filtering
+
+- Browse merch (vinyl, CD, apparel) filtered by artist, genre, or format.
+
+- [gif goes here]
+
+### Order System
+
+- Add merch to a cart and place an order; view order history.
 
-### [Name of Feature 3]
+- [gif goes here]
 
-[short description goes here]
+### Concert Listings
+
+- View upcoming shows per artist, filterable by city and/or date.
+
+- [gif goes here]
+
+### Artist Quick-View Panel
+
+- Slide-out modal showing artist details and discography without navigating away from the current page.
 
 [gif goes here]
 
-### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]
+### (Stretch) Spotify Connect
+
+- Link a Spotify account to import playlists and generate personalized recommendations.
+
+- [gif goes here]
+
+### (Stretch) Real Payment Integration
+
+- Real checkout system built on top of the existing order system.
+
+- [gif goes here]
 
 ## Installation Instructions
 

diff --git a/milestones/milestone1.md b/milestones/milestone1.md
@@ -6,27 +6,27 @@ This document should be completed and submitted during **Unit 5** of this course
 
 This unit, be sure to complete all tasks listed below. To complete a task, place an `x` between the brackets.
 
-- [ ] Read and understand all required features
-  - [ ] Understand you **must** implement **all** baseline features and **two** custom features
-- [ ] In `readme.md`: update app name to your app's name
-- [ ] In `readme.md`: add all group members' names
-- [ ] In `readme.md`: complete the **Description and Purpose** section
-- [ ] In `readme.md`: complete the **Inspiration** section
-- [ ] In `readme.md`: list a name and description for all features (minimum 6 for full points) you intend to include in your app (in future units, you will check off features as you complete them and add GIFs demonstrating the features)
-- [ ] In `planning/user_stories.md`: add all user stories (minimum 10 for full points)
-- [ ] In `planning/user_stories.md`: use 1-3 unique user roles in your user stories
-- [ ] In this document, complete all thre questions in the **Reflection** section below
+- [x] Read and understand all required features
+  - [x] Understand you **must** implement **all** baseline features and **two** custom features
+- [x] In `readme.md`: update app name to your app's name
+- [x] In `readme.md`: add all group members' names
+- [x] In `readme.md`: complete the **Description and Purpose** section
+- [x] In `readme.md`: complete the **Inspiration** section
+- [x] In `readme.md`: list a name and description for all features (minimum 6 for full points) you intend to include in your app (in future units, you will check off features as you complete them and add GIFs demonstrating the features)
+- [x] In `planning/user_stories.md`: add all user stories (minimum 10 for full points)
+- [x] In `planning/user_stories.md`: use 1-3 unique user roles in your user stories
+- [x] In this document, complete all thre questions in the **Reflection** section below
 
 ## Reflection
 
 ### 1. What went well during this unit?
 
-[👉🏾👉🏾👉🏾 your answer here]
+We agreed on a concept quickly.
 
 ### 2. What were some challenges your group faced in this unit?
 
-[👉🏾👉🏾👉🏾 your answer here]
+Finalizing details across all members can be challenging but we will hopefully implement a better system going forward.
 
 ### 3. What additional support will you need in upcoming units as you continue to work on your final project?
 
-[👉🏾👉🏾👉🏾 your answer here]
+General guidance on keeping the team coordinated and on track as we move into the more technical milestones.
diff --git a/milestones/milestone2.md b/milestones/milestone2.md
@@ -6,24 +6,24 @@ This document should be completed and submitted during **Unit 6** of this course
 
 This unit, be sure to complete all tasks listed below. To complete a task, place an `x` between the brackets.
 
-- [ ] In `planning/wireframes.md`: add wireframes for at least three pages in your web app.
-  - [ ] Include a list of pages in your app
-- [ ] In `planning/entity_relationship_diagram.md`: add the entity relationship diagram you developed for your database.
-  - [ ] Your entity relationship diagram should include the tables in your database.
-- [ ] Prepare your three-minute pitch presentation, to be presented during Unit 7 (the next unit).
-  - [ ] You do **not** need to submit any materials in advance of your pitch.
-- [ ] In this document, complete all three questions in the **Reflection** section below
+- [x] In `planning/wireframes.md`: add wireframes for at least three pages in your web app.
+  - [x] Include a list of pages in your app
+- [x] In `planning/entity_relationship_diagram.md`: add the entity relationship diagram you developed for your database.
+  - [x] Your entity relationship diagram should include the tables in your database.
+- [x] Prepare your three-minute pitch presentation, to be presented during Unit 7 (the next unit).
+  - [x] You do **not** need to submit any materials in advance of your pitch.
+- [x] In this document, complete all three questions in the **Reflection** section below
 
 ## Reflection
 
 ### 1. What went well during this unit?
 
-[👉🏾👉🏾👉🏾 your answer here]
+Our team successesfuly collaborated and made decisions as a group.
 
 ### 2. What were some challenges your group faced in this unit?
 
-[👉🏾👉🏾👉🏾 your answer here]
+It can be difficult to find a time where everyone is available.
 
 ### 3. What additional support will you need in upcoming units as you continue to work on your final project?
 
-[👉🏾👉🏾👉🏾 your answer here]
+Delegating the coding portion between all group members moving forward.
diff --git a/planning/entity_relationship_diagram.md b/planning/entity_relationship_diagram.md
@@ -4,14 +4,16 @@ Reference the Creating an Entity Relationship Diagram final project guide in the
 
 ## Create the List of Tables
 
-[👉🏾👉🏾👉🏾 List each table in your diagram]
+1. users
+2. artists
+3. admin
+4. profile
+5. follows
+6. concerts
+7. merch
+8. albums
+9. purchases
 
 ## Add the Entity Relationship Diagram
 
-[👉🏾👉🏾👉🏾 Include an image or images of the diagram below. You may also wish to use the following markdown syntax to outline each table, as per your preference.]
-
-| Column Name | Type | Description |
-|-------------|------|-------------|
-| id | integer | primary key |
-| name | text | name of the shoe model |
-| ... | ... | ... |
+![sona erd](https://i.imgur.com/jX0Vh5t.png)
diff --git a/planning/user_stories.md b/planning/user_stories.md
@@ -4,10 +4,25 @@ Reference the Writing User Stories final project guide in the course portal for
 
 ## Outline User Roles
 
-[👉🏾👉🏾👉🏾 Include at least at least 1, but no more than 3, user roles.]
+- Fan
+- Artist Admin
 
 ## Draft User Stories
 
-[👉🏾👉🏾👉🏾 Include at least at least 10 user stories in this format:]
+Include at least at least 10 user stories in this format:
 
-1. As a [user role], I want to [what], so that [why].
+_As a [user role], I want to [what], so that [why]._
+
+1. As a Fan, I want to create an account and log in, so that I can save my preferences and see order history.
+2. As a Fan, I want to browse a list of artists, so that I can discover new music.
+3. As a Fan, I want to view an individual artist's profile page, so that I can see their bio, socials, and Spotify link.
+4. As a Fan, I want to follow an artist, so that I get updates when they release new merch or announce shows.
+5. As a Fan, I want to unfollow an artist, so that I can curate who I see updates from.
+6. As a Fan, I want to browse merch filtered by artist or format, so that I can find what I want quickly.
+7. As a Fan, I want to add items to a cart and place an order, so that I can purchase merch.
+8. As a Fan, I want to view my order history, so that I can track past purchases.
+9. As a Fan, I want to see upcoming concerts for an artist I follow, filtered by city, so that I can find shows near me.
+10. As a Fan, I want to see a quick-view panel when I click an artist, so that I can preview their info without leaving the page.
+11. As an Artist Admin, I want to create/edit my artist profile, so that fans have accurate bio and social info.
+12. As an Artist Admin, I want to add new merch items to my store, so that fans can purchase them.
+13. As an Artist Admin, I want to post upcoming concert dates, so that fans know where to see me live.
diff --git a/planning/wireframes.md b/planning/wireframes.md
@@ -4,18 +4,38 @@ Reference the Creating an Entity Relationship Diagram final project guide in the
 
 ## List of Pages
 
-[👉🏾👉🏾👉🏾 List the pages you expect to have in your app, with a ⭐ next to pages you have wireframed]
+- Login
+- Edit User
+- Edit Artist_User
+- Artist Directory ⭐
+- Artist Directory Side-Panel ⭐
+- Artist Detailed ⭐
+- Merch Shop ⭐
+- User's Profile > Following ⭐
+- User's Profile > Order History ⭐
+- Checkout Cart
+- Error Default
 
-## Wireframe 1: [page title]
+## Wireframe 1: Artist Directory
 
-[👉🏾👉🏾👉🏾 include wireframe 1]
+![artist directory](https://i.imgur.com/EeJvvYD.png)
 
-## Wireframe 2: [page title]
+## Wireframe 2: Artist Directory Side-Panel
 
-[👉🏾👉🏾👉🏾 include wireframe 2]
+![Artist Directory but with a side-view panel](https://i.imgur.com/ZjfTBHA.png)
 
-## Wireframe 3: [page title]
+## Wireframe 3: Artist Detailed
 
-[👉🏾👉🏾👉🏾 include wireframe 3]
+![Artist Detailed Page](https://i.imgur.com/3iKhYRY.png)
 
-[👉🏾👉🏾👉🏾 include more wireframes as desired]
+## Wireframe 4: Merch Shop
+
+![Merch Shop Page](https://i.imgur.com/tjC6Gx6.png)
+
+## Wireframe 5: User's Profile > Following Tab
+
+![User's Profile Following Tab](https://i.imgur.com/DCR2sVQ.png)
+
+## Wireframe 6: User's Profile > Order History Tab
+
+![User's Profile Order History Tab](https://i.imgur.com/dDn9gBX.png)
diff --git a/sona-app/client/.gitignore b/sona-app/client/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/sona-app/client/.oxlintrc.json b/sona-app/client/.oxlintrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
diff --git a/sona-app/client/README.md b/sona-app/client/README.md
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the Oxlint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and Oxlint's TypeScript related rules in your project.
diff --git a/sona-app/client/index.html b/sona-app/client/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>client</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>