DripWave

A web app to search for artists and preview their music.

Check out the app at: 💧 dripwave.benrogerson.dev

Early state chart: 📊 Early DripWave planning @ stately.ai

This SPA was bootstrapped with Vite using their React + SWC template. Track data is grabbed from the Spotify Web API using the TS Spotify Web API SDK. Data fetching and caching is handled by TanStack Query. The responsive UI uses CSS container queries and is built with React and TailwindCSS with animations from Tailwind CSS Animate. It is currently deployed on Vercel.

Features

• Play/Pause track preview
• Time seeking track preview
• Track playing / Top track indicators
• Playback during new search (no interruptions)
• Maintain url state (search keywords + selected track)
• Mobile: Tap a track to play
• Desktop: Single click a track to open the track detail
• Desktop: Double click a track to play

Future features

• Add next/previous track buttons
• Add playlist functionality
• Switch to Spotify auth
• Add customized track/artist suggestions
• Add unit tests for the player
• Add E2E tests
• Performance improvements (re-rendering)

Run this project locally

1. Clone the project:

npx degit https://github.com/ben-rogerson/DripWave DripWave

2. cd into the project and install the dependencies:

cd $_ && npm install

3. Duplicate and rename env.example to .env.

4. Create a new Spotify app via the dashboard
   - "App name" and "App description" can be anything
   - For "Redirect URI" you can enter http://localhost:5173/
   - For "Which API/SDKs are you planning to use?", choose Web API.

Note: When trying to add the app, if you see the error: "You need to verify your email address before you can create an app." then head to the dashboard and you’ll see a prompt to start the verification process.

5. Open your new Spotify app, hit "Settings" then "View client secret".

6. Add your "Client ID" and "Client Secret" to your new .env file.

7. Then choose one of these tasks:

Start the development server:

npm run dev

Or build and preview the project:

npm run build
npm run preview

Supported browsers

Tested in:

• Chrome (122)
• Firefox (123.0.1)
• Safari (17)
• Edge (119)

Also tested on mobile Chrome and Safari.

Technologies

• Vite - Frontend tooling
• React - Framework
• Million.js - Faster React compiler
• Wouter - Tiny router for React
• TailwindCSS - Styling framework
• TanStack Query - Data fetching and caching
• Spotify Web API SDK - TypeScript - Data fetching
• React H5 Audio Player - Cross browser, A11y supported HTML5 audio player