Next Cherry Music

Built with the Next.js App Router, TypeScript, Tailwind & Supabase.

Game Plan

• Basic setup
• Auth
• Social Login
• Login with magic link
• Music Top Chart
• Modern Data Caching
• Create and Add user playlist
• Create and vote for comments
• Vote for music
• Search bar
• Dark Mode
• Responsive Design
  • Shrink nav bar when md, sm window
• Framer Motion
  • Carousel
  • Nav shifting animation
• Infinite scrolling for dynamically loading
• Profile uploads (Avatar, nickname..)
• User's Playlist Upload
• Hashtag
• Friends online
• State management using Recoil
• Edit account settings
• Loading - skeleton
• Data Caching - minimize api call
• Music player
• beautiful dnd - drag cards to move position
• Error handling using Next13 app router
• useLayoutEffect to prevent flickering
• [] CDN
• Deploy

Folder Tree

├─ src
│  ├─ animations
│  ├─ app
│  │  ├─ layout.tsx
│  │  ├─ (site)
│  │  │  ├─ error.tsx
│  │  │  ├─ loading.tsx
│  │  │  └─ page.tsx
│  │  ├─ api
│  │  │  ├─ auth
│  │  │  ├─ cherryMusic
│  │  │  │  └─ track
│  │  │  ├─ cron
│  │  │  ├─ lastFm
│  │  │  ├─ spotify
│  │  ├─ artist
│  │  ├─ chart
│  │  ├─ geo
│  │  ├─ global-error.tsx
│  │  ├─ hashtag
│  │  └─ login.tsx
│  ├─ atoms.ts
│  ├─ components
│  ├─ hooks
│  ├─ lib
│  ├─ providers
│  ├─ styles
│  └─ types