git-push-hackathon
git-push-hackathon copied to clipboard
ca-archived
$ git push hackathon :computer:
##### Appeal Point / アピールポイント 期限を過ぎたPRとなってしまい申し訳ありません． 期限を過ぎた上に稚拙なコードになっていてPRを送るか迷ったのですが，せっかくの機会なので提出させていただきました． 現状 css などデザイン部分や UX の向上に関しては着手できていません． プレイリスト一覧表示，動画一覧表示，プレイリストの追加，動画の追加に関して必要最低限の実装となっています． React + Reduxを使ってstoreでapiから取得したデータを一元管理しました． また，コンポーネントはできるだけPresentational ComponentとContainer Componentに分けるようにしました．アクセストークンはサーバ側で取得し，Cookieにてフロント側へ持たせるようにしています． ##### Checklist / チェックリスト - [x] Your project fulfills the minimum...
##### Appeal Point / アピールポイント 選んだ動画と関係のある動画を集めてplaylistにする＝「curation」する、というコンセプトで制作しました - vue3.0でデフォルト導入されるcompositionAPIを使った実装を行いました。 - 気持ち程度に型がついています - atomic designを意識した設計を行っています - cssフレームワークは使っていません - 認証トークンと集めた動画が消えないよう、localstorageにて永続化をしています（nuxtclientinitにて行っています） ##### Checklist / チェックリスト - [ ] Your project fulfills the minimum requirements....
##### Appeal Point / アピールポイント アプリやサービスを開発する際の大前提として誰かに使われないと意味がないと思っています。 そのため、まずは Youtube のプレイリストを使っているかや、使っている場合はどのようにしているかを周りの友達などにヒアリングしました。 結果として、今回のアプリを使う対象を - 中学生から大学生 - サークルなどでダンスをしている としました。 今回のアプリを一言で表すと「ダンスの練習に使える音楽連続再生アプリ」とです。 これは通常のYoutubeのプレイリスト再生ではローディング時間を要するため、一瞬間ができるとともに、音楽は最初から最後までを流すことしかできません。 その問題を解消するために、各動画ごとに再生開始時間/終了時間を設けることができるようにするとともに、再生開始時間より少し前にprefetchさせることでローディング時間を無くします。 また、一つのRootStoreから各Storeを生やし、さらにそこからAPIへリクエストを送る流れにしたため拡張性を持つ設計となっていると思います。 またRestClientをそれぞれに作ることで、より簡単にAPIリクエストを投げることができるようになっています。 そして、対象が若い世代であることから、webアプリケーションでありながらモバイルファーストでデザインしています。またCSSフレームワークは使わず、フルスクラッチで実装しています。 残念ながら、今回の開発では時間が足りなく、連続再生や、時間の永続化、PWAなどに着手できず後悔のあるハッカソンとなってしまったので、終了後も開発を続けたいと思います。 ビルド方法は `kobakazu0429/client/README.md` を見てください。 ##### Checklist / チェックリスト -...
