【Next.js】Twitterのクローンを作った
概要
Twitterのクローンを作りました。最低限の機能が実装できたので公開します。実装できていない機能は（やる気が続く限り）追加する予定です。
本番環境での運用は一切想定していないので、デモサイトも用意しておりません。
動作が気になる方は、開発環境でお試しください。
始め方
以下のコマンドを実行してください。
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ページからユーザの新規登録も可能ですが、アプリ内でのユーザ検索機能が未実装なため、お勧めしません。
技術スタック
フロントエンド
ロジック系
- 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