はじめに

みなさんお久しぶりです！

前回投稿したのは秋の初めでしたが、いつの間にか冬になってました！

最近は随分と冷え込んできましたね。。⛄

さてさて、その間私はというと個人開発アプリを4つほど作ってました！

順にご紹介します！

１つ目

ディスコードクローンアプリ（discord-replica-zksytmkn.vercel.app）

• 機能

  会員登録とログインとログアウト（Google認証とGitHub認証）

  チャンネルを作成し、メッセージを送信。

• 技術スタック

  Next.js 14 x Supabase（PostgreSQL）の構成です。Google認証と GitHub認証も Supabase と Auth UI を使ってます。

＊こちらのWebアプリを参考にしており、技術スタックは変えてます。
（https://www.udemy.com/course/discord-clone-udemy/）

2つ目

SNSアプリ（sns-app-zksytmkn.vercel.app）

• 機能

  会員登録とログインとログアウト（メールアドレス認証）

  記事（画像とメッセージ）の投稿・編集・削除。記事のお気に入り。マイページ。

• 技術スタック

  Next.js 14 の Server Actions を使って、PlanetScale（MySQL）に対する CRUD 処理を ORM に Prisma を使って行ってます。メールアドレス認証の実装には Clerk を使ってて、画像の保存には Clodflare R2 を使ってます。

＊こちらのWebアプリを参考にしました。
（https://github.com/dninomiya/next-demo-app）

3つ目

ポケモン図鑑アプリ（pokemon-app-zksytmkn.vercel.app）

• 機能

  第1世代〜第4世代のポケモンの閲覧。

• 技術スタック

  Next.js 14 の Server Actions を使って、PokéAPI からポケモンデータをフェッチしてます。UI は shadcn/ui を使って、細かいスタリングは Tailwind CSS で調整してます。

4つ目

ニュースアプリ（審査中）

• 機能

  ニュースの閲覧とクリップ。

• 技術スタック

  React Native と Expo を使ってます。画面遷移は React Navigation を使って、スタイリングは NativeWind（Tailwind CSS）を使ってます。

おわりに

今回もこちらの記事を読んでいただき、ありがとうございます！この個人開発で Next.js App Router, Prisma, Supabase, PlanetScale などのモダン技術にいろいろとキャッチアップできて、とても勉強になりました！

ただフロントエンド技術の進化は特に早いので、引き続きキャッチアップし、参考になりそうな情報がありましたら、共有させていただきます！