Teammates and I took a working React web app and had to learn React very quickly enough to create our own additions to the app.
I made a Drum Set and Fast Fourier Transform Visualizer (an Equalizer Visualizer to show amplitudes of different frequencies). Located at
client/src/instruments/Natedude.tsxclient/src/visualizers/Natedude.tsx
CSC 600 musical application. Get ready to shred.
The client contains the code which you will modify as part of the course. It constitutes the frontend (UI) portion of this web application.
In the client directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
This is a combination of npm run build and python3 http.server. This will start a new web server that hosts your app at http://localhost:3002. Rather than talking to your local environment, it will talk to a live, production server so you can jam with your group.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
The server contains the backend code which. It is included here as a reference and as a pedagogical tool. Peruse the code to figure out how it works and how you ought to call the API. You will run a version of the server locally for testing purposes. Once you're ready to jam with your classmates, you will switch to talking to a production server. See npm run prod for details.
In the server directory, you can run:
Runs the server in development mode.
The server will restart if you make edits. You will also see errors in the console.