Hum

A social, cross-platform music streaming hub

Contribution guide

The contribution process is...

1. Make an issue (or multiple issues)
2. Make a PR that references that issue
3. Get it code reviewed by someone on the team for major additions/additions with merge conflicts, and address any comments
4. Merge into master (with merge commit)

Code style guide

• Use Fullstack's linter as a base, but change indent and semi rules (below)
• Use autoformat on save
• Use semicolons
• Two spaces
• Trailing commas where possible
• Always use ES6 syntax where possible, e.g. const or let over var
• Use require and module.exports in .js files
• Use import and export in .jsx files, unless require makes for cleaner code
• Put import/require statements at top
• Put the default/module export at bottom
• Use PascalCase for exported class component files, else use camelCase to name files
• Define container components and presentational components in separate files
• Define react components as pure functions (instead of classes) whenever possible

Commit message guide

• Types:

  • chore
  • docs
  • feat
  • fix
  • refactor
  • style
  • test

• Message in present tense

• Example: feat: add login button or refactor: association between users and playlists

Technologies / Languages Used

• Javascript
• React-Native
• Firebase/Firebase SDK
• Swift
• Spotify API
• MusicKit SDK
• OAuth/Passport

Hi, I'm 🔥🔥firebones🔥🔥

I'm a happy little skeleton who is totally on fire(base)!

You can clone me to use as a starter on your projects. I have React and Firebase, and some examples of how to put them together.

I need node >= 7.0.0

If you don't have it, I'll complain and tell you how to install it.

1. Make me into something!

We recommend that you clone, not fork, this repo – unless your intention is to develop Firebones proper instead of using Firebones as the starting point for your own application.

Start by doing either of the following:

• Create a GitHub repo and clone it, or
• git init in an empty directory on your machine.

After you have a repo on your machine:

git remote add bones https://github.com/FullstackAcademy/firebones.git
git fetch bones
git merge bones/master

And then you'll have me! If I change – which I probably will – you can get the most recent version by doing this again:

git fetch bones
git merge bones/master

2. Install the Firebase command line tools

You'll want this globally:

npm install -g firebase-tools

If you just installed them, you'll need to log in:

firebase login

2. Start my dusty heart

Short and sweet:

npm install
npm run dev

The dev script runs webpack, firebase serve, the linter, and the tests. You can run these in separate terminals if you prefer:

npm run build-watch   # webpack

firebase serve        # Serve the app on port 5000

npm run test-watch    # Watch tests

npm run lint-watch    # Watch lint

3. Tell me about your Firebase

By default, I'm pointed at the firebones firebase. That might be nice for exploring, but soon you'll want to create your own.

Go to the Firebase console and create a project. Go to Overview in that project's console, and click "Add Firebase to your web app".

Copy and paste the config from there into fire/index.js. You don't have to copy the call to initializeApp, I've already got that.

Then, in your code, you can import firebase like so:

import firebase from 'APP/fire'

4. Deploy

The first time you deploy, you'll need to tell firebase which project to use:

firebase use --add

Then, and every time thereafter, just say,

firebase deploy

And I'll be deployed to Firebase hosting.

My anatomy

/app has the React setup. main.jsx is the entry point.

/fire has the Firebase config.

/functions is where your cloud functions live.

/demos has some demos (currently just a little scratchpad).

/bin has scripts. (Right now it has one script that creates a useful symlink.)

Conventions

I use require and module.exports in .js files.

I use import and export in .jsx files, unless require makes for cleaner code.

I use two spaces, no semi-colons, and generally prefer a less strict version of NPM's funny coding style. My lint config is in eslintrc.js.