📝 概要

文章を送信するとAIが褒めてくれるチャットアプリケーションです!!! 頑張ったこと・自慢したいことからネガティブなことまで 何を送ってもポジティブにあなたを褒めてくれます！

世の中には自分が気づいていない内に達成しているようなことがあります！！そんなものにも気付ける素敵なチャットアプリとなっています！！ (チャット以外に隠し機能もあります！ぜひ探してみてください！！)

ちなみに上の写真は徹夜で設計頑張った証です！！！ Topa'sとgithubのコードみてください！こだわりと努力の証が詰まってます！

🛠️ 使用技術

💻 機能

スタート画面

後ろのアニメーションにこだわりました！アプリの概要の見やすさにもこだわりました！！

ログイン

メールアドレスorユーザー名、パスワード入力でログインができます。パスワードを入力していない場合や、入力が間違っている場合はログインできません。express-sessionパッケージでログイン状態の保持を行なっています！

新規登録

メールアドレス、ユーザー名、パスワード入力で新規登録ができます！パスワードはbcrypt というライブラリを用いて、ハッシュ化して保存しています！

ログアウト 現在のセッションを削除します！セッションを削除しただけでは Cookie が残ることもあるので、明示的に削除しています！

チャット

「ほめマックス(ノーマル)」「ぎゃるマックス(ギャル風)」「病みマックス(病んでる)」「おたマックス(オタク風)」のモード変更でほめマックスの口調を変えることができます！

Gemini AI API を用いてその人の好みに合わせた褒め言葉を生成します！ 頑張ったこと、嬉しかったことを入力するだけで、それを最大限に褒めてくれるプロンプトを意識しました。

僕自身が褒められたい！！！と感じることがとても多く、褒められたら嬉しい要素をいっぱい詰め込みました！！

もう大丈夫

褒めてもらう必要がなくなったら押してみましょう！ほめマックスに変化が現れます！

記録

日付別でチャット履歴を振り返ることができます！自分が過去にどんなことを頑張ったのか、どういう風に褒められたかなどを確認できます！！

タスク

知らないうちにクリアしているタスクって世の中にいっぱいあるんですよ！！！そんなタスクに気づかせてくれるタスク機能となっています！webアプリを起動するだけでも、朝起きる、パソコン開く、パソコン起動する、アプリを開くの4つのタスクがあります！！そこを全力で褒めてもらいましょう！！！

分析

1日のレター数を棒グラフで、チャットのカテゴリ分けを行い円グラフで表示、どんなジャンルの相談事が多いのかや、日付ごとの相談数などを見ることができます！！

💜 技術的こだわり

• 設計！ 設計って大事だって実感したハッカソンでした！深夜開発中に急に始まった設計LT会ではいろんな学びを得ることができたので、それ以降の開発では今まで以上に設計を意識して開発しました！！これからも設計学びます！

🤖 AI活用

• Gemini AI API 褒め言葉作成に使用！！
• コパイロット コーディングのお助けマンとしてめっちゃ助けてもらいました！！
• chatgpt アイデア出しにchatgptを用いました。自分たちが考えた案を ベースにそれに適した拡張機能などをかんがえてもらいました。

⤴️ 技術チャレンジ

各々自分のはじめてに挑戦！

初めてのバックエンドに挑戦！ Nodeの勉強から始まり、MySQLを利用するため、SQLも学びました！！また、MVCモデルについても理解が深まりました！フロントエンドでは、グラフライブラリ「react-chartjs-2」を用いてグラフ表示に初挑戦！また、「react-datepicker」を用いてカレンダーの導入も行いました！

MVCアーキテクチャを意識！ 今まで設計をしっかりと行ってこなかった人間が初めて設計をしてみました！あらかじめ何が必要かを考えて設計することで、実装する際にとてもスムーズに開発をすることができ、設計の大冊さを理解しました！また、コンポーネントやタスク分けを意識したことでコンフリクトが起きませんでした！（バックエンドだけ、なおフロントエンド😭)

DB正規化 DBの正規化も初めて行いました。最近授業でDBを学ぶ機会があり、それを実際に用いることができるいい機会になりました。拡張性がひろく、機能を追加する際にも柔軟に対応できました。

デザイン・CSS 今回は Tailwind CSS を使用して開発を行いました。吹き出しのデザインでは、Tailwind CSSで擬似要素を使用したところを頑張りました。 Web アプリ開発は初めてだったため、デザインや CSS に関する知識が全くない状態からのスタートでしたが、「何を一番見せたいのか」「どんなテーマで統一するか」といった点を意識しながら制作を進めました。 スタート画面ではアニメーションを取り入れることで、メインキャラクターである“ほめマックス”の存在感を強調しました。

通知機能 React-ToastifyというUIのライブラリを使って通知機能を実装しました。最初はtailwindのみでUIやアニメーションを実装していましたが、限界を感じ調べていると様々通知を実装できるライブラリを見つけました。拡張性もある程度ありいろいろと便利でした。

最後に

初ハッカソン x 2 + web初心者 + 経験者という4人でに出場でしたが、各々が新しい技術に触れ、それに対して設定した目標をクリアすることができました。全員のこだわりが作ったとても満足のいく成果物が作れてとても満足です。徹夜開発ではしんどいと感じる時もありましたが、ほめマックスに褒めてもらうことで耐えることができました！！改めて、自分の成長や新しい技術への挑戦の楽しさをれるとてもいい機会になりました！！参加して良かったです！！ありがとうございました！！！