Sona

CodePath WEB103 Final Project

Designed and developed by:

• Chau Cao
• Abdul Khan
• Dev Goswami
• Gustave Ntwali
• Carolina Herrera
• Armin Erika Polanco

🔗 Sona - Live App

About

Description and Purpose

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

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: React (Vite), React Router
• Backend: Express, Node.js, PostgreSQL
• Auth: Passport.js, GitHub OAuth
• Image Storage: Cloudinary
• Music Data: Ticketmaster Discovery API, Spotify Web API
• Deployment: Render

Features

✅ Artist Directory

• Browse all artists with genre, bio, and profile image. Search bar w/ Filter by genre.

• 

✅ Follow Artists

• Users can follow/unfollow artists to build a personalized list of who they're keeping up with, with an optional "notify me" toggle.

• 

✅ Artist Posts

• Artist can post updates like new merch drops, show announcements, news, etc. that are visible to their followers, directly on their artist page.

• 

✅ Artist Quick-View Panel

• Slide-out modal showing artist details and discography without navigating away from the current page.

• 

✅ Merch Shop with Filtering

• Browse merch (vinyl, CD, apparel) filtered by artist, genre, or format, with sort by price.

• 

✅ Merch Management (Artist side)

• Artist can create, edit, and delete their own merch directly from their artist page.

• 

✅ Order System

• Add merch to a cart, adjust quantities (capped at available stock), and place an order. View full order history.

• 

✅ Concert Listings

• View upcoming shows per artist and on a dedicated Concerts page, filterable by city and searchable by artist. Combines real event data from the Ticketmaster API with artist-added shows.

• 

• 

✅ Following Feed

• A personalized feed combining posts, upcoming shows, and merch drops from every artist a fan follows, sorted by most recent.

• 

✅ GitHub OAuth Login

• Users sign in with their real GitHub account, replacing the placeholder login used in earlier milestones. Every backend route now verifies the logged-in session rather than trusting client-provided data.

• 

✅ Fan / Artist Onboarding

• New users choose to join as a Fan or an Artist. Choosing Artist creates a new artist page, profile, and admin ownership link all at once, and the user is taken directly to their new artist page.

• 

✅ Cloud Image Upload

• Users can upload real image files (instead of pasting a URL) when creating or editing merch, powered by Cloudinary.

• 

✅ Spotify Artist Embeds

• Artists can add their own Spotify link, which renders as a real, playable embedded player on their profile and Quick View panel.

-

Coming Next

(Stretch) Spotify Fan Account Connect

• Link a Spotify account to import playlists and generate personalized recommendations.

(Stretch) Sona Mix

• Auto-generate a custom playlist from the artists you follow, featured right on your profile.

(Stretch) Real Payment Integration

• Real checkout system built on top of the existing order system.

Installation Instructions

1.) Clone the repo and navigate into it:

   git clone <repo-url>
   cd web103_finalproject/sona-app

2.) Install dependencies for both the client and server:

   cd client && npm install
   cd ../server && npm install

3.) Create a PostgreSQL database (locally or with a hosted provider like Render or ElephantSQL).

4.) Set up environment variables:

• In server/.env, add:

   PGUSER=your_postgres_username
   PGHOST=your_postgres_host
   PGDATABASE=your_database_name
   PGPASSWORD=your_postgres_password
   PGPORT=5432
   GITHUB_CLIENT_ID=your_github_oauth_client_id
   GITHUB_CLIENT_SECRET=your_github_oauth_client_secret
   TICKETMASTER_API_KEY=your_ticketmaster_api_key
   SPOTIFY_CLIENT_ID=your_spotify_client_id
   SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
   SPOTIFY_REDIRECT_URI=http://127.0.0.1:3001/api/spotify/callback
   SESSION_SECRET=any_random_string
   SERVER_URL=http://localhost:3001
   CLIENT_URL=http://localhost:5173

• In client/.env, add:

   VITE_API_URL=http://localhost:3001
   VITE_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
   VITE_CLOUDINARY_UPLOAD_PRESET=your_cloudinary_unsigned_upload_preset

• To get these credentials:

  • GitHub OAuth: register a new OAuth App at github.com/settings/developers. Set the Homepage URL to http://localhost:5173 and the Authorization callback URL to http://localhost:3001/auth/github/callback.

  • Ticketmaster API key: register at developer.ticketmaster.com.

  • Spotify: register a new app at developer.spotify.com/dashboard. Add http://127.0.0.1:3001/api/spotify/callback as a Redirect URI, and select the Web API.

  • Cloudinary: create a free account at cloudinary.com, then create an unsigned upload preset under Settings → Upload.

    5.) Reset and seed the database:

   cd server
   npm run reset-db

6.) Run the app locally (two terminals):

   # Terminal 1 — server
   cd server
   npm run dev

   # Terminal 2 — client
   cd client
   npm run dev

• The app will be available at http://localhost:5173.