SpinStack 🎵

SpinStack is a mobile-first social music diary for sharing the exact moments in songs that move you — that bar at 0:57, the beat drop at 1:27, the lyric you can’t forget. Create shareable Stacks (vinyl-style collections) with timestamped highlights, notes, emojis, and reactions. A TikTok-like Moment Feed lets friends swipe through your exact snippets with your visuals on top.

MVP 🛠️

• Auth: Sign up / Sign in; protected routes.
• Stacks & Vinyl UI: Create stacks, add tracks, set cover/name, reorder.
• Timestamped Moments: Choose 10–30s snippet windows anywhere in the track; add note/emoji and optional background visual.
• Moment Feed (TikTok-like): Vertical, full-screen cards; autoplay the chosen snippet; foreground UI with GIF/album art + spinning vinyl overlay.
• Reactions & Comments: React to specific moments; threaded comments under a moment.
• Follow & Shelves: Follow friends; view their stacks.
• Search (Cross-Provider): One search that merges Spotify and Apple Music results via ISRC, de-duping duplicates; fast typeahead.
• Playback (Ad‑Free, Policy‑Compliant):
  • Exact interval playback for Spotify Premium (App Remote) and Apple Music subscribers (MusicKit) — seek to the moment’s start and pause at end.

Important: No YouTube/SoundCloud playback in MVP to guarantee no ads and consistent timestamp control.

Tech Stack & Resources 💻

Details

Comprehensive Full-Stack Tutorials

• Build a Full Stack React Native App with Payments | PostgreSQL, TypeScript, Stripe, Tailwind
• MERN Stack React Native Project: Build a Bookstore App With React Native and Node.js

Frontend

• React Native (TypeScript), Expo, React Navigation
• Styling: Custom components, NativeWind
• State/data: React Query, React Hook Form + Zod
• Media/UI: Reanimated, Lottie (vinyl), expo-blur, expo-image, expo-av (for provider previews & short MP4 loops)
• Secure storage: Expo SecureStore, AsyncStorage
• Design: Figma

Helpful links:

• What is React?
• React Native #1: Setup Visual Studio Code
• Setting up the Environment
• React Native: Getting Started
• Learn the Basics
• React Native Tutorial for Beginners
• React Native Tutorial for Beginners - Getting Started
• Expo Documentation
• React Navigation: Getting Started
• NativeWind (Expo Quick Start)
• React Hook Form: Get Started
• Zod Documentation
• Expo SecureStore (Secure Token Storage)
• Figma Help Center
• Designing in Figma (Crash Course)
• Figma Tutorial for Beginners
• Learn Figma in 2025 | Mobile app design in Figma: a step-by-step guide for beginners
• FULL UI Design Mobile Apps Course

Backend

• Node.js + Fastify (TypeScript), Prisma ORM
• Postgres w/ Supabase
• Auth: Supabase Auth
• Caching: Redis for search/typeahead results
• API testing: Postman

Helpful links:

• Fastify Documentation
• Prisma Documentation
• PostgreSQL Docs
• Supabase Docs
• Use Supabase Auth with React Native
• React Native Database & User Authentication
• Redis Docs
• Postman Learning Center
• Build a RESTful API with Fastify, Prisma & TypeScript

Third-Party Integrations / APIs

• Spotify (Premium for exact seek): App Remote SDK
• Apple Music (subscriber): MusicKit
• Search: Spotify Web API + Apple Music Catalog

Dev Tools/Software

• Git
• VS Code
• Node.js
• Postman

Timeline & Milestones 🗓️

Weeks 1–2: onboarding, design, schema/API kick‑off
End of Week 8: entire MVP functional & demoable
Weeks 9–10: polish + presentation practice

