Chirp - GoとReactで作るマイクロブログSNS
Chirp - GoとReactで作るマイクロブログSNS 🔗 https://chirp-go.netlify.app 🔗 https://github.com/sofuejin0121/toy2_app_go Chirpは、Twitterライクなマイクロブログ機能を備えた個人開発のSNSアプリです。投稿・フォロー・いいね・ブックマーク・通知など実際のSNSに必要な機能をフルスクラッチで実装し、フロントエンドとバックエンドを分離した本番環境へデプロイしています。バックエンドエンジニアとして、フルスタックの設計・実装・デプロイまでを一人でやり切ることを目標にしました。 -------主要機能----------- ユーザー認証システム: メール認証つき新規登録、ログイン/ログアウト、パスワードリセット マイクロポスト: テキスト・画像つきの投稿作成・編集・削除、返信(スレッド)機能 フォロー機能: ユーザーのフォロー/アンフォロー、フォロワー/フォロー中一覧 リアクション: いいね・ブックマークの追加と一覧表示 通知機能: いいね・フォローなどのアクションをリアルタイム通知、通知削除 ユーザー検索: 全ユーザー一覧・キーワード検索 プロフィール編集: アバター画像・自己紹介文・表示名のカスタマイズ 管理者機能: ユーザー一覧・統計情報の確認(adminロール専用) 通知設定: 受け取る通知種別のカスタマイズ ----------技術スタック--------- ---フロントエンド--- React 19 + TypeScript: 型安全なコンポーネントベースのUI構築 Jotai: グローバルな認証状態の一元管理 React Router: SPAのクライアントサイドルーティング Tailwind CSS: ユーティリティファーストのスタイリング Axios: APIリクエストとエラーハンドリング Biome: リントとフォーマットの統一 ---バックエンド--- Go (net/http): フレームワーク不使用でのRESTful API実装 Turso (分散SQLite): エッジに最適化された軽量データベース セッション認証 + CSRFミドルウェア: クッキーベースのセキュアな認証 Resend API: トランザクショナルメール送信(日本語テンプレート) ---インフラ--- Netlify: フロントエンドSPAのホスティングとCDN配信 Render: Goサーバーのデプロイ Cloudflare R2: 投稿画像のオブジェクトストレージ クロスオリジン構成: CORS + SameSite=None/Secureクッキーによるフロント・バック分離 -----開発のポイント----- ---アーキテクチャ--- Goの標準ライブラリ net/http のみでミドルウェアチェーンとルーティングを実装。フレームワークに頼らないことでHTTPの仕組みを深く理解 ----コード設計----- useEffect とデータ取得ロジックを10個のカスタムフックに分離(useFeed, useNotifications, useUserProfile 等)。ページコンポーネントを「データ取得 → 描画」の2ステップに統一し、バックエンドエンジニアでも読めるコード構造を意識 LoadingSpinner / ErrorMessage 共通コンポーネントでローディング・エラー表示を一元化 -----セキュリティ----- CSRF対策ミドルウェアによるリクエスト検証 adminロールによる管理機能へのアクセス制御 SameSite=None; Secureクッキーを用いたクロスオリジン認証 ------デバッグ・運用----- 本番環境でのメール未送信バグをログ強化と環境変数の調査で特定・修正(BrevoからResendへの移行を含む) Render無料枠のコールドスタート問題を特定し、利用者へのUXへの影響を評価 -------学習成果------- 本プロジェクトでは、Goの標準ライブラリを使ったAPIサーバー設計、React + TypeScriptによるSPA開発、本番環境でのクロスオリジン認証の実装など、フルスタックの技術を実践的に習得しました。 また、「バックエンドエンジニアでもフロントのコードを理解できる設計」というテーマに向き合い、カスタムフックによる関心の分離や、一貫したエラーハンドリングパターンの整備を通じて、チームで保守しやすいコードベースの作り方を深く考える機会となりました。