Skip to content

Rails×Nuxt製プロテイン口コミ共有サービス「SuppleBox(サプリボックス)」

Notifications You must be signed in to change notification settings

yuki0920/supplebox

Repository files navigation

SuppleBox

GitHub issues GitHub closed issues GitHub top language

「プロテイン選びで失敗したくない」方に向けたプロテイン特化型口コミ共有サービスです。

デモアカウント

メールアドレス:test@supplebox.jp
パスワード:test

技術構成

  • API(Ruby 3.0, Rails 6.1)
  • APIインフラ(Heroku)
  • フロントエンド(TypeScript 4.5, Nuxt.js 2.15 ※Composition API利用)
  • ホスティング(Netlify)
  • 開発開発(Docker, Docker Compose)
  • データベース(PostgreSQL)

テスト・解析

  • APIテスト(RSpec)
  • カバレッジ計測(SimpleCov)
  • 静的解析(RuboCop, Brakeman, ESLint)
  • N+1(Bullet)
  • CI/CD(CircleCI, GitHub Actions, Heroku Pipeline)
  • API スキーマ定義(OpenAPI Specification, Committee::Rails)
  • API クライアント生成(OpenAPI Generator)
  • アクセス解析(nuxt/google-analytics)

使用機能と技術

API

  • 画像アップロード(Amason S3, CarrierWave)
  • ページネーション(Kaminari)
  • 問い合わせメール送信(ActionMailer)
  • アイテム情報取得(Amazon Product Advertising API)
  • 認証(bcrypt)

フロント

  • サイトマップ(nuxtjs/sitemap)
  • SEO(Vue Meta)
  • デザイン(BootstrapVue, Sass)

プロモーション

プロテインを買う方が、1 人あたりかけるお金は 1 ヶ月 3,000 円から 10,000 円ほど。 送料がかかるため、まとめ買いをするケースも多いです。

それだけ大きな買い物にも関わらず、「思っていた味と違った」、「前飲んでいたプロテインの方が安いしおいしかった」などど、失敗しまうケースがよく生じてしまいます。 こうしたプロテイン選びのミスは、金額面の損失に加えてトレーニングへのモチベーションにも直結するため、健康面にもデメリットとなります。

当サービスは、リアルなプロテインの口コミを集中させることで、初心者から上級者まで、自分にあったプロテイン選びができるようサポートします。

開発しながら得た Tips

環境構築手順

  1. イメージを生成する
$ docker-compose build
  1. Bundle Install
$ docker-compose run --rm web bundle install
  1. データベースをセットアップする
$ docker-compose run --rm web bundle exec rails db:reset db:seed
  1. npm ライブラリインストール
docker-compose --rm web yarn
  1. コンテナを起動する
$ docker-compose up
  1. RSpec を実行する
$ docker-compose run --rm bundle exec rspec
  1. RuboCop を実行する
$ docker-compose run --rm bundle exec rubocop

その他

Swagger 起動

docker-compose で起動している

http://localhost:8080 で確認可能。

OpenAPI Generator による Client の型生成

docker run --rm -v "${PWD}:/local" openapitools/openapi-generator-cli generate \
  -i local/openapi/openapi.yaml \
  -g typescript-axios \
  -o local/front/types/typescript-axios

ローカル上のCircleCI 実行

RSpec を実行する

$ circleci local execute --job rspec

RuboCop を実行する

$ circleci local execute --job rubocop

About

Rails×Nuxt製プロテイン口コミ共有サービス「SuppleBox(サプリボックス)」

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published