👋 はじめに
こんにちは！普段は、趣味でアプリとか作っています。
今回は、ReactとTypeScriptをもっと知りたいと思い、学習しつつ一からサービスを作ってみたので紹介します。
特にフロントエンドの実装では、目に見えて分かるのでワクワク感が止まらず、作っていてめちゃくちゃ楽しかったです！
★作ったサービスはこちら⇩
https://tech-put.com/
※まず、サービスを試してみたい方向けにゲスト用ログインも作ってます！
ゲストログイン
🧭 サービスの概要
TechPutについて
TechPutは日々の学習を気軽につぶやいてアウトプットできるサービスです。
主な使い方
使い方は非常に簡単！
1. まず、TechPutにアクセスしてみる
https://tech-put.com/ へアクセス！
もっとこのサービスについて知りたいかもと思ったら…🤩
2. 新規会員登録
取り敢えず、どこでもいいのでクリックしてみるとログイン画面が出てくると思いますが、会員登録ボタンからメールアドレス、パスワードを入力。そうすると、ログイン後のトップ画面に遷移します！
3. 投稿
投稿します！
学習ボタンをクリックするとテンプレートが表示されて、学んだことを投稿できます。
学習テンプレートについては、今後はカスタマイズできるようにしていこうかなと思っています。
学習に関する投稿をした際にはプロフィールから確認できます⇩
4. プロフィールの編集
プロフィールの編集をします。名前と自己紹介、githubのurlが登録できます。
その他、主な機能紹介
▼記事のストック
▼フォロー
▼通知
👀 なぜ作ろうと思ったんですか
いつも本業の仕事で帰る前に日報を書いているんですが、日々行ったことを振り返ることができるし、アプトプットにもなるのでプライベートでも取り入れようと思ったのがきっかけです。
最初は、Twitterとかで日々の学びを投稿していたのですが、
文字数制限が…！！！
Twitterとかだと文字数が全然足りなく、こりゃもっと自分で使いやすいようなサービスを作ろう、と思って生み出されたのがTechPutです！
気軽に投稿もできるので今や私は愛用してます笑
🌟 主な機能
ユーザー認証
・ユーザー登録
・ログイン/ログアウト
・パスワードリセット
・ゲストユーザーログイン/ログアウト
投稿
・投稿一覧/詳細表示
・投稿の新規作成/編集
・学習モードの投稿機能
・学習投稿の一覧表示
・投稿の保存/更新
・投稿の削除
・投稿数表示
いいね
・いいね追加/削除
・いいねした記事一覧表示
・いいね数の表示
ストック
・ストック追加/削除
・ストックした記事一覧表示
投稿記事へのコメント
・コメント新規作成/編集
・コメント編集中のプレビュー表示
・ユーザーへのメンション機能
・コメント削除
・コメント数の表示
プロファイル管理
・プロフィール新規作成/編集
（ユーザー名、自己紹介、githuburlの登録ができる）
・プロフィール表示
リレーション
・ユーザーへのフォロー/アンフォロー
・フォロー/フォロワー一覧表示
・フォロー数/フォロワー数表示
通知
・通知の一覧表示
・フォローされたら
・いいねされたら
・メンションされたら
トップランキング表示
・人気の投稿
・人気のユーザー
検索
・ユーザー検索
・投稿検索
🛠️ 使用技術・ライブラリ
★フロント(GitHub)
フロントエンド
・React 18
・TypeScript 5
・React Router DOM
スタイリング
・Tailwind CSS 3
ビルドツール
・Webpack 5
コード品質
・ESLint
・Prettier
通信・API
・Axios
エディタ
・Draft.js
・React Draft WYSIWYG
★バックエンド(GitHub)
フレームワーク
・言語
・Ruby 3.2.2
・Ruby on Rails 7.1.5
データベース
・PostgreSQL
認証
・Devise
・Devise Token Auth（トークンベース認証）
メール送信
・Gmail SMTP（ActionMailer）
環境変数管理
・dotenv-rails
ファイルアップロード
・Active Storage
セキュリティ
・rack-cors
★デプロイ・インフラ
無料にこだわりました笑
renderとメディアストレージのCloudinaryは無料です！！！最高すぎる✨
私は、ドメインを買いましたが、render.comではデフォルトのドメインが使えるので、今のところ本当に完全無料で運営できます！！！
アプリケーションホスティング
・Render.com
データベース
・PostgreSQL（Render）
メディアストレージ
・Cloudinary
メール送信
・Gmail SMTP
📝 振り返り
制作期間
ここまでの制作期間は大体約3ヶ月ほど。まだまだ機能追加のための作成は続けていく予定ですが。
特に難しかった点を抜粋(全部難しかったので笑)
⚫︎認証系
特にCORS設定でAPI通信がうまくいかず、ずっと、401エラーが続き、Token認証の理解が必要でした。
Google認証も現在作成中ですが、CROS設定で引っかかってGoogleログインの画面に遷移しない状況です…😭
⚫︎コメントのメンションが来た時の通知の作成
まず、どうやってやるかの仕組みが分からなかったので調べるところからのスタートでしたが、@ユーザー名みたいなのがきたら絞り込んで存在すればそのユーザーに通知を送るという仕組みを作るのが大変でした。コメントのコントローラーで通知も作成するということを今までやったことがなかったので新たな発見が得られました😄
学習期間
▼バックエンド学習(Ruby on Rails)
約7ヶ月
▼フロントエンド学習(React、TypeScript)
約8ヶ月
✨ 今後追加したい機能
・Googleログイン認証
・下書き（自動保存もできるように）
・学習機能の充実
（Markdownでの記載、学習に関する投稿を詳細に可視化→カレンダーorグラフなどで、学習テンプレートカスタマイズ機能）
・タグ付け
・チャット
・退会処理
などなど。
🙏 おわりに
アプリ開発に関する学習をはじめて1年半ほど経ちましたが、割と飽き性の私がここまで続いているのは驚きです。今ではコードを見ない日はないくらい笑
そして、サービスを一から作成して公開までできたので良かったと思っています。
まだまだ、改善点と学ぶことは無限とありますが、自分のペースで頑張っていこうと思います⭐️
Views: 2
