AI导哈

音乐发现应用

基于React和TypeScript构建的音乐发现应用，通过Spotify API浏览曲目、专辑和艺术家。

  • by muzamil077
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 muzamil077/supabase-mcp-server

使用说明



NextSound


A music discovery app built with React and TypeScript.
Browse tracks, albums, and artists using Spotify's API.



运作原理

NextSound根据您的设置以两种模式运行：

演示模式（不需要API）

没有API证书：

  • 2024-2025年排行榜冠军精选集
  • 工作后立即 git clone 和 npm install
  • 真实专辑封面和曲目元数据
  • 以Billie Eilish、Harry Styles、Morgan Wallen等艺术家为特色

优点：

  • 非常适合快速试用该应用程序
  • 不需要API设置
  • 从Spotify CDN加载图像
  • 展示完整的用户界面

使用Spotify API（推荐）

如果您拥有Spotify API证书：

  • 实时访问Spotify的音乐目录
  • 搜索数百万首曲目、专辑和艺术家
  • 最新流行歌曲和新专辑
  • 所有可用功能

要求：

  • Spotify API证书 .env 文件
  • 后端服务器正在运行以进行CORS处理

应用程序会自动检测使用哪种模式。


：摄像头：屏幕截图

英雄专区


首页



入门

你需要Node.js 18+和npm。

# Clone and install
git clone https://github.com/natashaongiscoding/music-app.git
cd music-app
npm install

# Start the app
npm run dev

打开 http://localhost:5173 -该应用程序可以立即使用演示数据。


想要实时Spotify数据？

  1. 创建一个 Spotify开发者帐户 并创建新应用程序
  2. 从应用程序仪表板获取您的客户端ID和客户端密码
  3. 复制 .env.example 到 .env:
    cp .env.example .env
  4. 将您的凭据添加到 .env （删除#注释）：
    VITE_SPOTIFY_CLIENT_ID=your_client_id_here
VITE_SPOTIFY_CLIENT_SECRET=your_client_secret_here
  5. 从后端开始：
    npm run dev:full

测试

# Run tests
npm test

# Run with coverage
npm run test:coverage

构建

npm run build
npm run preview

技术栈

  • 前端： React 18、TypeScript、Vite、顺风CSS
  • 国家： 带RTK查询的Redux工具包
  • 路由： React路由器v6
  • 动画： 帧运动
  • 后端： Node.js、Express.js（CORS代理）
  • API Spotify Web API
  • 测试： 维特斯特，剧作家

故障排除

常见问题

Spotify API的CORS错误

  • 问题： 由于CORS限制，API请求失败
  • 解决方案： 确保后端服务器正在运行(npm run dev:full 或 npm run server:dev)
  • 细节： 由于CORS策略，Spotify Web API无法直接从浏览器调用

缺少环境变量

  • 问题： 应用程序显示“没有可用的音乐数据”或API错误
  • 解决方案： 检查一下 .env 文件存在有效的Spotify凭据
  • 参考： 看 SPOTIFY_SETUP.md 用于获取API证书

端口冲突

  • 前端（端口5173）： 检查是否有其他Vite/dev服务器正在运行
  • 后端（端口3001）： 检查是否有其他Express服务器正在使用该端口
  • 解决方案： 终止现有进程或修改端口配置

构建/TypeScript错误

  • 问题： 构建过程中出现TypeScript编译错误
  • 解决方案： 跑 npm run build 查看具体错误详细信息
  • 常见修复： 确保安装了所有依赖项(npm install)

获取帮助

Built with ❤️ for music lovers everywhere

Discover your next favorite track with NextSound



相关 MCP