Color I Sing is a digital coloring book that lets your voice be the paint brush. Using the Web Audio and Canvas APIs, this program analyses your voice and colors in the page based on the notes you sing. Users can share their creations via social media or save them to their account.
Choose from an list of coloring templates and color palettes. Stop coloring at any time by clicking the STOP button. Download finished images, save them to your account, or share them on social media. Clear image and start over.
Choose your vocal range (Alto or Soprano) Upload a custom coloring template or color palette Color in the template section-by-section via mouse click
- Front End: React, Redux, CSS, Java Script, Canvas API, Web Audio API, image-js
- Back End: Node, Express, PostgreSQL, Google Oath
-
Clone this repo to your desktop
-
After cloning, go to its root directory and install the dependencies:
npm install
-
Create a Postgres Database:
colorising -
Create a file called secrets.js in the project root
- This file is .gitignore'd, and will only be required in your development environment
- Its purpose is to attach the secret env variables that you'll use while developing
- However, it's very important that you not push it to Github! Otherwise, prying eyes will find your secret API keys!
- It might look like this:
process.env.GOOGLE_CLIENT_ID = 'hush hush'
process.env.GOOGLE_CLIENT_SECRET = 'pretty secret'
process.env.GOOGLE_CALLBACK = '/auth/google/callback'
- To use OAuth with Google, complete the step above with a real client ID and client secret from Google
- You can get them here: https://console.developers.google.com/apis/credentials
- Once the dependencies are installed, start to start the application:
npm run start-dev
-
You will then be able to access it at localhost:8080
-
Enjoy!
- Colleen Higgins ❤️
- Alena Loffe ❤️
- Kistina Gurung ❤️