Week	Overall	Frontend Tasks	Backend Tasks
Week 1	Decide roles (FE/BE/Integrations/QA) Set up communication, repos, CI, and issue board Set up development environments (frontend & backend)	Begin UI/UX exploration Initialize RN + Expo project, navigation, and theme Review RN + NativeWind basics	Initialize Fastify + Prisma + Postgres Sketch initial ERD and API surface Review Spotify/Apple provider docs & auth flows
Week 2	Get familiar with core tech stack Finalize database schema (freeze by end of week) Figma design complete by end of week Start API contract (basic routes agreed)	Flesh out app vision & flows Build core components (cards, lists, forms) Wire screen shells to mock data	Run initial migrations & seed data Stand up basic endpoints (health, auth hooks, lists) Search foundation (Spotify/Apple queries; ISRC merge plan)
Week 3/4	Build out MVP flows end-to-end (first pass) Agree on error/loading patterns	Finish UI/UX details (by end of Week 3) Implement Auth screens & basic stack flows Implement Moment editor UI (select 10–30s, notes/emojis) Set up routing/state patterns	CRUD for users/stacks/tracks Search aggregator (Spotify + Apple) with ISRC de-dupe Moments APIs (create/list) with validation
Week 5/6	Integrate core features; test across iOS/Android Define acceptance checks for MVP features	Moment feed (vertical swipe, preloading) Editor preview hooked to provider playback Reactions/comments UI; follow & profile basics	Track–provider mapping & capabilities Reactions/comments endpoints; follow graph & feed queries Search polish (paging, fuzzy match when no ISRC)
Week 7/8	Finish integration and stabilize Entire MVP working by end of Week 8 Begin presentation outline/script	Provider integration parity & UX polish Animations, accessibility, empty/error states Small fixes and quality pass Just QoL things and help backend FINISH EVERYTHING.	Security & rate limits; logs/health checks Indexes & performance checks Deploy and verify environments FINISH EVERYTHING.
Week 9	No new features; presentation prep & rehearsals Fix any bugs and implement any performance fixes	UI refinement; cross-device testing	Monitoring & performance tuning
Week 10	Practice, polish, and finalize!!! Live and breathe the slides and presentation

Stretch Goals 🚀

• Blends (co‑curated stacks)
• Voice Reactions
• Shelf Themes
• Emotion/Mood Insights
• Ambient Visualizer Mode
• Moment Lockers
• AI Mood Sorting & Recs
• Fallback preview option for non-subscribers (30-second non-customizable preview)

Roadblocks & Solutions 🚧 💡

• Provider limitations / subscriptions

  • Exact seek requires Spotify Premium or Apple Music subscriber.
  • Solution: Gate exact snippets; provide preview fallback; clear UI copy.

• Apple Music Developer Token

  • Needs Apple Developer account.
  • Solution: Set up in Week 1–2; automate token generation; store securely.

• Schema churn

  • Late changes break work.
  • Solution: Freeze schema by Week 2; only additive changes later.

• Mobile media quirks / latency

  • Solution: Keep prev/current/next mounted; pre‑seek next; first‑tap to enable audio.

• Region/availability mismatches

  • Solution: Map both providers by ISRC; pick the best available source per viewer; show preview/deep link if neither plays.

Competition 🥊

• Spotify/YouTube playlists — audio only, no timestamped emotion
• Last.fm — tracks plays, not memories
• Songwhip/Odesli — link sharing, no social memory context
• Instagram Notes - no storage/permanence
• Airbuds - no timestamped emotion, no personalized groupings
• Smule/Reels Karaoke — performance‑focused, not listener moments
• SoundCloud — timestamped comments exist, but public & creator‑centric

Git Cheatsheet 📓

Command	What it does
git init	Initalize a new Git repo
git clone "rep-url"	Clone a repo from a URL
git status	Show changes status
git add "file"	Add changes to staging, use "." for all
git commit -m "Descriptive Message"	Commit changes with a message
git push	Upload local repo content to a remote repo
git log	View commit history
git branch	Lists all the branches
git branch "branch-name"	Create a new branch
git checkout "branch-name"	Switch to a branch
git checkout -b "branch-name"	Combines the previous 2 commands
git merge "branch-name"	Merge changes from a branch
git branch -d "branch-name"	Delete a branch
git push origin "branch-name"	Push to branch
git pull origin "branch-name"	Pull updates from a specific branch
git pull	Fetch and merge changes
git fetch	Fetch changes without merging
git reset --hard HEAD	Discard changes
git revert	Revert changes in a commit

SpinStack TEAM!!!! 🎶🫂

• Yugank Mishra

• Bradley Nguyen

• Haden Hicks

• Braxton Riggs

• Mohammad Mehrab - Project Manager

• Bryce Duncan - Industry Mentor

•