初めてのハッカソン振り返り①　　〜Progateハッカソン powered by AWS & Supabase〜

# はじめに
事前開発期間:8月21日〜8月30日,本番開発期間:8月31日〜9月1日
〜Progateハッカソン powered by AWS & Supabase〜に参加しました。
基本的にオフラインで参加するイベントだったのですが,台風10号の影響で現地（東京）に行くことができず,泣く泣くオンラインで参加することになりました。
今回はその振り返り記事を書いていきたいと思います。

https://progate.connpass.com/event/325329/

# 参加前のレベル感
#### 使用言語
HTML・CSS・JavaScript（かろうじてjQueryが使える程度）
Python（データ分析系のライブラリやAPIの呼び出しで使ったことがある程度）

#### その他
Gitの使い方がうろ覚え,インフラ周りは完全未経験

# スケージュール
#### ８月２１日
全体キックオフミーティング（概要説明・スポンサー紹介・チーム発表）,１回目グループミーティング（自分は野良で参加しました,全員お互い初対面の方々で５人チームになりました）
自己紹介,FigJamでアプリのアイディア出し,アイディア決定（絞った後に多数決で決定）,使用技術選定,要件定義,役割分担,スケジュール調整

  - 感想
いや初心者大歓迎のハッカソンと言いつつ,皆さん全然初心者ではないじゃないですか〜ﾔﾀﾞﾓｳ(正直,めっちゃ助かりました,多分僕みたいな人が５人いたら右往左往するしかなかったと思うので）
自己紹介を聞きながら,僕なんかが参加して大丈夫か？チームに貢献できるのか？と不安になっていました。

#### ８月２３日
２回目グループミーティング
Docker DeskTop,Node.jsのインストール,GitHubのアカウント共有
  - 感想
  アプリのデザインカンプを作ろうという話題が出て,自信はなかったですが立候補して明日のグループミーティングまでにある程度Figmaで作ることになりました。
今振り返ると「どこかでチームに貢献しないと,自分の存在意義ないやん？」という思いが自然と立候補に繋がったのかな？と思います。↓インストールする際はこちらの記事を参考にしました。

https://qiita.com/cleyera_f/items/bdd3d33f13527604a663

https://qiita.com/sakana_gao/items/7440df68734f3d5ce772

#### ８月２４日
３回目グループミーティング
AIを駆使しながら,デザインカンプを仕上げていきました。途中で無料分のクレジットを使い切って急に生成できなくなったことには少し焦りましたが,チームメンバーの手助けもあり,概ね完成させることができました。

  - 感想
  １,２回目に中心となって発言していたメンバーが途中参加することになったので、ディスコードで初っ端の声かけをどうするのか迷いました。
  （今さら陰キャ属性が出てきました,こんばんは？お疲れ様です？こちらの声聞こえていますか？どれが無難かな〜と３分くらいマイクオフにして悶々と悩んでいました）
あまり出来栄えの良くないデザインカンプでも皆さんから感謝されて,嬉しい気持ちがありつつももっと自分でデザインできるようになりたい！と思うようになりました。↓これめっちゃ便利でした

https://www.usegalileo.ai/explore

#### ８月２６日
４回目グループミーティング
外出する用事があって,帰宅後即寝落ち

  - 感想
  はい、やらかしました。用事で遅れて参加すると言っておきながら完全にミーティングをすっぽかしてしまいました
  それぞれの役割に分かれて開発が始まっているところで迷惑をかけたので、絶対挽回しようと心に誓いました。

#### ８月２７日
５回目任意参加ミーティング
manim voiceoverの調査,manimの調査,既存のmanimの動画で良さそうなものを探す,Reactの使い方を学び始める

  - 感想
  インプットが中心だったので,作業自体は比較的楽だと感じていました。ただ,メインの機能やバックエンドの部分を他のメンバーが頑張って作っていて,話している言葉の意味が全然分からなかったので,自分の実力不足を心の中で嘆いていた時間でもありました。
  

https://docs.manim.community/en/stable/examples.html

https://manim-examples.github.io/

#### ８月２８日
６回目グループミーティング
manimのプラグインmanim voiceoverで音声付きにできるか試す
Amazon Pollyを使用してできないか試すも動画に合わせた音声を流すことができなかったため断念
  - 感想
  悔しかった。途中からChatGPT頼りになっていてあまり意味のない時間を過ごすことになった。
  APIキーを取得して,テキストを読ませることまではできたのでまたリベンジしたい。

#### ８月２９日
７回目グループミーティング
プロファイル画面で追加したい以下の項目をReactで実装すること
・パスワード変更 
・投稿した動画リスト
・いいねした動画リスト 
・サインアウトボタン
・アカウント削除ボタン
  - 感想
  少し手応えを感じた。事前に勉強していたReactの知識を実践で試しながら確認することができた。台風１０号の影響で,現地に行くことができないと分かり,ショックを受ける。

  <p style="text-align: center;">
 <img width="200" alt="2024-08-29_23.20.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677649/ec9b25c6-4d5f-4bed-f68a-dab4f6b5585c.png">
<img width="200" alt="2024-08-29_23.32.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677649/a079fc3e-dc5b-e841-ab94-ee78b7b8a4e1.png">
</p>

#### ８月３０日
８回目グループミーティング
TypeScriptでManimの使い方解説ページ作成,Sidebarにリンクを追加,文法を勉強しながら実装。
  - 感想
  難しいけど,TypeScriptの利便性を感じた。CSSで設定していた装飾が一括でできるって素敵だな〜と思った。

<img width="200" alt="2024-08-30_22.00.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677649/c718bcc7-a780-8e81-ab5a-b8452199dc83.png">

#### ８月３１日
ハッカソン本番１日目
AWS Amprify,Supabaseのハンズオン参加,Manimの使い方解説ページ作成続き,Gitを使ってブランチを切ったり,コミットしたりした。

  - 感想
  やっとGitの使い方についてある程度理解できた気がする。ちゃんと成長しているんだな〜と感じて少し嬉しくなる。↓以前,Gitの勉強会に参加した時の振り返りはこちら

https://qiita.com/07aikiro/items/9ef0c1ecf0a898e02dd2

#### ９月１日
ハッカソン本番２日目
Manim動画作成,Manimの使い方解説ページ完成,プルリクエストを送る,現地で成果物発表している仲間へ念を送る。

  - 感想
  Manimの動画パスを間違えていて正しく直すまで時間がかかってしまいましたが,なんとか完成させることができました。１０日間ずっと取り組んでいた割には,成果物発表が終わるのはあっという間だったな〜と感じました。
  
![スクリーンショット 2024-09-02 13.40.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677649/98ebc66c-8a00-8094-6dcf-7b755e3c600b.png)

# 学んだこと
Figmaを用いたWebアプリデザイン作成
React,TypeScript,Node.js,PythonライブラリManimを用いた動画生成
GitやDockerを用いたチーム開発
一歩踏み出す勇気を持つこと


# 成果物

ハッカソンの時間内ではデプロイすることができませんでしたが,チームで話し合った結果,追加機能を加えた上でデプロイするところまでは一緒にやろうということになりました

https://topaz.dev/projects/b42a5a164623f875a260

# 全体を通した感想
AWS & Supabaseハッカソンだったのに,全然AWS,Supabaseを触れていないのはちょっと反省ポイントですね。
ただ、とにかく素晴らしいメンバーに恵まれました。皆さんの技術力にはもちろん心強く感じていましたが、それ以上に人柄に救われた部分が大きかったです。雑談の際に話すタイミングを逃してしまった時も、適度に話題を振っていただき、また技術面で理解できていない点についても丁寧にご説明いただき、本当に皆さんにフォローしていただきました。心から感謝しています。
次回のハッカソンまでに,データベースを少しは触れるように頑張ります。