evalarumbe / tone-reactor

Tone Reactor

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Required env variables

• RANDOMIMAGE_API_KEY Register for a free one at api-ninjas.com
• FREESOUND_API_KEY Register for a free one at freesound.org and see their token authentication docs.

Inspiration

• Tone.js in React project
• Repos using Freesound
• NextJS App router API Data Fetching in Server & Client Components!
  • Might I want to extract my own fetch abstraction with error handling? 4:09
  • Could I make better use of ts.config? 4:56

Data sources

• freesound.org
• Random Image API
• JSON placeholder

The shape of fetched data is described in vendor-types/. These files were generated by copy/pasting an example response into JSON to TypeScript.

Manually installed packages

Package	But why
server-only	Security: Produce a build-time error if server-intended modules are accidentally running on the client. Recommended in Next docs.

Run a CORS proxy locally alongside this project

The fetch URLs in this app are given like so:

const endpoint = 'https://some-api-service/data/';
const proxy = 'localhost:8080/';

fetch(`${proxy}${endpoint}`);

Here are the steps to recreate this CORS proxy locally:

Clone the CORS Anywhere repository from GitHub: git clone https://github.com/Rob--W/cors-anywhere.git Navigate into the cloned directory: cd cors-anywhere Install the dependencies: npm install Start the server: node server.js

This will start a CORS Anywhere server on your local machine, usually on port 8080.

Alternatively, you may prefer to run your own CORS proxy (with the risk that entails), and update the proxy URL to point to your own server.

Troubleshooting

• Error: Cannot find module 'stream/web'

  • Your version of Node is too old.
  • nvm ls-remote --lts to see the name of the latest available version
  • nvm install <name of the latest version>

• Error: [Error: ENOENT: no such file or directory, open '<project dir>/.next/BUILD_ID']

  • This error showed up when I ran npm start instead of npm run dev which is indicated above