So in the element, add the following code after the tag. We're going to go straight to the index.html and add a couple of script tags with links to the P5 files we need. We're going to import the P5 libraries now, but we won't do it using npm or yarn. P5 is a little tricky to get working in React and it took me a few different tries to figure out how to get this working. That's why we're going to be working with JavaScript files even though I usually work with TypeScript. I ran into issues where it kind of worked, but it also kind of didn't. We'll start by importing a few JavaScript libraries.īefore we get started, I just want to note that if you're following along with TypeScript, you might run into some issues with the P5 sound library. This is where we'll be focused since everything we're doing is on the front-end. The web directory holds all of the code for the React app. This is where you'll define the models for your database and the types and resolvers for your GraphQL server.

The api directory is where you will handle all of your back-end needs. The main two directories you'll work in are the api and web directories. This will generate a lot of files and directories for you. Enter fullscreen mode Exit fullscreen mode

How to create a visualizer