forestheims/synethsizer

React Template for Three.js

Synethsizer

A mesmerizing visual synthesizer.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

Intent:

• Create something I enjoy, that I can share with others!
• Create this as a template repo for others to create and share 3D animations online!

This is a a refactoring / re-creation of a previous project I was working on in JavaScript, using reacts context hook for state management.

I decided to learn and utilize some of the "current and modern" web dev frameworks and libraries I had not explored yet, such as Next.js, Zustand, react-three-fibre, Tailwind, and TypeScript.

(back to top)

Built With

• 
• 
• 
• 
• 

(back to top)

Getting Started

Instructions on setting up your project locally.

To get a local copy up and running follow these simple example steps.

Prerequisites

Things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/forestheims/synethsizer.git

2. Install NPM packages

   npm install

3. Run on your computer

   npm run dev

4. Open on a local browser

   http://localhost:3000

(back to top)

Roadmap

• Harmonic Oscillator re-created
• Controls use Zustand for state management.
• Rainbow color mode
• Audio responsiveness
  • Request access to client microphone
    • Web Audio API

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Forest Heims - [email protected]

Project Link: https://github.com/forestheims/synethsizer

(back to top)

Acknowledgments

(back to top)

synethsizer's Issues

Type Check Error on Build Currently Ignored

See next.config.js

The follow has been added to nextConfig in order to make the build pass, while ignoring the Type Errors caused by something that came with the Next.js Framework. This is seems to defeat the purpose of using Types, so I do want to remove this snippet, and refactor what's needed to fix the Type Errors on build.

typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },

Much appreciation to anyone who can help here, as I am not yet fluent nor familiar enough with TypeScript.