🚀

Getting started

1. Git clone this repository
2. Run yarn install -dev
3. Run yarn dev
4. Go to localhost:3000, you will see a copy of this page running locally

🚧

Project Structure

The project is set-up with all the necessary packages installed for you to be able to complete the tasks. It uses Next.js framework as it's base, but familarity with it is not necessary.

You can breakdown your code in files as you desire, include all your custom components in components/TaskPlayground

You can find this file in components/TaskPlayground/TaskPlayground.tsx and modify to start on the task. Try modifying this file, Next.js will hot-reload the page for you.

⚠

Heads up

WaveSurfer is a great library and Next.js is great framework, but together they have a small issue. Next.js renders all the code on server side first, and then hydrates it on the front-end. This works great to generate static parts of the website, and if it detects the website has no dynamic elements, it will generate a static page. This causes a small problem when rendering WaveSurfer, since it is not designed specifically for server side rendering, we can get an error when trying to import it. To get around the issue, we can import the modules when the component is mounted or when window is available.

Example code:

The above code can be surrounded with an if statement for window or handled on mount. Once the page is hydrated on the client-side, you can import the module and start using it.