【Next.js】Twitterのクローンを作った

2022/08/29に公開

概要

Twitterのクローンを作りました。最低限の機能が実装できたので公開します。実装できていない機能は(やる気が続く限り)追加する予定です。

https://github.com/sub-t/twitter-clone-fullstack

本番環境での運用は一切想定していないので、デモサイトも用意しておりません。

動作が気になる方は、開発環境でお試しください。

始め方

以下のコマンドを実行してください。

git clone https://github.com/sub-t/twitter-clone-fullstack project-name
cd project-name
yarn
yarn prisma:seed
yarn dev

project-nameの部分は適当な名前に変更してください。

開発環境が立ち上がったら、loginページにたどり着けると思います。

次のコマンドでPrisma Studioを開き、

yarn prisma:studio

Userテーブルから適当なユーザのemailをコピーしてきて、Email欄に貼り付け、Password欄に「password」と入力すればログイン完了です。

registerページからユーザの新規登録も可能ですが、アプリ内でのユーザ検索機能が未実装なため、お勧めしません。

技術スタック

https://github.com/sub-t/twitter-clone-fullstack/blob/main/package.json#L19-L73

フロントエンド

ロジック系

  • axios
  • React Query
  • React Hook Form
  • zod
  • zustand

bulletproof reactからそのまま持ってきたような構成なので、特に説明はありません。

スタイル系

  • Tailwind CSS
  • Radix UI
  • Framer Motion

個人的な最推し構成です。

バックエンド

  • SQLite
  • Prisma
  • Iron Session

手軽さを求めてDBはSQLiteにしました。セッション管理にIron Sessionを用いていますが、運用方法はかなりいい加減だと思います。

ディレクトリ構成

bulletproof reactにかなり寄せています。

src/api/以下にAPIルートの本実装を格納していますが、こちらもfeatures主体のディレクトリ構成になっています。機能ごとにAPIルートのコントローラ(handler)を管理できるので、結構いいじゃないかなと勝手に思っています。

あとがき

今挙げられるだけの目標です。

  • リンク切れを起こしているページの追加
  • 拡張ツイートの導入
  • タイムラインのInfinit Loading対応
  • コンポーネントの設計改善
  • Hero IconsからReact Iconsへの移行

v12の機能api/middlewares/以下のミドルウェアを使えるように換装することも考えています。また、zustandからJotaiに移行することも考えています。

目標が達成されず、開発が滞っていたら察してください。

Discussion

ログインするとコメントできます