Giter Site home page Giter Site logo

audiorate's Introduction

This project was bootstrapped with Create React App.

General Info

RateAudio is application build on React, Firebase Functions and Database. for voting songs in collection. It picks X songs from collection to vote on and display result if user successfully posted a vote.

Setup Firebase

To run application follow steps below:

  1. Create Firebase project on https://firebase.google.com/

  2. In your project:

    • Select Authentication -> Sign-In method and allow login with Google
    • Select Database and create firestore database and setup database access rules
  3. Install node.js if you don't have it already. You can check if is installed typing node -v

  4. Install Firebase CLI npm install -g firebase-tools. You can check if is installed typing firebase --version.

  5. Login to firebase CLI firebase login

  6. Clone this repository and go to cloned directory cd audioRate

  7. Install Google Functions dependencies: npm --prefix functions install

  8. Init project by typing firebase init and select everything by typing 'a'. Don't overwrite files if asked.

  9. (Optionally) Setup emulators for hosting and functions. It provides environment for testing and debugging

  10. Select existing project

  11. Bind downloaded repository with your created firebase project: firebase use --add and select you project

  12. To make functions accessible your firestore database go to firebase console -> settings -> service accounts and generate new private key at bottom.

  13. Place downloaded file in functions directory and rename it to credentials.json.

  14. Run firebase serve --only functions

Setup React

  1. In firebase console add your firebase app to web app.

  2. Go to settings and choose your web app and select configuration

  3. Copy credentials and go to project's src directory.

  4. Paste credentials in firebase_credentials.js and type on last line export default (variable config name). In most cases 'firebaseConfig'

  5. Install dependencies npm install

  6. Make .env file in project root directory

    • Paste function url in .env file in REACT_APP_API_URL
    • Make list of audio files separated by space. By default should look like this REACT_APP_SONGS_LIST=CantinaBand3.wav preamble10.wav
  7. Type npm start to run app locally and go to http://localhost:3000 once it's done.

Deploy Project

  1. To deploy function type firebase deploy --only functions
  2. Select hosting firebase and register application.
  3. Copy url of deployed function and replace it .env file. Url can be found in firebase console https://console.firebase.google.com/ under Functions tab
  4. To deploy app type: npm run build and then firebase deploy --only hosting

audiorate's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.