こちらは「Coooms」のフロントエンドのリポジトリになります。バックエンドのリポジトリはこちらです。

Coooms

概要

現在は自然音、雨音、波音、しゃろう BGM の 4 種類の BGM を再生できます。ログインすると勉強時間の合計が見れるようになります。

▼ サービス URL

https://coooms.com/
ゲストログインは以下のアカウントをご利用ください。
E メール: guest@email.com
パスワード: Guest000/

使用技術

フロントエンド: HTML / CSS / JavaScript / React
バックエンド Java / Spring
インフラ AWS(Route53 / Certificate Manager / ALB / VPC / EC2 / / RDS MySQL / S3) / Nginx

インフラ構成図

ER 図

なぜ作ろうと思ったのか

私は勉強をするとき youtube で作業用 BGM を聞いて勉強するのですが、youtube だとおすすめの動画や広告などで集中力が切れることがよくありました。そこでできる限り集中力を落とさずシンプルに BGM だけ聞けるサービスがあればいいのにという思いがあり Coooms と言うサービスを開発しました。

工夫した点

・オーディオビジュアライザーやボタン、サイドバー、ページ遷移にアニメーションを設定し、モダンな Web デザインにしたこと。
・ユーザーの認証に JWT を使用したこと。

大変だった点、その対策

複数の BGM をループしながら再生する機能の実装するときに音声がならなかったり複数の音声が混ざったりするというバグが発生しました。私はこういうエラーが出ないバグが発生したときの大体の原因が使っている技術の理解の浅さだと思います。なので今回でしたら React のコンポーネントの動きや new Audio の使い方などをもう一度勉強しなおすこで解決しました。
もう一つは spring security で認証機能を実装することです。spring security は全体像が広かったりセキュリティの知識を必要とするので理解するのにとても時間がかかりました。ですが根気強く何回もドキュメントをみたりセキュリティの基礎知識を勉強したり実際に手を動かして動作を確認することで実装することができました。