ShareTune

お気に入りの音楽を見つけ、思いを共有するSNS

Nuxt.js と Firebase を利用した SPA です。

テストアカウント

下記情報でログインできます。

• メールアドレス: sharetune.app(@)gmail.com

• パスワード: test123

開発

# install dependencies
$ yarn install

# serve with hot reload at localhost:3333
$ yarn dev

環境変数の設定

export FIREBASE_API_KEY=
export FIREBASE_AUTH_DOMAIN=
export FIREBASE_DATABASE_URL=
export FIREBASE_PROJECT_ID=
export FIREBASE_STORAGE_BUCKET=
export FIREBASE_MSG_SENDER_ID=
export FIREBASE_APP_ID=
export FIREBASE_MEASURE_ID=

firebase functions:config:set spotify.client_id={CLIENT_ID} 
firebase functions:config:set spotify.client_secret={CLIENT_SECRET}

デプロイ

Firebase Hosting

master ブランチに対しての push をトリガーにして CI (GitHub Actions) によって、Firebase Hosting にデプロイが行われます。

Cloud Functions

firebase deploy --only functions

Cloud Firestore

firebase deploy --only firestore:rules firestore:indexes

コーディング

• SFC の記述に関しては、Vue.js スタイルガイド に従う

• SFC 内の script は lang="ts" として TypeScript を使用する

  • Vue.extend() のシンタックスで記述する

• SFC 内の CSS の記述に関しては、Scoped SCSS を使用した上で、RSCSS の記法に従う

• SFC 以外のロジックに関しては TypeScript (.ts) を使用する

依存ライブラリ

使用している主なライブラリについて、下記に示します。

Nuxt

• @nuxtjs/pwa
• @nuxtjs/svg-sprite
• @nuxtjs/style-resources
• @nuxtjs/color-mode
• dayjs

Cloud Functions

• axios