転職活動のためにポートフォリオを作成しました。
ご覧いただけると幸いです。
ユーザー登録、投稿等自由にしていただいて大丈夫です。
フィードバックいただけると幸いです。
スクールを使わずに、すべて個人で作成しました。
MERNスタック（MongoDB、Express.js、React、Node.js）でアプリを制作しております。
アプリ紹介
サイトはこちら
https://menlo.vercel.app/
※自由に書き込みや登録いただいて大丈夫です。
※ポートフォリオの役割があるため、場合によっては投稿を削除する可能性がございます。予めご了承ください。
Githubはこちら
https://github.com/yusukesugahara/menlo
サービス概要
ChatGPTについて、プロンプトに関する記事を投稿し共有するアプリです。ChatGPTをさらに有効活用できるようにノウハウや知識を学び共有する場として作成しました。
開発背景
1、自身がプロンプトに関する情報をもっと知りたかったため
私自身、ChatGPTを活用してアプリ制作の学習をしています。
皆さんがアプリ制作や学習時にどんなChatGPTの使い方をしているのか知りたいと思いました。
また、アプリ制作以外にも、本で出合った考え方についてChatGPTに質問してどう考えているか聞いたりしています。アプリ制作以外にどのようなChatGPTアプリの使い方をしているのかも知りたくこのアプリを作成しました。
2、好みに合うUIを実現したかったため
ChatGPTのプロンプト投稿サイトを見ていたのですが、UIが私の好みに合わなかったため自ら作ってみようと思いました。
MERNスタックにした理由
前職JAVA等の営業をしていたため、モダンなプログラム言語を使いたく、MERNスタックにしました。
今後、どんどん普及していくと考えているため。
メイン機能
投稿一覧表示・記事閲覧
投稿の作成、編集、削除機能
投稿・編集
削除
その他機能
検索機能
ユーザー登録、ユーザーログイン
マイページ・ユーザーページ
キーワードごとに投稿一覧表示
いいね機能
工夫点
・情報の見つけやすさ：知りたい情報を見つけやすくするために、検索機能、キーワード機能、ユーザー投稿一覧機能を実装しました。
・質の高い投稿へのモチベーション：質の高い投稿をするインセンティブを付けるためにいいね機能を実装しました。
・セキュリティ対策：ログインパスワードの暗号化、ユーザー認証機能の実装を行っています。環境変数を複数設定しています。
苦労した点
Herokuが有料化されていたため、無料で使えるサーバを自ら探しました。その結果、Vercelに選定しました。
このvercelへデプロイしたのですが、事例の記事がなく試行錯誤しながら頑張ってデプロイしました。
デプロイ記事は別に投稿しておりますので、気になった方は読んでいただけると有難いです。
ER図作成
構成図
技術スタック
| カテゴリ | 技術スタック |
|---|---|
| サーバサイド | Node.js 20.15.1 Express.js 4.19.2 |
| データベース | mongoDB 7.0.12 |
| 認証 | jsonwebtoken 9.0.2 (認証トークンの発行と検証に使います。これにより、ユーザーのログイン情報を安全にやり取りします。) bcrypt 5.1.1 (パスワードをハッシュ化して保存するために使います。ユーザーのパスワードをデータベースに平文で保存しないようにします。) |
| フロントエンド | React 18.3.1 React Router 6.25.1 |
| デプロイ | Vercel |
終わりに
最後までご覧いただきありがとうございました。
今後もアプリ制作を続けていきたいと思っております。
フィードバック等ございましたらいただけますと幸いです。
何卒、よろしくお願いいたします。