├── bun.lockb ├── app ├── favicon.ico ├── albums │ └── [slug] │ │ └── page.tsx ├── playlists │ └── [slug] │ │ └── page.tsx ├── globals.css ├── page.tsx ├── layout.tsx ├── search │ └── page.tsx ├── library │ └── page.tsx ├── liked │ └── page.tsx ├── actions.ts └── not-found.tsx ├── postcss.config.mjs ├── public ├── vercel.svg ├── window.svg ├── file.svg ├── globe.svg └── next.svg ├── next.config.ts ├── lib ├── cosmic.ts └── PlayerContext.tsx ├── eslint.config.mjs ├── .gitignore ├── tsconfig.json ├── package.json ├── types └── index.ts ├── components ├── AlbumCard.tsx ├── Footer.tsx ├── MusicLibrary.tsx ├── Loading.tsx ├── TrackList.tsx ├── AlbumDetail.tsx ├── PlaylistClient.tsx ├── MusicPlayer.tsx └── Navigation.tsx ├── README.md ├── scripts └── seed-cosmic.ts └── article.md /bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/cosmic-spotify-clone/main/bun.lockb -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/cosmic-spotify-clone/main/app/favicon.ico -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /lib/cosmic.ts: -------------------------------------------------------------------------------- 1 | import { createBucketClient } from "@cosmicjs/sdk"; 2 | 3 | const cosmic = createBucketClient({ 4 | bucketSlug: process.env.COSMIC_BUCKET_SLUG as string, 5 | readKey: process.env.COSMIC_READ_KEY as string, 6 | }); 7 | 8 | export default cosmic; 9 | -------------------------------------------------------------------------------- /app/albums/[slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import AlbumDetail from "@/components/AlbumDetail"; 2 | 3 | interface AlbumPageProps { 4 | params: Promise<{ 5 | slug: string; 6 | }>; 7 | } 8 | 9 | export default async function AlbumPage({ params }: AlbumPageProps) { 10 | const { slug } = await params; 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /app/playlists/[slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import PlaylistClient from "@/components/PlaylistClient"; 2 | 3 | interface PlaylistPageProps { 4 | params: Promise<{ 5 | slug: string; 6 | }>; 7 | } 8 | 9 | export default async function PlaylistPage({ params }: PlaylistPageProps) { 10 | const { slug } = await params; 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | :root { 4 | --background: #ffffff; 5 | --foreground: #171717; 6 | } 7 | 8 | @theme inline { 9 | --color-background: var(--background); 10 | --color-foreground: var(--foreground); 11 | --font-sans: var(--font-geist-sans); 12 | --font-mono: var(--font-geist-mono); 13 | } 14 | 15 | @media (prefers-color-scheme: dark) { 16 | :root { 17 | --background: #0a0a0a; 18 | --foreground: #ededed; 19 | } 20 | } 21 | 22 | body { 23 | background: var(--background); 24 | color: var(--foreground); 25 | font-family: Arial, Helvetica, sans-serif; 26 | } 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import MusicLibrary from "@/components/MusicLibrary"; 2 | 3 | export default function Home() { 4 | return ( 5 |

6 |

Welcome to Spotify Clone

7 |

8 | Powered by{" "} 9 | 15 | Cosmic 16 | 17 |

18 | 19 |

20 |

Browse Albums

21 | 22 |

23 |

24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spotify-clone", 3 | "version": "0.1.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "next dev --turbopack", 8 | "build": "next build", 9 | "start": "next start", 10 | "lint": "next lint" 11 | }, 12 | "dependencies": { 13 | "@cosmicjs/sdk": "^1.4.0", 14 | "next": "15.2.3", 15 | "react": "^19.0.0", 16 | "react-audio-player": "^0.17.0", 17 | "react-dom": "^19.0.0" 18 | }, 19 | "devDependencies": { 20 | "@eslint/eslintrc": "^3", 21 | "@tailwindcss/postcss": "^4", 22 | "@types/node": "^20", 23 | "@types/react": "^19", 24 | "@types/react-dom": "^19", 25 | "eslint": "^9", 26 | "eslint-config-next": "15.2.3", 27 | "tailwindcss": "^4", 28 | "ts-node": "^10.9.2", 29 | "typescript": "^5" 30 | } 31 | } -------------------------------------------------------------------------------- /types/index.ts: -------------------------------------------------------------------------------- 1 | export interface Track { 2 | id: string; 3 | title: string; 4 | metadata: { 5 | audio: { 6 | url: string; 7 | }; 8 | duration: number; 9 | album: { 10 | metadata: { 11 | cover: { 12 | imgix_url: string; 13 | }; 14 | artist: { 15 | title: string; 16 | }; 17 | }; 18 | }; 19 | }; 20 | } 21 | 22 | export interface Album { 23 | id: string; 24 | slug: string; 25 | title: string; 26 | metadata: { 27 | cover: { 28 | imgix_url: string; 29 | }; 30 | artist: { 31 | title: string; 32 | }; 33 | }; 34 | } 35 | 36 | export interface Playlist { 37 | id: string; 38 | slug: string; 39 | title: string; 40 | metadata: { 41 | description: string; 42 | cover: { 43 | imgix_url: string; 44 | }; 45 | tracks: Track[]; 46 | }; 47 | } 48 | -------------------------------------------------------------------------------- /public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/AlbumCard.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { Album } from "@/types"; 3 | 4 | interface AlbumCardProps { 5 | album: Album; 6 | } 7 | 8 | export default function AlbumCard({ album }: AlbumCardProps) { 9 | return ( 10 | 11 |

12 |

19 |

20 | {album.title} 21 |

22 |

23 | {album.metadata.artist?.title || "Unknown artist"} 24 |

25 |

26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Inter } from "next/font/google"; 3 | import "./globals.css"; 4 | import { PlayerProvider } from "@/lib/PlayerContext"; 5 | import Navigation from "@/components/Navigation"; 6 | import Footer from "@/components/Footer"; 7 | 8 | const inter = Inter({ subsets: ["latin"] }); 9 | 10 | export const metadata: Metadata = { 11 | title: "Spotify Clone - Built with Cosmic CMS", 12 | description: "A demo app showing what's possible with Cosmic CMS", 13 | openGraph: { 14 | images: [ 15 | { 16 | url: "https://imgix.cosmicjs.com/2797d440-05d5-11f0-993b-3bd041905fff-quantum.jpg", 17 | width: 1200, 18 | height: 630, 19 | alt: "Spotify Clone Preview", 20 | }, 21 | ], 22 | }, 23 | }; 24 | 25 | export default function RootLayout({ 26 | children, 27 | }: { 28 | children: React.ReactNode; 29 | }) { 30 | return ( 31 | 32 | 33 | 34 | 35 |

36 |

{children}

37 |

38 |

39 | 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /components/Footer.tsx: -------------------------------------------------------------------------------- 1 | export default function Footer() { 2 | return ( 3 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/MusicLibrary.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState, useEffect } from "react"; 4 | import AlbumCard from "./AlbumCard"; 5 | import { Album } from "@/types"; 6 | import { getAlbums } from "@/app/actions"; 7 | 8 | export default function MusicLibrary() { 9 | const [albums, setAlbums] = useState([]); 10 | const [loading, setLoading] = useState(true); 11 | 12 | useEffect(() => { 13 | async function fetchAlbums() { 14 | try { 15 | const albumsData = await getAlbums(); 16 | setAlbums(albumsData); 17 | } catch (error) { 18 | console.error("Error fetching albums:", error); 19 | } finally { 20 | setLoading(false); 21 | } 22 | } 23 | 24 | fetchAlbums(); 25 | }, []); 26 | 27 | if (loading) { 28 | return ( 29 |

30 | {[...Array(8)].map((_, i) => ( 31 |

32 |

33 |

34 |

35 |

36 | ))} 37 |

38 | ); 39 | } 40 | 41 | return ( 42 |

43 | {albums.map((album) => ( 44 | 45 | ))} 46 |

47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /app/search/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | export default function Search() { 4 | return ( 5 |

6 |

7 | Search 8 |

9 |

10 | This is a demo app showing what's possible with Cosmic CMS. 11 |

12 |

13 | 17 | Return Home 18 | 19 |

20 | 26 | Visit Cosmic 27 | 28 | • 29 | 35 | View on GitHub 36 | 37 |

38 |

39 |

40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /app/library/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | export default function Library() { 4 | return ( 5 |

6 |

7 | Your Library 8 |

9 |

10 | This is a demo app showing what's possible with Cosmic CMS. 11 |

12 |

13 | 17 | Return Home 18 | 19 |

20 | 26 | Visit Cosmic 27 | 28 | • 29 | 35 | View on GitHub 36 | 37 |

38 |

39 |

40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /app/liked/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | export default function LikedSongs() { 4 | return ( 5 |

6 |

7 | Liked Songs 8 |

9 |

10 | This is a demo app showing what's possible with Cosmic CMS. 11 |

12 |

13 | 17 | Return Home 18 | 19 |

20 | 26 | Visit Cosmic 27 | 28 | • 29 | 35 | View on GitHub 36 | 37 |

38 |

39 |

40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /components/Loading.tsx: -------------------------------------------------------------------------------- 1 | export default function Loading() { 2 | return ( 3 |

4 | {/* Header Skeleton */} 5 |

6 | 7 | {/* Section Title Skeleton */} 8 |

9 | 10 | {/* Grid Skeleton */} 11 |

12 | {[...Array(10)].map((_, i) => ( 13 |

14 |

15 |

16 |

17 |

18 | ))} 19 |

20 | 21 | {/* Section Title Skeleton */} 22 |

23 | 24 | {/* List Skeleton */} 25 |

26 | {[...Array(5)].map((_, i) => ( 27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 | ))} 35 |

36 |

37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /app/actions.ts: -------------------------------------------------------------------------------- 1 | "use server"; 2 | 3 | import cosmic from "@/lib/cosmic"; 4 | import { Album, Track, Playlist } from "@/types"; 5 | 6 | export async function getAlbums() { 7 | const { objects } = await cosmic.objects 8 | .find({ 9 | type: "albums", 10 | }) 11 | .props(["id", "title", "slug", "metadata.cover", "metadata.artist"]) 12 | .depth(1); 13 | 14 | return objects as Album[]; 15 | } 16 | 17 | export async function getPlaylists() { 18 | const { objects } = await cosmic.objects 19 | .find({ 20 | type: "playlists", 21 | }) 22 | .props(["id", "title", "slug", "metadata.cover", "metadata.description"]) 23 | .depth(1); 24 | 25 | return objects as Playlist[]; 26 | } 27 | 28 | export async function getAlbum(slug: string) { 29 | const { object: albumData } = await cosmic.objects 30 | .findOne({ 31 | type: "albums", 32 | slug, 33 | }) 34 | .props(["id", "title", "metadata"]) 35 | .depth(1); 36 | 37 | const { objects: trackData } = await cosmic.objects 38 | .find({ 39 | type: "tracks", 40 | "metadata.album": albumData.id, 41 | }) 42 | .props(["id", "title", "metadata"]) 43 | .depth(1); 44 | 45 | return { 46 | album: albumData as Album, 47 | tracks: trackData as Track[], 48 | }; 49 | } 50 | 51 | export async function getPlaylist(slug: string) { 52 | const { object: playlistData } = await cosmic.objects 53 | .findOne({ 54 | type: "playlists", 55 | slug, 56 | }) 57 | .props([ 58 | "title", 59 | "metadata.description", 60 | "metadata.cover", 61 | "metadata.tracks", 62 | ]) 63 | .depth(2); 64 | 65 | return playlistData as Playlist; 66 | } 67 | -------------------------------------------------------------------------------- /app/not-found.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | export default function NotFound() { 4 | return ( 5 |

6 |

7 |

404

8 |

Page Not Found

9 |

10 | This is a demo app showing what's possible with Cosmic CMS. The 11 | page you're looking for doesn't exist in this demo. 12 |

13 |

14 | 18 | Return Home 19 | 20 |

21 | 27 | Built with Cosmic 28 | 29 | • 30 | 36 | View on GitHub 37 | 38 |

39 |

40 |

41 |

42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /lib/PlayerContext.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { 4 | createContext, 5 | useContext, 6 | useState, 7 | ReactNode, 8 | useEffect, 9 | } from "react"; 10 | import MusicPlayer from "@/components/MusicPlayer"; 11 | import { Track } from "@/types"; 12 | 13 | interface PlayerContextType { 14 | currentTrack: Track | null; 15 | isPlaying: boolean; 16 | togglePlayPause: (track: Track) => void; 17 | } 18 | 19 | interface WindowWithPlayer extends Window { 20 | pauseCurrentTrack?: () => void; 21 | playCurrentTrack?: () => void; 22 | } 23 | 24 | const PlayerContext = createContext(undefined); 25 | 26 | export function PlayerProvider({ children }: { children: ReactNode }) { 27 | const [currentTrack, setCurrentTrack] = useState(null); 28 | const [isPlaying, setIsPlaying] = useState(false); 29 | 30 | // Persist player state in localStorage 31 | useEffect(() => { 32 | const savedTrack = localStorage.getItem("currentTrack"); 33 | const savedIsPlaying = localStorage.getItem("isPlaying"); 34 | 35 | if (savedTrack) { 36 | setCurrentTrack(JSON.parse(savedTrack)); 37 | setIsPlaying(savedIsPlaying === "true"); 38 | } 39 | }, []); 40 | 41 | // Save player state to localStorage when it changes 42 | useEffect(() => { 43 | if (currentTrack) { 44 | localStorage.setItem("currentTrack", JSON.stringify(currentTrack)); 45 | localStorage.setItem("isPlaying", isPlaying.toString()); 46 | } 47 | }, [currentTrack, isPlaying]); 48 | 49 | const togglePlayPause = (track: Track) => { 50 | if (currentTrack?.id === track.id) { 51 | // If clicking the currently playing track, toggle play/pause 52 | if (isPlaying) { 53 | const pauseTrack = (window as WindowWithPlayer).pauseCurrentTrack; 54 | if (typeof window !== "undefined" && pauseTrack) { 55 | pauseTrack(); 56 | } 57 | } else { 58 | const playTrack = (window as WindowWithPlayer).playCurrentTrack; 59 | if (typeof window !== "undefined" && playTrack) { 60 | playTrack(); 61 | } 62 | } 63 | } else { 64 | // Otherwise, play the new track 65 | setCurrentTrack(track); 66 | setIsPlaying(true); 67 | // Add a small delay to ensure the track is set before trying to play 68 | setTimeout(() => { 69 | const playTrack = (window as WindowWithPlayer).playCurrentTrack; 70 | if (typeof window !== "undefined" && playTrack) { 71 | playTrack(); 72 | } 73 | }, 0); 74 | } 75 | }; 76 | 77 | return ( 78 | 85 | {children} 86 | {currentTrack && ( 87 | 88 | )} 89 | 90 | ); 91 | } 92 | 93 | export function usePlayer() { 94 | const context = useContext(PlayerContext); 95 | if (!context) { 96 | throw new Error("usePlayer must be used within a PlayerProvider"); 97 | } 98 | return context; 99 | } 100 | -------------------------------------------------------------------------------- /components/TrackList.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Track } from "@/types"; 4 | import { usePlayer } from "@/lib/PlayerContext"; 5 | 6 | interface TrackListProps { 7 | tracks: Track[]; 8 | } 9 | 10 | export default function TrackList({ tracks }: TrackListProps) { 11 | const { currentTrack, isPlaying, togglePlayPause } = usePlayer(); 12 | 13 | const formatDuration = (seconds: number) => { 14 | const minutes = Math.floor(seconds / 60); 15 | const remainingSeconds = Math.floor(seconds % 60); 16 | return `${minutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`; 17 | }; 18 | 19 | return ( 20 |

21 |

Tracks

22 |

23 | 24 | 25 | 26 | 29 | 32 | 35 | 36 | 37 | 38 | {tracks.map((track, index) => ( 39 | togglePlayPause(track)} 47 | > 48 | 51 | 73 | 76 | 77 | ))} 78 | 79 |

27 \| # 28 \|	30 \| Title 31 \|	33 \| Duration 34 \|
49 \| {index + 1} 50 \|	52 \| 53 \| 54 \| {currentTrack?.id === track.id ? ( 55 \| 66 \| ) : null} 67 \| 68 \| 69 \| {track.title} 70 \| 71 \| 72 \|	74 \| {formatDuration(track.metadata.duration)} 75 \|

80 |

81 |

82 | ); 83 | } 84 | -------------------------------------------------------------------------------- /components/AlbumDetail.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState, useEffect } from "react"; 4 | import TrackList from "./TrackList"; 5 | import { Album, Track } from "@/types"; 6 | import { getAlbum } from "@/app/actions"; 7 | 8 | interface AlbumDetailProps { 9 | slug: string; 10 | } 11 | 12 | export default function AlbumDetail({ slug }: AlbumDetailProps) { 13 | const [album, setAlbum] = useState(null); 14 | const [tracks, setTracks] = useState([]); 15 | const [loading, setLoading] = useState(true); 16 | 17 | useEffect(() => { 18 | if (!slug) return; 19 | 20 | async function fetchAlbumData() { 21 | try { 22 | setLoading(true); 23 | const { album: albumData, tracks: trackData } = await getAlbum(slug); 24 | setAlbum(albumData); 25 | setTracks(trackData); 26 | } catch (error) { 27 | console.error("Error fetching album data:", error); 28 | } finally { 29 | setLoading(false); 30 | } 31 | } 32 | 33 | fetchAlbumData(); 34 | }, [slug]); 35 | 36 | if (loading) { 37 | return ( 38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 | {[...Array(10)].map((_, i) => ( 48 |

52 |

53 |

54 |

55 |

56 |

57 |

58 |

59 | ))} 60 |

61 |

62 |

63 |

64 | ); 65 | } 66 | 67 | if (!album) return

Error loading album

; 68 | 69 | return ( 70 |

71 |

72 |

73 |

78 |

79 |

80 |

81 | {album.title} 82 |

83 |

84 | {album.metadata.artist.title} 85 |

86 | 87 |

88 |

89 |

90 | ); 91 | } 92 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Spotify Clone 2 | 3 | A Spotify-like music streaming application built with Next.js and [Cosmic](https://www.cosmicjs.com) CMS. 4 | 5 | [Live Demo](https://cosmic-spotify-clone.vercel.app) 6 | 7 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcosmicjs%2Fcosmic-spotify-clone&env=COSMIC_BUCKET_SLUG,COSMIC_READ_KEY,COSMIC_WRITE_KEY&envDescription=Required%20API%20keys%20from%20Cosmic&envLink=https%3A%2F%2Fwww.cosmicjs.com%2Fdocs%2Fapi%2Fauthentication) 8 | 9 | [![Spotify Clone Screenshot 2](https://imgix.cosmicjs.com/9d793800-05d7-11f0-993b-3bd041905fff-cosmic-spotify-2.png?w=1200&auto=format,compression)](https://cosmic-spotify-clone.vercel.app) 10 | 11 | [![Spotify Clone Screenshot 1](https://imgix.cosmicjs.com/9d6784c0-05d7-11f0-993b-3bd041905fff-cosmic-spotify-1.png?w=1200&auto=format,compression)](https://cosmic-spotify-clone.vercel.app) 12 | 13 | ## Features 14 | 15 | - Music library with artists, albums, and tracks 16 | - Playlist creation and management 17 | - A music player with playback controls 18 | - Responsive design for all devices 19 | 20 | ## Prerequisites 21 | 22 | - Node.js 18.x or later (if using npm) 23 | - Bun runtime (if using bun) 24 | - A Cosmic CMS account and bucket 25 | 26 | ## Getting Started 27 | 28 | 1. **Set up Cosmic:** 29 | 30 | - Sign up for a free account at [https://www.cosmicjs.com/signup](https://www.cosmicjs.com/signup) 31 | - After signing up, create a new project by clicking "Create Bucket" 32 | - Choose the "Empty Bucket" option and give your project a name 33 | - Once created, find your bucket credentials by going to Project Settings > API Access 34 | - Copy your bucket slug and API keys for the next steps 35 | 36 | 2. Clone the repository: 37 | 38 | ```bash 39 | git clone https://github.com/cosmicjs/cosmic-spotify-clone 40 | cd spotify-clone 41 | ``` 42 | 43 | 3. Install dependencies: 44 | 45 | Using bun (recommended): 46 | 47 | ```bash 48 | bun install 49 | ``` 50 | 51 | Using npm: 52 | 53 | ```bash 54 | npm install 55 | ``` 56 | 57 | 4. Create a `.env.local` file in the root directory with your Cosmic credentials: 58 | 59 | ```env 60 | COSMIC_BUCKET_SLUG=your-bucket-slug 61 | COSMIC_READ_KEY=your-read-key 62 | COSMIC_WRITE_KEY=your-write-key 63 | ``` 64 | 65 | 5. Set up the Cosmic object types by running the seed script: 66 | 67 | Using bun: 68 | 69 | ```bash 70 | bun scripts/seed-cosmic.ts 71 | ``` 72 | 73 | Using npm: 74 | 75 | ```bash 76 | npm run seed 77 | ``` 78 | 79 | 6. Start the development server: 80 | 81 | Using bun: 82 | 83 | ```bash 84 | bun dev 85 | ``` 86 | 87 | Using npm: 88 | 89 | ```bash 90 | npm run dev 91 | ``` 92 | 93 | 7. Open [http://localhost:3000](http://localhost:3000) in your browser. 94 | 95 | ## Converting from npm to bun 96 | 97 | If you have an existing project using npm and want to convert to bun, follow these steps: 98 | 99 | 1. Install bun globally (if you haven't already): 100 | 101 | ```bash 102 | curl -fsSL https://bun.sh/install | bash 103 | ``` 104 | 105 | 2. Remove the existing node_modules folder and package-lock.json: 106 | 107 | ```bash 108 | rm -rf node_modules package-lock.json 109 | ``` 110 | 111 | 3. Install dependencies using bun: 112 | 113 | ```bash 114 | bun install 115 | ``` 116 | 117 | 4. Update your scripts to use bun: 118 | 119 | - Replace `npm run` with `bun run` 120 | - For TypeScript scripts, you can run them directly with bun (e.g., `bun scripts/seed-cosmic.ts`) 121 | 122 | 5. Start the development server with bun: 123 | 124 | ```bash 125 | bun dev 126 | ``` 127 | 128 | ## Project Structure 129 | 130 | - `/app` - Next.js app router pages and layouts 131 | - `/components` - React components 132 | - `/lib` - Utility functions and configurations 133 | - `/types` - TypeScript type definitions 134 | - `/scripts` - Utility scripts 135 | 136 | ## Technologies Used 137 | 138 | - Next.js 15 139 | - TypeScript 140 | - Tailwind CSS 141 | - Cosmic CMS 142 | - React Audio Player 143 | 144 | ## Contributing 145 | 146 | 1. Fork the repository 147 | 2. Create your feature branch (`git checkout -b feature/amazing-feature`) 148 | 3. Commit your changes (`git commit -m 'Add some amazing feature'`) 149 | 4. Push to the branch (`git push origin feature/amazing-feature`) 150 | 5. Open a Pull Request 151 | 152 | ## License 153 | 154 | This project is licensed under the MIT License - see the LICENSE file for details. 155 | -------------------------------------------------------------------------------- /components/PlaylistClient.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState, useEffect } from "react"; 4 | import Link from "next/link"; 5 | import TrackList from "@/components/TrackList"; 6 | import { getPlaylist } from "@/app/actions"; 7 | import { Playlist, Track } from "@/types"; 8 | 9 | interface PlaylistClientProps { 10 | slug: string; 11 | } 12 | 13 | export default function PlaylistClient({ slug }: PlaylistClientProps) { 14 | const [playlist, setPlaylist] = useState(null); 15 | const [tracks, setTracks] = useState([]); 16 | const [loading, setLoading] = useState(true); 17 | 18 | useEffect(() => { 19 | async function fetchPlaylistData() { 20 | try { 21 | const playlistData = await getPlaylist(slug); 22 | setPlaylist(playlistData); 23 | 24 | // If playlist has tracks, get them 25 | if ( 26 | playlistData.metadata.tracks && 27 | playlistData.metadata.tracks.length > 0 28 | ) { 29 | setTracks(playlistData.metadata.tracks); 30 | } 31 | 32 | setLoading(false); 33 | } catch (error) { 34 | console.error("Error fetching playlist data:", error); 35 | setLoading(false); 36 | } 37 | } 38 | 39 | if (slug) { 40 | fetchPlaylistData(); 41 | } 42 | }, [slug]); 43 | 44 | if (loading) { 45 | return ( 46 |

47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 |

56 | {[...Array(3)].map((_, i) => ( 57 |

58 |

59 |

60 |

61 |

62 |

63 |

64 | ))} 65 |

66 |

67 |

68 |

69 |

70 | ); 71 | } 72 | 73 | if (!playlist) { 74 | return ( 75 |

76 |

77 | Playlist Not Found 78 |

79 |

80 | This is a demo app showing what's possible with Cosmic CMS. 81 |

82 |

83 | 87 | Return Home 88 | 89 |

90 | 96 | Visit Cosmic 97 | 98 | • 99 | 105 | View on GitHub 106 | 107 |

108 |

109 |

110 | ); 111 | } 112 | 113 | return ( 114 |

115 |

116 |

117 |

122 |

123 |

124 |

125 | {playlist.title} 126 |

127 |

128 | {playlist.metadata.description} 129 |

130 | 131 |

132 |

133 |

134 | ); 135 | } 136 | -------------------------------------------------------------------------------- /components/MusicPlayer.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState, useRef, useEffect } from "react"; 4 | import ReactAudioPlayer from "react-audio-player"; 5 | import { Track } from "@/types"; 6 | 7 | interface MusicPlayerProps { 8 | track: Track; 9 | onPlayStateChange?: (isPlaying: boolean) => void; 10 | } 11 | 12 | interface WindowWithPlayer extends Window { 13 | pauseCurrentTrack?: () => void; 14 | playCurrentTrack?: () => void; 15 | } 16 | 17 | export default function MusicPlayer({ 18 | track, 19 | onPlayStateChange, 20 | }: MusicPlayerProps) { 21 | const [isPlaying, setIsPlaying] = useState(false); 22 | const [currentTime, setCurrentTime] = useState(0); 23 | const [duration, setDuration] = useState(0); 24 | const audioRef = useRef(null); 25 | 26 | // Restore audio position and playing state from localStorage 27 | useEffect(() => { 28 | const savedTime = localStorage.getItem(`track-${track.id}-time`); 29 | const savedIsPlaying = localStorage.getItem(`track-${track.id}-playing`); 30 | 31 | if (savedTime) { 32 | setCurrentTime(parseFloat(savedTime)); 33 | } 34 | if (savedIsPlaying) { 35 | setIsPlaying(savedIsPlaying === "true"); 36 | onPlayStateChange?.(savedIsPlaying === "true"); 37 | } 38 | }, [track.id, onPlayStateChange]); 39 | 40 | useEffect(() => { 41 | // Reset player when track changes 42 | setIsPlaying(false); 43 | setCurrentTime(0); 44 | onPlayStateChange?.(false); 45 | 46 | // Set the audio position to the saved time 47 | const audio = audioRef.current?.audioEl.current; 48 | if (audio) { 49 | const savedTime = localStorage.getItem(`track-${track.id}-time`); 50 | if (savedTime) { 51 | audio.currentTime = parseFloat(savedTime); 52 | } 53 | } 54 | }, [track, onPlayStateChange]); 55 | 56 | const handleTimeUpdate = (time: number) => { 57 | setCurrentTime(time); 58 | // Save current time to localStorage 59 | localStorage.setItem(`track-${track.id}-time`, time.toString()); 60 | }; 61 | 62 | const handleLoadedMetadata = (e: Event) => { 63 | const target = e.target as HTMLAudioElement; 64 | setDuration(target.duration); 65 | }; 66 | 67 | const togglePlayPause = () => { 68 | const audio = audioRef.current?.audioEl.current; 69 | if (!audio) return; 70 | 71 | if (isPlaying) { 72 | audio.pause(); 73 | onPlayStateChange?.(false); 74 | localStorage.setItem(`track-${track.id}-playing`, "false"); 75 | } else { 76 | audio.play(); 77 | onPlayStateChange?.(true); 78 | localStorage.setItem(`track-${track.id}-playing`, "true"); 79 | } 80 | setIsPlaying(!isPlaying); 81 | }; 82 | 83 | const pause = () => { 84 | const audio = audioRef.current?.audioEl.current; 85 | if (!audio) return; 86 | audio.pause(); 87 | setIsPlaying(false); 88 | onPlayStateChange?.(false); 89 | localStorage.setItem(`track-${track.id}-playing`, "false"); 90 | }; 91 | 92 | const play = () => { 93 | const audio = audioRef.current?.audioEl.current; 94 | if (!audio) return; 95 | audio.currentTime = 0; 96 | audio.play(); 97 | setIsPlaying(true); 98 | onPlayStateChange?.(true); 99 | localStorage.setItem(`track-${track.id}-playing`, "true"); 100 | }; 101 | 102 | // Expose play and pause functions to parent 103 | useEffect(() => { 104 | if (typeof window !== "undefined") { 105 | (window as WindowWithPlayer).pauseCurrentTrack = pause; 106 | (window as WindowWithPlayer).playCurrentTrack = play; 107 | } 108 | return () => { 109 | if (typeof window !== "undefined") { 110 | delete (window as WindowWithPlayer).pauseCurrentTrack; 111 | delete (window as WindowWithPlayer).playCurrentTrack; 112 | } 113 | }; 114 | }, []); 115 | 116 | const formatTime = (time: number) => { 117 | const minutes = Math.floor(time / 60); 118 | const seconds = Math.floor(time % 60); 119 | return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`; 120 | }; 121 | 122 | // Add keyboard event listener for spacebar 123 | useEffect(() => { 124 | const handleKeyPress = (e: KeyboardEvent) => { 125 | if (e.code === "Space") { 126 | e.preventDefault(); // Prevent page scroll 127 | togglePlayPause(); 128 | } 129 | }; 130 | 131 | window.addEventListener("keydown", handleKeyPress); 132 | return () => window.removeEventListener("keydown", handleKeyPress); 133 | }, [isPlaying, track.id]); // Add dependencies 134 | 135 | if (!track) return null; 136 | 137 | return ( 138 |

139 |

140 |

141 |

146 |

147 |

148 | {track.title} 149 |

150 |

151 | {track.metadata.album.metadata.artist.title} 152 |

153 |

154 |

155 | 156 |

157 |

158 | 180 |

181 |

182 | 183 | {formatTime(currentTime)} 184 | 185 |

186 |

190 |

191 | 192 | {formatTime(duration)} 193 | 194 |

195 |

196 |

197 | 198 | 206 |

207 | ); 208 | } 209 | -------------------------------------------------------------------------------- /components/Navigation.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Link from "next/link"; 4 | import { usePathname } from "next/navigation"; 5 | import { useEffect, useState } from "react"; 6 | import { Playlist } from "@/types"; 7 | import { getPlaylists } from "@/app/actions"; 8 | 9 | export default function Navigation() { 10 | const pathname = usePathname(); 11 | const [playlists, setPlaylists] = useState([]); 12 | const [loading, setLoading] = useState(true); 13 | const [mounted, setMounted] = useState(false); 14 | const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); 15 | 16 | // Handle initial mount 17 | useEffect(() => { 18 | setMounted(true); 19 | }, []); 20 | 21 | useEffect(() => { 22 | async function fetchPlaylists() { 23 | try { 24 | const playlistsData = await getPlaylists(); 25 | setPlaylists(playlistsData); 26 | } catch (error) { 27 | console.error("Error fetching playlists:", error); 28 | } finally { 29 | setLoading(false); 30 | } 31 | } 32 | 33 | fetchPlaylists(); 34 | }, []); 35 | 36 | const isActive = (path: string) => pathname === path; 37 | 38 | // Add handler for link clicks 39 | const handleLinkClick = () => { 40 | setIsMobileMenuOpen(false); 41 | }; 42 | 43 | // Only render mobile-specific elements after mount 44 | const showMobileElements = mounted; 45 | 46 | return ( 47 | <> 48 | {/* Mobile Menu Toggle Button */} 49 | {showMobileElements && ( 50 | 77 | )} 78 | 79 | {/* Navigation */} 80 |

89 |

90 | {/* Logo */} 91 |

92 | 97 | Spotify Clone 98 | 99 |

100 | Powered by{" "} 101 | 107 | Cosmic 108 | 109 | {" • "} 110 | 116 | GitHub 117 | 118 |

119 |

120 | 121 | {/* Browse */} 122 |

123 |

124 | Browse 125 |

126 |

127 | 136 | 149 | Home 150 | 151 | 160 | 173 | Search 174 | 175 | 184 | 197 | Your Library 198 | 199 |

200 |

201 | 202 | {/* Playlists */} 203 |

204 |

205 | Playlists 206 |

207 |

208 | {loading ? ( 209 | // Loading skeleton for playlists 210 | [...Array(2)].map((_, i) => ( 211 |

212 |

213 |

214 |

215 | )) 216 | ) : ( 217 | <> 218 | {playlists.map((playlist) => ( 219 | 229 | 242 | {playlist.title} 243 | 244 | ))} 245 | 250 | 263 | Liked Songs 264 | 265 | 266 | )} 267 |

268 |

269 |

270 |

271 | 272 | {/* Overlay for mobile */} 273 | {showMobileElements && isMobileMenuOpen && ( 274 |

setIsMobileMenuOpen(false)} 277 | /> 278 | )} 279 | 280 | ); 281 | } 282 | -------------------------------------------------------------------------------- /scripts/seed-cosmic.ts: -------------------------------------------------------------------------------- 1 | import { createBucketClient } from "@cosmicjs/sdk"; 2 | 3 | const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG; 4 | const WRITE_KEY = process.env.COSMIC_WRITE_KEY; 5 | const READ_KEY = process.env.COSMIC_READ_KEY; 6 | 7 | if (!BUCKET_SLUG || !WRITE_KEY || !READ_KEY) { 8 | throw new Error("Missing required environment variables"); 9 | } 10 | 11 | const cosmic = createBucketClient({ 12 | bucketSlug: BUCKET_SLUG, 13 | writeKey: WRITE_KEY, 14 | readKey: READ_KEY, 15 | }); 16 | 17 | async function uploadImageFromUrl(url: string, filename: string) { 18 | try { 19 | console.log(`Fetching image from ${url}...`); 20 | const response = await fetch(url); 21 | 22 | if (!response.ok) { 23 | throw new Error(`HTTP error! status: ${response.status}`); 24 | } 25 | 26 | console.log("Converting to blob..."); 27 | const blob = await response.blob(); 28 | console.log(`Blob type: ${blob.type}, size: ${blob.size} bytes`); 29 | 30 | console.log("Converting to buffer..."); 31 | const buffer = await blob.arrayBuffer(); 32 | console.log(`Buffer length: ${buffer.byteLength} bytes`); 33 | 34 | console.log("Uploading to Cosmic..."); 35 | const { media } = await cosmic.media.insertOne({ 36 | media: { 37 | originalname: filename, 38 | buffer: Buffer.from(buffer), 39 | }, 40 | }); 41 | 42 | console.log(`Successfully uploaded ${filename} to Cosmic`); 43 | return media; 44 | } catch (error) { 45 | console.error(`Error uploading image from ${url}:`); 46 | console.error("Full error:", error); 47 | if (error instanceof Error) { 48 | console.error("Error message:", error.message); 49 | console.error("Error stack:", error.stack); 50 | } 51 | throw error; 52 | } 53 | } 54 | 55 | async function uploadAudioFromUrl(url: string, filename: string) { 56 | try { 57 | console.log(`Fetching audio from ${url}...`); 58 | const response = await fetch(url); 59 | 60 | if (!response.ok) { 61 | throw new Error(`HTTP error! status: ${response.status}`); 62 | } 63 | 64 | console.log("Converting to blob..."); 65 | const blob = await response.blob(); 66 | console.log(`Blob type: ${blob.type}, size: ${blob.size} bytes`); 67 | 68 | console.log("Converting to buffer..."); 69 | const buffer = await blob.arrayBuffer(); 70 | console.log(`Buffer length: ${buffer.byteLength} bytes`); 71 | 72 | console.log("Uploading to Cosmic..."); 73 | const { media } = await cosmic.media.insertOne({ 74 | media: { 75 | originalname: filename, 76 | buffer: Buffer.from(buffer), 77 | }, 78 | }); 79 | 80 | console.log(`Successfully uploaded ${filename} to Cosmic`); 81 | return media; 82 | } catch (error) { 83 | console.error(`Error uploading audio from ${url}:`); 84 | console.error("Full error:", error); 85 | if (error instanceof Error) { 86 | console.error("Error message:", error.message); 87 | console.error("Error stack:", error.stack); 88 | } 89 | throw error; 90 | } 91 | } 92 | 93 | async function seedObjectTypes() { 94 | try { 95 | // Create Artists object type 96 | await cosmic.objectTypes.insertOne({ 97 | title: "Artists", 98 | slug: "artists", 99 | singular: "Artist", 100 | emoji: "👤", 101 | metafields: [ 102 | { 103 | title: "Name", 104 | key: "name", 105 | type: "text", 106 | required: true, 107 | }, 108 | { 109 | title: "Image", 110 | key: "image", 111 | type: "file", 112 | required: true, 113 | media_validation_type: "image", 114 | }, 115 | { 116 | title: "Bio", 117 | key: "bio", 118 | type: "textarea", 119 | required: true, 120 | }, 121 | ], 122 | }); 123 | 124 | // Create Albums object type 125 | await cosmic.objectTypes.insertOne({ 126 | title: "Albums", 127 | slug: "albums", 128 | singular: "Album", 129 | emoji: "💿", 130 | metafields: [ 131 | { 132 | title: "Title", 133 | key: "title", 134 | type: "text", 135 | required: true, 136 | }, 137 | { 138 | title: "Cover", 139 | key: "cover", 140 | type: "file", 141 | required: true, 142 | media_validation_type: "image", 143 | }, 144 | { 145 | title: "Release Date", 146 | key: "release_date", 147 | type: "date", 148 | required: true, 149 | }, 150 | { 151 | title: "Artist", 152 | key: "artist", 153 | type: "object", 154 | object_type: "artists", 155 | required: true, 156 | }, 157 | ], 158 | }); 159 | 160 | // Create Tracks object type 161 | await cosmic.objectTypes.insertOne({ 162 | title: "Tracks", 163 | slug: "tracks", 164 | singular: "Track", 165 | emoji: "🎵", 166 | metafields: [ 167 | { 168 | title: "Title", 169 | key: "title", 170 | type: "text", 171 | required: true, 172 | }, 173 | { 174 | title: "Audio File", 175 | key: "audio", 176 | type: "file", 177 | required: true, 178 | media_validation_type: "audio", 179 | }, 180 | { 181 | title: "Duration", 182 | key: "duration", 183 | type: "number", 184 | required: true, 185 | }, 186 | { 187 | title: "Album", 188 | key: "album", 189 | type: "object", 190 | object_type: "albums", 191 | required: true, 192 | }, 193 | ], 194 | }); 195 | 196 | // Create Playlists object type 197 | await cosmic.objectTypes.insertOne({ 198 | title: "Playlists", 199 | slug: "playlists", 200 | singular: "Playlist", 201 | emoji: "📀", 202 | metafields: [ 203 | { 204 | title: "Title", 205 | key: "title", 206 | type: "text", 207 | required: true, 208 | }, 209 | { 210 | title: "Description", 211 | key: "description", 212 | type: "textarea", 213 | required: true, 214 | }, 215 | { 216 | title: "Cover", 217 | key: "cover", 218 | type: "file", 219 | required: true, 220 | media_validation_type: "image", 221 | }, 222 | { 223 | title: "Tracks", 224 | key: "tracks", 225 | type: "objects", 226 | object_type: "tracks", 227 | required: false, 228 | }, 229 | ], 230 | }); 231 | 232 | console.log("Successfully created all object types!"); 233 | } catch (error) { 234 | console.error("Error creating object types:", error); 235 | process.exit(1); 236 | } 237 | } 238 | 239 | async function seedContent() { 240 | try { 241 | // Upload artist images 242 | const lunaImage = await uploadImageFromUrl( 243 | "https://images.unsplash.com/photo-1494354145959-25cb82edf23d?w=400&h=400&fit=crop", 244 | "luna-moon.jpg" 245 | ); 246 | const novaImage = await uploadImageFromUrl( 247 | "https://images.unsplash.com/photo-1516223725307-6f76b9ec8742?w=400&h=400&fit=crop", 248 | "nova-star.jpg" 249 | ); 250 | 251 | // Create sample artists 252 | const { object: artist1 } = await cosmic.objects.insertOne({ 253 | title: "Luna Moon", 254 | slug: "luna-moon", 255 | type: "artists", 256 | thumbnail: lunaImage.name, 257 | metadata: { 258 | name: "Luna Moon", 259 | bio: "Luna Moon is a cosmic pop sensation known for her ethereal vocals and space-themed music. Her unique blend of electronic and acoustic elements has created a new genre called 'astro-pop'.", 260 | image: lunaImage.name, 261 | }, 262 | }); 263 | 264 | const { object: artist2 } = await cosmic.objects.insertOne({ 265 | title: "Nova Star", 266 | slug: "nova-star", 267 | type: "artists", 268 | thumbnail: novaImage.name, 269 | metadata: { 270 | name: "Nova Star", 271 | bio: "Nova Star is an indie rock phenomenon who writes songs about quantum physics and parallel universes. His experimental sound has earned him the nickname 'The Einstein of Rock'.", 272 | image: novaImage.name, 273 | }, 274 | }); 275 | 276 | // Upload album covers 277 | const starlightCover = await uploadImageFromUrl( 278 | "https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?w=400&h=400&fit=crop", 279 | "starlight.jpg" 280 | ); 281 | const quantumCover = await uploadImageFromUrl( 282 | "https://images.unsplash.com/photo-1557264337-e8a93017fe92?w=400&h=400&fit=crop", 283 | "quantum.jpg" 284 | ); 285 | 286 | // Create sample albums 287 | const { object: album1 } = await cosmic.objects.insertOne({ 288 | title: "Starlight Symphony", 289 | slug: "starlight-symphony", 290 | type: "albums", 291 | thumbnail: starlightCover.name, 292 | metadata: { 293 | title: "Starlight Symphony", 294 | release_date: "2023-06-15", 295 | artist: artist1.id, 296 | cover: starlightCover.name, 297 | }, 298 | }); 299 | 300 | const { object: album2 } = await cosmic.objects.insertOne({ 301 | title: "Quantum Dreams", 302 | slug: "quantum-dreams", 303 | type: "albums", 304 | thumbnail: quantumCover.name, 305 | metadata: { 306 | title: "Quantum Dreams", 307 | release_date: "2023-08-22", 308 | artist: artist2.id, 309 | cover: quantumCover.name, 310 | }, 311 | }); 312 | 313 | // Create sample tracks 314 | const cosmicDanceAudio = await uploadAudioFromUrl( 315 | "https://cdn.cosmicjs.com/1474f620-05be-11f0-993b-3bd041905fff-relaxing-jazz-saxophone-music-saxophone-instruments-music-303093.mp3", 316 | "cosmic-dance.mp3" 317 | ); 318 | 319 | const parallelWorldsAudio = await uploadAudioFromUrl( 320 | "https://cdn.cosmicjs.com/147e44f0-05be-11f0-993b-3bd041905fff-iced-coffee-jazz-309947.mp3", 321 | "parallel-worlds.mp3" 322 | ); 323 | 324 | const { object: track1 } = await cosmic.objects.insertOne({ 325 | title: "Cosmic Dance", 326 | slug: "cosmic-dance", 327 | type: "tracks", 328 | metadata: { 329 | title: "Cosmic Dance", 330 | duration: 245, 331 | album: album1.id, 332 | audio: cosmicDanceAudio.name, 333 | }, 334 | }); 335 | 336 | const { object: track2 } = await cosmic.objects.insertOne({ 337 | title: "Parallel Worlds", 338 | slug: "parallel-worlds", 339 | type: "tracks", 340 | metadata: { 341 | title: "Parallel Worlds", 342 | duration: 312, 343 | album: album2.id, 344 | audio: parallelWorldsAudio.name, 345 | }, 346 | }); 347 | 348 | // Upload playlist cover 349 | const playlistCover = await uploadImageFromUrl( 350 | "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop", 351 | "cosmic-hits.jpg" 352 | ); 353 | 354 | // Create sample playlist 355 | await cosmic.objects.insertOne({ 356 | title: "Cosmic Hits 2023", 357 | slug: "cosmic-hits-2023", 358 | type: "playlists", 359 | thumbnail: playlistCover.name, 360 | metadata: { 361 | title: "Cosmic Hits 2023", 362 | description: 363 | "A stellar collection of the year's most out-of-this-world tracks", 364 | tracks: [track1.id, track2.id], 365 | cover: playlistCover.name, 366 | }, 367 | }); 368 | 369 | console.log("Successfully seeded all content!"); 370 | } catch (error) { 371 | console.error("Error seeding content:", error); 372 | process.exit(1); 373 | } 374 | } 375 | 376 | // Run both seeding functions 377 | async function seed() { 378 | await seedObjectTypes(); 379 | await seedContent(); 380 | } 381 | 382 | seed(); 383 | -------------------------------------------------------------------------------- /article.md: -------------------------------------------------------------------------------- 1 | # How to Build a Spotify Clone with Next.js and Cosmic 2 | 3 | Streaming music platforms have revolutionized how we consume audio content. In this tutorial, we'll build a Spotify-like music streaming application using Next.js for the frontend and [Cosmic](https://www.cosmicjs.com) as our headless CMS to manage music tracks, artists, and playlists. 4 | 5 | [Live Demo](https://cosmic-spotify-clone.vercel.app) 6 | 7 | [GitHub Repository](https://github.com/cosmicjs/cosmic-spotify-clone) 8 | 9 | [Deploy with Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcosmicjs%2Fcosmic-spotify-clone&env=COSMIC_BUCKET_SLUG,COSMIC_READ_KEY,COSMIC_WRITE_KEY&envDescription=Required%20API%20keys%20from%20Cosmic&envLink=https%3A%2F%2Fwww.cosmicjs.com%2Fdocs%2Fapi%2Fauthentication) 10 | 11 | [Spotify Clone Screenshot 2](https://imgix.cosmicjs.com/9d793800-05d7-11f0-993b-3bd041905fff-cosmic-spotify-2.png?w=2000&auto=format,compression) 12 | 13 | [Spotify Clone Screenshot 1](https://imgix.cosmicjs.com/9d6784c0-05d7-11f0-993b-3bd041905fff-cosmic-spotify-1.png?w=2000&auto=format,compression) 14 | 15 | ## What We'll Build 16 | 17 | Our Spotify clone will feature: 18 | 19 | - Music library with artists, albums, and tracks 20 | - Playlist creation and management 21 | - A music player with playback controls 22 | - Responsive design for all devices 23 | 24 | ## Prerequisites 25 | 26 | - Node.js 18.x or later (if using npm) 27 | - Bun runtime (if using bun, recommended) 28 | - A Cosmic account and bucket 29 | - Basic knowledge of React and TypeScript 30 | 31 | ## Setting Up Our Project 32 | 33 | First, let's create a new Next.js project with TypeScript: 34 | 35 | Using bun (recommended): 36 | 37 | ```bash 38 | bunx create-next-app spotify-clone --typescript 39 | cd spotify-clone 40 | ``` 41 | 42 | Using npm: 43 | 44 | ```bash 45 | npx create-next-app spotify-clone --typescript 46 | cd spotify-clone 47 | ``` 48 | 49 | Install the required dependencies: 50 | 51 | Using bun: 52 | 53 | ```bash 54 | bun add @cosmicjs/sdk react-audio-player 55 | bun add -d tailwindcss postcss autoprefixer @types/react-audio-player 56 | ``` 57 | 58 | Using npm: 59 | 60 | ```bash 61 | npm install @cosmicjs/sdk react-audio-player 62 | npm install -D tailwindcss postcss autoprefixer @types/react-audio-player 63 | ``` 64 | 65 | Initialize Tailwind CSS: 66 | 67 | Using bun: 68 | 69 | ```bash 70 | bunx tailwindcss init -p 71 | ``` 72 | 73 | Using npm: 74 | 75 | ```bash 76 | npx tailwindcss init -p 77 | ``` 78 | 79 | Update your `tailwind.config.js`: 80 | 81 | ```javascript 82 | /** @type {import('tailwindcss').Config} */ 83 | module.exports = { 84 | content: [ 85 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 86 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 87 | ], 88 | theme: { 89 | extend: {}, 90 | }, 91 | plugins: [], 92 | }; 93 | ``` 94 | 95 | ## Setting Up Environment Variables 96 | 97 | Create a `.env.local` file in your project root: 98 | 99 | ```env 100 | COSMIC_BUCKET_SLUG=your-bucket-slug 101 | COSMIC_READ_KEY=your-read-key 102 | COSMIC_WRITE_KEY=your-write-key 103 | ``` 104 | 105 | ## Project Structure 106 | 107 | Let's organize our project with the following structure: 108 | 109 | ``` 110 | spotify-clone/ 111 | ├── app/ 112 | │ ├── layout.tsx 113 | │ ├── page.tsx 114 | │ ├── albums/ 115 | │ │ └── [slug]/ 116 | │ │ └── page.tsx 117 | │ └── playlists/ 118 | │ └── [slug]/ 119 | │ └── page.tsx 120 | ├── components/ 121 | │ ├── AlbumCard.tsx 122 | │ ├── AlbumDetail.tsx 123 | │ ├── MusicLibrary.tsx 124 | │ ├── MusicPlayer.tsx 125 | │ ├── Navigation.tsx 126 | │ ├── Footer.tsx 127 | │ └── TrackList.tsx 128 | ├── lib/ 129 | │ ├── cosmic.ts 130 | │ └── PlayerContext.tsx 131 | ├── types/ 132 | │ └── index.ts 133 | └── scripts/ 134 | └── seed-cosmic.ts 135 | ``` 136 | 137 | ## Setting Up TypeScript Types 138 | 139 | Create `types/index.ts` to define our data types: 140 | 141 | ```typescript 142 | export interface Track { 143 | id: string; 144 | title: string; 145 | metadata: { 146 | audio: { 147 | url: string; 148 | }; 149 | duration: number; 150 | album: { 151 | metadata: { 152 | cover: { 153 | imgix_url: string; 154 | }; 155 | artist: { 156 | title: string; 157 | }; 158 | }; 159 | }; 160 | }; 161 | } 162 | 163 | export interface Album { 164 | id: string; 165 | slug: string; 166 | title: string; 167 | metadata: { 168 | cover: { 169 | imgix_url: string; 170 | }; 171 | artist: { 172 | title: string; 173 | }; 174 | }; 175 | } 176 | 177 | export interface Playlist { 178 | id: string; 179 | title: string; 180 | metadata: { 181 | description: string; 182 | cover: { 183 | imgix_url: string; 184 | }; 185 | tracks: Track[]; 186 | }; 187 | } 188 | ``` 189 | 190 | ## Configuring Cosmic Connection 191 | 192 | Create `lib/cosmic.ts`: 193 | 194 | ```typescript 195 | import { createBucketClient } from "@cosmicjs/sdk"; 196 | 197 | const cosmic = createBucketClient({ 198 | bucketSlug: process.env.COSMIC_BUCKET_SLUG as string, 199 | readKey: process.env.COSMIC_READ_KEY as string, 200 | }); 201 | 202 | export default cosmic; 203 | ``` 204 | 205 | ## Seeding the CMS 206 | 207 | Create `scripts/seed-cosmic.ts` to set up our object types and sample content: 208 | 209 | ```typescript 210 | import { createBucketClient } from "@cosmicjs/sdk"; 211 | 212 | const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG; 213 | const WRITE_KEY = process.env.COSMIC_WRITE_KEY; 214 | const READ_KEY = process.env.COSMIC_READ_KEY; 215 | 216 | if (!BUCKET_SLUG || !WRITE_KEY || !READ_KEY) { 217 | throw new Error("Missing required environment variables"); 218 | } 219 | 220 | const cosmic = createBucketClient({ 221 | bucketSlug: BUCKET_SLUG, 222 | writeKey: WRITE_KEY, 223 | readKey: READ_KEY, 224 | }); 225 | 226 | // Helper functions for uploading media 227 | async function uploadImageFromUrl(url: string, filename: string) { 228 | const response = await fetch(url); 229 | const blob = await response.blob(); 230 | const buffer = await blob.arrayBuffer(); 231 | 232 | const { media } = await cosmic.media.insertOne({ 233 | media: { 234 | originalname: filename, 235 | buffer: Buffer.from(buffer), 236 | }, 237 | }); 238 | 239 | return media; 240 | } 241 | 242 | async function uploadAudioFromUrl(url: string, filename: string) { 243 | const response = await fetch(url); 244 | const blob = await response.blob(); 245 | const buffer = await blob.arrayBuffer(); 246 | 247 | const { media } = await cosmic.media.insertOne({ 248 | media: { 249 | originalname: filename, 250 | buffer: Buffer.from(buffer), 251 | }, 252 | }); 253 | 254 | return media; 255 | } 256 | 257 | // Create object types 258 | async function seedObjectTypes() { 259 | // Create Artists object type 260 | await cosmic.objectTypes.insertOne({ 261 | title: "Artists", 262 | slug: "artists", 263 | singular: "Artist", 264 | emoji: "👤", 265 | metafields: [ 266 | { 267 | title: "Name", 268 | key: "name", 269 | type: "text", 270 | required: true, 271 | }, 272 | { 273 | title: "Image", 274 | key: "image", 275 | type: "file", 276 | required: true, 277 | media_validation_type: "image", 278 | }, 279 | { 280 | title: "Bio", 281 | key: "bio", 282 | type: "textarea", 283 | required: true, 284 | }, 285 | ], 286 | }); 287 | 288 | // Create Albums object type 289 | await cosmic.objectTypes.insertOne({ 290 | title: "Albums", 291 | slug: "albums", 292 | singular: "Album", 293 | emoji: "💿", 294 | metafields: [ 295 | { 296 | title: "Title", 297 | key: "title", 298 | type: "text", 299 | required: true, 300 | }, 301 | { 302 | title: "Cover", 303 | key: "cover", 304 | type: "file", 305 | required: true, 306 | media_validation_type: "image", 307 | }, 308 | { 309 | title: "Release Date", 310 | key: "release_date", 311 | type: "date", 312 | required: true, 313 | }, 314 | { 315 | title: "Artist", 316 | key: "artist", 317 | type: "object", 318 | object_type: "artists", 319 | required: true, 320 | }, 321 | ], 322 | }); 323 | 324 | // Create Tracks object type 325 | await cosmic.objectTypes.insertOne({ 326 | title: "Tracks", 327 | slug: "tracks", 328 | singular: "Track", 329 | emoji: "🎵", 330 | metafields: [ 331 | { 332 | title: "Title", 333 | key: "title", 334 | type: "text", 335 | required: true, 336 | }, 337 | { 338 | title: "Audio File", 339 | key: "audio", 340 | type: "file", 341 | required: true, 342 | media_validation_type: "audio", 343 | }, 344 | { 345 | title: "Duration", 346 | key: "duration", 347 | type: "number", 348 | required: true, 349 | }, 350 | { 351 | title: "Album", 352 | key: "album", 353 | type: "object", 354 | object_type: "albums", 355 | required: true, 356 | }, 357 | ], 358 | }); 359 | 360 | // Create Playlists object type 361 | await cosmic.objectTypes.insertOne({ 362 | title: "Playlists", 363 | slug: "playlists", 364 | singular: "Playlist", 365 | emoji: "📀", 366 | metafields: [ 367 | { 368 | title: "Title", 369 | key: "title", 370 | type: "text", 371 | required: true, 372 | }, 373 | { 374 | title: "Description", 375 | key: "description", 376 | type: "textarea", 377 | required: true, 378 | }, 379 | { 380 | title: "Cover", 381 | key: "cover", 382 | type: "file", 383 | required: true, 384 | media_validation_type: "image", 385 | }, 386 | { 387 | title: "Tracks", 388 | key: "tracks", 389 | type: "objects", 390 | object_type: "tracks", 391 | required: false, 392 | }, 393 | ], 394 | }); 395 | } 396 | 397 | // Create sample content 398 | async function seedContent() { 399 | // Upload artist images 400 | const lunaImage = await uploadImageFromUrl( 401 | "https://images.unsplash.com/photo-1494354145959-25cb82edf23d?w=400&h=400&fit=crop", 402 | "luna-moon.jpg" 403 | ); 404 | const novaImage = await uploadImageFromUrl( 405 | "https://images.unsplash.com/photo-1516223725307-6f76b9ec8742?w=400&h=400&fit=crop", 406 | "nova-star.jpg" 407 | ); 408 | 409 | // Create sample artists 410 | const { object: artist1 } = await cosmic.objects.insertOne({ 411 | title: "Luna Moon", 412 | slug: "luna-moon", 413 | type: "artists", 414 | thumbnail: lunaImage.name, 415 | metadata: { 416 | name: "Luna Moon", 417 | bio: "Luna Moon is a cosmic pop sensation known for her ethereal vocals and space-themed music. Her unique blend of electronic and acoustic elements has created a new genre called 'astro-pop'.", 418 | image: lunaImage.name, 419 | }, 420 | }); 421 | 422 | const { object: artist2 } = await cosmic.objects.insertOne({ 423 | title: "Nova Star", 424 | slug: "nova-star", 425 | type: "artists", 426 | thumbnail: novaImage.name, 427 | metadata: { 428 | name: "Nova Star", 429 | bio: "Nova Star is an indie rock phenomenon who writes songs about quantum physics and parallel universes. His experimental sound has earned him the nickname 'The Einstein of Rock'.", 430 | image: novaImage.name, 431 | }, 432 | }); 433 | 434 | // Upload album covers 435 | const starlightCover = await uploadImageFromUrl( 436 | "https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?w=400&h=400&fit=crop", 437 | "starlight.jpg" 438 | ); 439 | const quantumCover = await uploadImageFromUrl( 440 | "https://images.unsplash.com/photo-1557264337-e8a93017fe92?w=400&h=400&fit=crop", 441 | "quantum.jpg" 442 | ); 443 | 444 | // Create sample albums 445 | const { object: album1 } = await cosmic.objects.insertOne({ 446 | title: "Starlight Symphony", 447 | slug: "starlight-symphony", 448 | type: "albums", 449 | thumbnail: starlightCover.name, 450 | metadata: { 451 | title: "Starlight Symphony", 452 | release_date: "2023-06-15", 453 | artist: artist1.id, 454 | cover: starlightCover.name, 455 | }, 456 | }); 457 | 458 | const { object: album2 } = await cosmic.objects.insertOne({ 459 | title: "Quantum Dreams", 460 | slug: "quantum-dreams", 461 | type: "albums", 462 | thumbnail: quantumCover.name, 463 | metadata: { 464 | title: "Quantum Dreams", 465 | release_date: "2023-08-22", 466 | artist: artist2.id, 467 | cover: quantumCover.name, 468 | }, 469 | }); 470 | 471 | // Create sample tracks 472 | const cosmicDanceAudio = await uploadAudioFromUrl( 473 | "https://cdn.cosmicjs.com/1474f620-05be-11f0-993b-3bd041905fff-relaxing-jazz-saxophone-music-saxophone-instruments-music-303093.mp3", 474 | "cosmic-dance.mp3" 475 | ); 476 | 477 | const parallelWorldsAudio = await uploadAudioFromUrl( 478 | "https://cdn.cosmicjs.com/147e44f0-05be-11f0-993b-3bd041905fff-iced-coffee-jazz-309947.mp3", 479 | "parallel-worlds.mp3" 480 | ); 481 | 482 | const { object: track1 } = await cosmic.objects.insertOne({ 483 | title: "Cosmic Dance", 484 | slug: "cosmic-dance", 485 | type: "tracks", 486 | metadata: { 487 | title: "Cosmic Dance", 488 | duration: 245, 489 | album: album1.id, 490 | audio: cosmicDanceAudio.name, 491 | }, 492 | }); 493 | 494 | const { object: track2 } = await cosmic.objects.insertOne({ 495 | title: "Parallel Worlds", 496 | slug: "parallel-worlds", 497 | type: "tracks", 498 | metadata: { 499 | title: "Parallel Worlds", 500 | duration: 312, 501 | album: album2.id, 502 | audio: parallelWorldsAudio.name, 503 | }, 504 | }); 505 | 506 | // Upload playlist cover 507 | const playlistCover = await uploadImageFromUrl( 508 | "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop", 509 | "cosmic-hits.jpg" 510 | ); 511 | 512 | // Create sample playlist 513 | await cosmic.objects.insertOne({ 514 | title: "Cosmic Hits 2023", 515 | slug: "cosmic-hits-2023", 516 | type: "playlists", 517 | thumbnail: playlistCover.name, 518 | metadata: { 519 | title: "Cosmic Hits 2023", 520 | description: 521 | "A stellar collection of the year's most out-of-this-world tracks", 522 | tracks: [track1.id, track2.id], 523 | cover: playlistCover.name, 524 | }, 525 | }); 526 | } 527 | 528 | // Run both seeding functions 529 | async function seed() { 530 | await seedObjectTypes(); 531 | await seedContent(); 532 | } 533 | 534 | seed(); 535 | ``` 536 | 537 | Run the seed script to set up your Cosmic bucket: 538 | 539 | ```bash 540 | npx ts-node scripts/seed-cosmic.ts 541 | ``` 542 | 543 | ## Building the Application 544 | 545 | ### 1. Create the Root Layout 546 | 547 | Create `app/layout.tsx`: 548 | 549 | ```typescript 550 | import type { Metadata } from "next"; 551 | import { Inter } from "next/font/google"; 552 | import "./globals.css"; 553 | import { PlayerProvider } from "@/lib/PlayerContext"; 554 | import Navigation from "@/components/Navigation"; 555 | import Footer from "@/components/Footer"; 556 | 557 | const inter = Inter({ subsets: ["latin"] }); 558 | 559 | export const metadata: Metadata = { 560 | title: "Spotify Clone - Built with Cosmic", 561 | description: "A demo app showing what's possible with Cosmic", 562 | }; 563 | 564 | export default function RootLayout({ 565 | children, 566 | }: Readonly<{ 567 | children: React.ReactNode; 568 | }>) { 569 | return ( 570 | 571 | 572 | 573 | 574 |

{children}

575 |

576 | 577 | 578 | 579 | ); 580 | } 581 | ``` 582 | 583 | ### 2. Create the Player Context 584 | 585 | Create `lib/PlayerContext.tsx`: 586 | 587 | ```typescript 588 | "use client"; 589 | 590 | import { createContext, useContext, useState, ReactNode } from "react"; 591 | import MusicPlayer from "@/components/MusicPlayer"; 592 | import { Track } from "@/types"; 593 | 594 | interface PlayerContextType { 595 | currentTrack: Track | null; 596 | setCurrentTrack: (track: Track | null) => void; 597 | } 598 | 599 | const PlayerContext = createContext(undefined); 600 | 601 | export function PlayerProvider({ children }: { children: ReactNode }) { 602 | const [currentTrack, setCurrentTrack] = useState(null); 603 | 604 | return ( 605 | 606 | {children} 607 | {currentTrack && } 608 | 609 | ); 610 | } 611 | 612 | export function usePlayer() { 613 | const context = useContext(PlayerContext); 614 | if (!context) { 615 | throw new Error("usePlayer must be used within a PlayerProvider"); 616 | } 617 | return context; 618 | } 619 | ``` 620 | 621 | ### 3. Create Server Actions 622 | 623 | Create `app/actions.ts`: 624 | 625 | ```typescript 626 | "use server"; 627 | 628 | import cosmic from "@/lib/cosmic"; 629 | import { Album, Track, Playlist } from "@/types"; 630 | 631 | export async function getAlbums() { 632 | const { objects } = await cosmic.objects 633 | .find({ 634 | type: "albums", 635 | }) 636 | .props(["id", "title", "slug", "metadata.cover", "metadata.artist"]) 637 | .depth(1); 638 | 639 | return objects as Album[]; 640 | } 641 | 642 | export async function getPlaylists() { 643 | const { objects } = await cosmic.objects 644 | .find({ 645 | type: "playlists", 646 | }) 647 | .props(["id", "title", "slug", "metadata.cover", "metadata.description"]) 648 | .depth(1); 649 | 650 | return objects as Playlist[]; 651 | } 652 | 653 | export async function getAlbum(slug: string) { 654 | const { object: albumData } = await cosmic.objects 655 | .findOne({ 656 | type: "albums", 657 | slug, 658 | }) 659 | .props(["id", "title", "metadata"]) 660 | .depth(1); 661 | 662 | const { objects: trackData } = await cosmic.objects 663 | .find({ 664 | type: "tracks", 665 | "metadata.album": albumData.id, 666 | }) 667 | .props(["id", "title", "metadata"]) 668 | .depth(1); 669 | 670 | return { 671 | album: albumData as Album, 672 | tracks: trackData as Track[], 673 | }; 674 | } 675 | 676 | export async function getPlaylist(slug: string) { 677 | const { object: playlistData } = await cosmic.objects 678 | .findOne({ 679 | type: "playlists", 680 | slug, 681 | }) 682 | .props([ 683 | "title", 684 | "metadata.description", 685 | "metadata.cover", 686 | "metadata.tracks", 687 | ]) 688 | .depth(2); 689 | 690 | return playlistData as Playlist; 691 | } 692 | ``` 693 | 694 | ### 4. Create Components 695 | 696 | #### AlbumCard Component 697 | 698 | Create `components/AlbumCard.tsx`: 699 | 700 | ```typescript 701 | import Link from "next/link"; 702 | import { Album } from "@/types"; 703 | 704 | export default function AlbumCard({ album }: { album: Album }) { 705 | return ( 706 | 707 |

708 |

713 |

{album.title}

714 |

715 | {album.metadata.artist.title} 716 |

717 |

718 | 719 | ); 720 | } 721 | ``` 722 | 723 | #### MusicLibrary Component 724 | 725 | Create `components/MusicLibrary.tsx`: 726 | 727 | ```typescript 728 | "use client"; 729 | 730 | import { useEffect, useState } from "react"; 731 | import { Album } from "@/types"; 732 | import { getAlbums } from "@/app/actions"; 733 | import AlbumCard from "./AlbumCard"; 734 | 735 | export default function MusicLibrary() { 736 | const [albums, setAlbums] = useState([]); 737 | const [loading, setLoading] = useState(true); 738 | 739 | useEffect(() => { 740 | async function fetchAlbums() { 741 | const albums = await getAlbums(); 742 | setAlbums(albums); 743 | setLoading(false); 744 | } 745 | 746 | fetchAlbums(); 747 | }, []); 748 | 749 | if (loading) return

Loading albums...

; 750 | 751 | return ( 752 |

753 | {albums.map((album) => ( 754 | 755 | ))} 756 |

757 | ); 758 | } 759 | ``` 760 | 761 | #### TrackList Component 762 | 763 | Create `components/TrackList.tsx`: 764 | 765 | ```typescript 766 | "use client"; 767 | 768 | import { useState } from "react"; 769 | import { Track } from "@/types"; 770 | 771 | interface TrackListProps { 772 | tracks: Track[]; 773 | onTrackPlay?: (track: Track) => void; 774 | } 775 | 776 | export default function TrackList({ tracks, onTrackPlay }: TrackListProps) { 777 | const [currentlyPlaying, setCurrentlyPlaying] = useState(null); 778 | 779 | const formatDuration = (seconds: number) => { 780 | const minutes = Math.floor(seconds / 60); 781 | const remainingSeconds = Math.floor(seconds % 60); 782 | return `${minutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`; 783 | }; 784 | 785 | const handlePlayTrack = (track: Track) => { 786 | setCurrentlyPlaying(track.id); 787 | onTrackPlay?.(track); 788 | }; 789 | 790 | return ( 791 |

792 |

Tracks

793 |

794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | {tracks.map((track, index) => ( 804 | handlePlayTrack(track)} 810 | > 811 | 812 | 826 | 829 | 830 | ))} 831 | 832 |

#	Title	Duration
{index + 1}	813 \| 814 \| {currentlyPlaying === track.id ? ( 815 \| 822 \| ) : null} 823 \| {track.title} 824 \| 825 \|	827 \| {formatDuration(track.metadata.duration)} 828 \|

833 |

834 |

835 | ); 836 | } 837 | ``` 838 | 839 | #### MusicPlayer Component 840 | 841 | Create `components/MusicPlayer.tsx`: 842 | 843 | ```typescript 844 | "use client"; 845 | 846 | import { useState, useRef, useEffect } from "react"; 847 | import ReactAudioPlayer from "react-audio-player"; 848 | import { Track } from "@/types"; 849 | 850 | export default function MusicPlayer({ track }: { track: Track }) { 851 | const [isPlaying, setIsPlaying] = useState(false); 852 | const [currentTime, setCurrentTime] = useState(0); 853 | const [duration, setDuration] = useState(0); 854 | const audioRef = useRef(null); 855 | 856 | useEffect(() => { 857 | setIsPlaying(false); 858 | setCurrentTime(0); 859 | }, [track]); 860 | 861 | const handleTimeUpdate = (e: React.SyntheticEvent) => { 862 | setCurrentTime(e.currentTarget.currentTime); 863 | }; 864 | 865 | const handleLoadedMetadata = (e: React.SyntheticEvent) => { 866 | setDuration(e.currentTarget.duration); 867 | }; 868 | 869 | const togglePlayPause = () => { 870 | const audio = audioRef.current?.audioEl.current; 871 | if (!audio) return; 872 | 873 | if (isPlaying) { 874 | audio.pause(); 875 | } else { 876 | audio.play(); 877 | } 878 | setIsPlaying(!isPlaying); 879 | }; 880 | 881 | // Add keyboard controls 882 | useEffect(() => { 883 | const handleKeyPress = (e: KeyboardEvent) => { 884 | if (e.code === "Space") { 885 | e.preventDefault(); // Prevent page scroll 886 | togglePlayPause(); 887 | } 888 | }; 889 | 890 | window.addEventListener("keydown", handleKeyPress); 891 | return () => window.removeEventListener("keydown", handleKeyPress); 892 | }, [isPlaying, track.id]); 893 | 894 | const formatTime = (time: number) => { 895 | const minutes = Math.floor(time / 60); 896 | const seconds = Math.floor(time % 60); 897 | return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`; 898 | }; 899 | 900 | return ( 901 |

902 |

903 |

904 |

909 |

910 |

{track.title}

911 |

912 | {track.metadata.album.metadata.artist.title} 913 |

914 |

915 |

916 | 917 |

918 |

919 | 924 | 946 | 951 |

952 |

953 | 954 | {formatTime(currentTime)} 955 | 956 |

957 |

961 |

962 | 963 | {formatTime(duration)} 964 | 965 |

966 |

967 |

968 | 969 | 977 |

978 | ); 979 | } 980 | ``` 981 | 982 | The MusicPlayer component includes several key features: 983 | 984 | 1. **Playback Controls**: Users can play/pause tracks using the play/pause button in the UI. 985 | 2. **Keyboard Controls**: The spacebar can be used to play/pause tracks from anywhere on the page, making it convenient for users to control playback without having to click the UI. 986 | 3. **Progress Bar**: A visual progress bar shows the current position in the track and allows users to see how much of the track has played. 987 | 4. **Track Information**: Displays the current track's title, artist, and album cover. 988 | 5. **Time Display**: Shows the current time and total duration of the track. 989 | 990 | The component uses the `react-audio-player` library for audio playback and manages its state using React hooks. It also includes keyboard event listeners for enhanced user experience. 991 | 992 | ### 5. Create Pages 993 | 994 | #### Home Page 995 | 996 | Create `app/page.tsx`: 997 | 998 | ```typescript 999 | import MusicLibrary from "@/components/MusicLibrary"; 1000 | import FeaturedPlaylists from "@/components/FeaturedPlaylists"; 1001 | 1002 | export default function Home() { 1003 | return ( 1004 |

1005 |

Welcome to Spotify Clone

1006 | 1007 |

1008 |

Featured Playlists

1009 | 1010 |

1011 | 1012 |

1013 |

Browse Albums

1014 | 1015 |

1016 |

1017 | ); 1018 | } 1019 | ``` 1020 | 1021 | #### Album Detail Page 1022 | 1023 | Create `app/albums/[slug]/page.tsx`: 1024 | 1025 | ```typescript 1026 | import { getAlbum } from "@/app/actions"; 1027 | import AlbumDetail from "@/components/AlbumDetail"; 1028 | 1029 | export default async function AlbumPage({ 1030 | params, 1031 | }: { 1032 | params: { slug: string }; 1033 | }) { 1034 | const { album, tracks } = await getAlbum(params.slug); 1035 | return ; 1036 | } 1037 | ``` 1038 | 1039 | #### Playlist Page 1040 | 1041 | Create `app/playlists/[slug]/page.tsx`: 1042 | 1043 | ```typescript 1044 | import { getPlaylist } from "@/app/actions"; 1045 | import PlaylistDetail from "@/components/PlaylistDetail"; 1046 | 1047 | export default async function PlaylistPage({ 1048 | params, 1049 | }: { 1050 | params: { slug: string }; 1051 | }) { 1052 | const playlist = await getPlaylist(params.slug); 1053 | return ; 1054 | } 1055 | ``` 1056 | 1057 | ## Running the Application 1058 | 1059 | Start the development server: 1060 | 1061 | ```bash 1062 | npm run dev 1063 | ``` 1064 | 1065 | ## Conclusion 1066 | 1067 | We've successfully built a Spotify clone using Next.js and Cosmic! Here's what we've accomplished: 1068 | 1069 | 1. Created a modern, responsive music streaming application 1070 | 2. Implemented a music player with playback controls and keyboard shortcuts 1071 | 3. Built a library system for albums and playlists 1072 | 4. Set up a headless CMS with Cosmic to manage our music content 1073 | 5. Created a beautiful UI with Tailwind CSS 1074 | 1075 | The application demonstrates the power of combining Next.js for the frontend with Cosmic as a headless CMS. We've shown how to: 1076 | 1077 | - Structure a Next.js application with TypeScript 1078 | - Manage state with React Context 1079 | - Handle server-side rendering and data fetching 1080 | - Create reusable components 1081 | - Implement audio playback functionality 1082 | - Style our application with Tailwind CSS 1083 | 1084 | ### Next Steps 1085 | 1086 | Here are some ideas to enhance the application further: 1087 | 1088 | 1. **Authentication**: Add user authentication to allow users to create and manage their own playlists 1089 | 2. **Search Functionality**: Implement a search feature to find tracks, albums, and artists 1090 | 3. **User Profiles**: Create user profiles with listening history and favorite tracks 1091 | 4. **Social Features**: Add the ability to follow artists and share playlists 1092 | 5. **Offline Mode**: Implement offline playback using service workers 1093 | 6. **Mobile App**: Create a mobile app version using React Native or Next.js mobile features 1094 | 1095 | ### Resources 1096 | 1097 | - [Next.js Documentation](https://nextjs.org/docs) 1098 | - [Cosmic Documentation](https://www.cosmicjs.com/docs) 1099 | - [Tailwind CSS Documentation](https://tailwindcss.com/docs) 1100 | - [React Audio Player Documentation](https://github.com/justinmc/react-audio-player) 1101 | 1102 | We hope this tutorial has helped you understand how to build a modern music streaming application. Feel free to customize the design and add more features to make it your own! 1103 | --------------------------------------------------------------------------------