Tech Stack

NextJS + AuthJS

SSR and Server Side Actions with Form & AuthJS Authentication API

React + Tailwind

Component-based UI with Tailwind scoped styling

TanStack Query

Client Side State management and caching

Supabase

Row Level Security with PostgresSQL and S3 Buckets for audio files and

Project Journey

A Fun and Challenging Development Experience

At first, my goal was to create a complex replica of Spotify where users would log in with their Spotify accounts, access their playlists, and generate music using AI. The idea sparked after a club meeting where a guest speaker from Amazon introduced us to Amazon Bedrock. Motivated, I started building right away, but I quickly realized that the AWS ecosystem was too complex to navigate within my timeframe. After some research, I pivoted to using Hugging Face’s API instead. Facebook provides three versions of their MusicGen model—small, medium, and large. I chose the small one for simplicity and to avoid any extra costs.

Code Highlights

1 2"use server"; 3 4import { auth, signIn, signOut } from "./auth"; 5 6export async function signInWithGoogleAction() { 7 await signIn("google", { redirectTo: "/studio" }); 8} 9 10export async function signInWithSpotifyAction() { 11 await signIn("spotify", { redirectTo: "/studio" }); 12} 13 14export async function signInWithGithubAction() { 15 await signIn("github", { redirectTo: "/studio" }); 16} 17 18export async function signOutAction() { 19 await signOut({ redirectTo: "/" }); 20} 21