SNS作ったけど、公開できなかった

に公開1

開発したSNS


自分について

22歳です。3年間浪人していて去年大学入りましたが金銭面や将来に不安があったりで12月に休学してしまい、この開発をスタートしました。
もともとAIの開発がしたかったのですが、GPUが買えず休学なども重なり、追い詰められた結果、優先順位はかなり低かったですが、もともと作りたかったSNSを作ることになりました

構成

  • バックエンド: Python
  • データベース: PostgreSQL
  • キャッシュ: Redis
  • フロントエンド: typescript(4つのプロジェクトで構成)
  • 認証: 自作
  • インフラ: AWS

cssは生のcss使ってます。そのせいでcssは1万行くらい書きました
tailwindとかsassだかsaasだかは使ってません

インフラの全体像はこういう感じです(適当ですみません)

AWS構成図

開発背景

8年くらい前からyahoo!知恵袋を使っていて知恵袋が好きで自分の居場所に感じていましたが、最近、規制が厳しくなり、非表示されることが多くなったり、特定のカテゴリが機能していないことがあり、モダンな感じにリメイクしようと思ったからです。あと雑談カテゴリというのが昔あって自由に投稿できて楽しかったので、それを再現しようと思い、コンセプトは「呟きできるQ&Aサイト」にしました

要件

フロントエンドは4つのサブドメインに分けてそれぞれ独立したアプリにしてます。認証専用ページ、アプリページ、管理者専用ページ、サポート専用ページがあります

  • 認証専用ページ: auth.sample.com

    これはopenAIのサイトを参考にしました
    見せられないのが残念ですが、横にスライドして確認コードのフォームとか出てくるようにしてます。

    サインアップだと、メールアドレス→確認コード→パスワード→ユーザー情報の入力など、ステップに分けていて、一度に入力させないようにしてストレスがかからないように配慮しました
    認証専用ページ

  • サポート専用ページ: support.sample.com
    サポート専用ページ

こだわった点

インフラの再現性

yamlファイルでインフラを大体再現できます
ここにコンテナを追加したら自動でインフラが追加されます。
ただalbとかauroraとかredisとか全部込みのフルスペック仕様なので、ちょっとデプロイしたい時とかは使えないかも
あとデータベース何個も使いたいとかalbたくさん入れたいとか世界中にサーバー置きたいとかはコード変更が必要なので中規模対応です

セキュリティ

コンテナに必要な分だけ秘密鍵が注入されるようにしています。
データベースではマイグレーション用とアプリケーション用で権限を変えたユーザーを使用しています。
認証には4つのトークンを利用しています

SSRの実現

サーバー内で内部通信して、直接Next.jsからAPIへfetchしてます。
これで高速表示を実現できます

データベースのリーダーとライターを活用

適切にリーダーとライター用のエンドポイントを活用してセッションを分けて書き込みや読み込みをしています

画像処理の分離

  • S3を使いAPIとは別プロセスで画像の処理を行ってます。

画像処理プロセス

ページ推移

Twitterのようなページ推移を実現しました
例えば、/post/〜にアクセスすると、投稿ページが表示されるのですが、全く同じページをコンポーネントとして作成して、それを重ねていて、重ねた情報をセッションストレージに保存しています。
そのため、ページをロードしても同じページが表示され、戻るボタンを押しても、前のページやスクロール位置が復元されます。タブごとに同じページを表示させたりできます

ページ重ね合わせ技術

匿名投稿

ID非公開機能を有効にするとデータベースレベルで暗号化します
例えば、投稿テーブルのuser_idとは別にanonymous_user_idを作って、そこに暗号化したidを入れています。

フレキシブルデザイン

フレキシブルデザインに対応させており、画面幅に合わせて4つの形態があります。

画面幅 レイアウト例
768px以下 768px以下
1000px以下 1000px以下
1300px以下 1300px以下
それ以上 それ以上

UIのデザイン

回答・コメント・返信のUI

  • TikTokを参考にしました

回答/コメントUI

各ページのUI

  • 投稿ページ:

  • 投稿モーダル:
    投稿ページ

  • オプション開いた時:
    オプション開いた時

  • オプション設定後:
    オプション設定後

  • カテゴリページ:
    カテゴリページ

  • 検索ページ:
    検索ページ

  • 通知ページ:
    通知ページ

  • プロフィールページ:
    プロフィールページ

  • プロフィール編集ページ:
    プロフィール編集ページ

  • 設定ページ:
    設定ページ

公開しない理由

自分が求めるレベルに達しなかったから。
このままだと、せっかく取得したドメインやブランドを汚すことになる
UIも個人開発感丸出しだし、このままずるずる開発するより、やめた方がいいと判断しました。
それにマネタイズできないし、webアプリはそもそもオワコン化してると思います
正直、自分自身スマホからだとgoogleで軽く検索する程度にしかブラウザ使ってないので自分が使うかと言われれば怪しいかも
製品化できないコードに本当に価値はないんだなと思いました。
でもまたいずれ作ると思います

Discussion

Yusaku InoueYusaku Inoue

awsを使ったかなり本格的な構成になっていて、すごいですね!
ここまで作り込むのに何ヶ月もかかったことだと思います。

これだけのWeb開発スキルはどのように身につけられたのでしょうか?気になります。

UIも個人開発感丸出し

そんなこと無いと思います!
キャプチャを見る限りでは要素がすっきり配置されていて、十分整ったUIになっていると思います。

運用費やマネタイズのこともあるので公開は難しいのかもしれませんが、残念でしたね。

公開の有無に関わらず、一連の機能をここまで作り切ったことは非常に価値がある経験だったと思います!
お疲れ様でした。