見出し画像

技育CAMP vol.5ハッカソン感想戦

こんにちは mahiroです

今回は技育CAMP vol.5に参加した感想記事を書こうと思いますー!

先に結果!!🎉

最優秀賞をいただきました🙌🙌
ありがとうございますーー!!!

サークルに良い結果を残すことができて何よりです


作ったプロダクトの紹介

このアプリを一言でいうと

「交流会の最初から最後までサポートするアプリ」です

こちらからアクセスできます

Meet Hack


アプリの使い方

※ このアプリはエンジニア同士の交流会での利用を想定しています

  1. まず「はじめる」ボタンを押してルームを作成します

  2.  続いて発行されたルームのURLを交流会に参加するメンバーに共有しましょう

  3. URLにアクセスして, ユーザー情報を入力します

  4. 全員の入力が終わったら交流会開始です
    botが司会進行してくれるのでそれに沿って自己紹介を進めます

  5. 交流会終了後, 最初に発行されたURLにアクセスすると, 交流会に参加したユーザーリストにアクセスできます


アピールポイント

1 . 交流会の進行

初めて同士の場では交流会の進行役が意外と決まりません…
そんな司会進行をアプリ内のbotが進めてくれます

かわいいbot


2 . URL の 利用方法について

最初に発行されたURLが

  • 交流会前ユーザー情報入力のページに遷移

  • 交流会後ユーザー情報の一覧ページに遷移

1つのURLで交流会前から交流会後まで完結します

交流会後にアクセスすると参加者が表示される


技術的なお話

フロントはvercelに、サーバーとDBはherokuにデプロイしました


今回は珍しく(?)バックエンドのAPIをMVCアーキテクチャで実装しました

MVCを採用した理由は, チームにバックエンド初心者がおり, わかりやすいアーキテクチャ を使いたかったためです

といっても一般的なMVCとは少し変えてます

以下が今回のMVCのそれぞれの責務です

  • Model (ビジネスロジック)

  • View (クライアント(JSON)で扱えるように変更する)

  • Controller (ModelとViewの制御)

Viewのみ責務が少し違います


以下がリポジトリになります
一部時間の都合上ハッカソンクオリティのコードになってます……..


技術的な挑戦

参加者待ちのページにwebsocketを導入しました

websocket
参加者待ち…

参考にする記事が少なかったのでなかなか大変でした…

特に悩んだのが Hub の利用方法についてで , 今回はURLごとに Hub を用意する形で実装しました

Hubのイメージ

他に良い方法を知っている方がいましたら, お伺いしたいです🙏


導入して嬉しかったこと

Figmaでのデザインです

フロントチームがデザインを担当してくれました
ありがとうございます!!

これにより, チーム全体でアプリやフローのイメージができました

Figma


技育展に向けての今後の予定

  • QRコードでルーム入室

  • バックエンドのアーキテクチャのリファクタリング
    (クリーンアーキテクチャにしたい)

  • フロントエンドのリファクタリング

  • 交流会進行botの機能追加
    よりスムーズに, わかりやすくする

  • デプロイをAWSへ

まだまだあると思いますが, ぱっと思いついたのはこの辺です


今後はプロダクトをさらに洗練させ, 実際の交流会の場で使いたくなるアプリを目指します🔥

秋ごろには追加機能なども含めて完成すると思うので , またtwitterなどで告知する予定です

是非使ってみてくださいー!


最後に

今回もイベント後半に疲れで熱を出してしまいましたが, 無理に頑張ったというよりは楽しくて開発をやめられませんでしたw

このようなイベントを企画してくださった運営や審査員の皆さん, 一緒にイベントを盛り上げてくださった学生の皆さんも本当にありがとうございます!!

今後もDo'erとしてほかのメンバーが参加すると思うので , 何卒よろしくお願いいたします!


Do'erに興味がある方は以下のサイトをご覧ください
(ちゃっかり宣伝)


この記事が気に入ったらサポートをしてみませんか?