日本語Japan Flag
英語Great Britain Flag

プロジェクト

フードログ

  • TypeScript
  • React
  • Next.js
  • RSC (React Server Components)
  • Server Actions
  • Tailwind CSS
  • Shadcn
  • react-hook-form
  • Zod
  • Prisma
  • Turso
  • Clerk

フードログは、毎日のカロリー摂取量を追跡し、主要栄養素の摂取量を監視するのに役立つフルスタック Web アプリケーションです。 このアプリケーションは、データベース、ORM、RSC (React Server Components)、サーバー アクション、ユーザー認証などのバックエンド テクノロジを学び、経験を積むために作成しました。

  • Clerkを使用したユーザー認証
  • RSC (React Server Components) とサーバー アクションを使用した CRUD 操作
  • Turso (データベース) と Prisma (ORM) を使用したデータ ストレージ
  • react-hook-form と Zod を使用したフォーム検証
  • Shadcn を使用したカスタム デザインとカスタムのダーク/ライト スイッチ
  • SEO、アセット、パフォーマンスの最適化

AI 顔検出 （年齢、性別、民族を検出する機能付き）

  • TypeScript
  • React
  • Next.js
  • Next.js API Routes
  • Tailwind CSS
  • RTK Query
  • Zod
  • UploadThing
  • Cypress

この AI 顔検出アプリケーションは、さまざまな角度で顔を検出し、写真内の複数の顔を同時に高精度で検出できます。検出された各顔の年齢、性別、民族も認識できます。

  • Next.js API ルートを使用したサードパーティ API とのデータ交換
  • UploadThing を使用したファイル処理 (アップロード、URL 生成、サイズ、タイプ、および数制限)
  • Cypress とインターセプトされた API 応答を使用したエンドツーエンドのテスト
  • スケルトン UI 読み込みアニメーション
  • SEO、アセット、パフォーマンスの最適化

衣料品店のECサイト - Rumusha

  • TypeScript
  • React
  • Next.js
  • Shopify
  • Tailwind CSS
  • GraphQL
  • Swiper
  • Framer Motion
  • Figma

このプロジェクトは、Rumusha という日本の衣料品店の電子商取引 Web サイトです。フロントエンドにはコンポーネントベースのフレームワーク (React/Next.js) を、バックエンドには Shopify を使用して電子商取引 Web サイトを設計および実装する私の能力を示しています。

  • Figmaを使用したカスタムレスポンシブデザイン
  • Storefront GraphQL API を使用した Shopify 統合
  • Framer Motion を使用したアニメーション
  • Swiperを使用したカスタマイズされたスライダー
  • Search Params を使用した状態管理
  • SEO、アセット、パフォーマンスの最適化

日本の寿司レストランのウェブサイト - 鮨どしら

  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • internationalization (i18n)
  • Swiper
  • Framer Motion
  • Figma

このプロジェクトでは、レスポンシブ レイアウトを設計し、国際化 (i18n)、SEO 最適化、アニメーション、アクセシビリティ機能を備えたコンポーネント ベースのフレームワーク (React/Next.js) を使用してそれらを実装する私の能力を紹介します。

  • Figmaを使用したカスタムレスポンシブデザイン
  • next-intl を使用した英語と日本語の国際化 (i18n)
  • Framer Motion を使用したアニメーション
  • Swiperを使用したカスタマイズされたスライダー
  • SEO、アセット、パフォーマンスの最適化

レシピランキング モバイルアプリ

レシピランキング モバイルアプリ
  • TypeScript
  • React Native
  • Expo
  • NativeWind
  • RTK Query
  • Zod

このプロジェクトは React Native を使用して作成しました人気の料理レシピのモバイル アプリケーションです。

  • NativeWind を使用して実装されたカスタム デザイン
  • RTK Queryを使用したサードパーティ API からのデータ取得
  • Zod を使用した API レスポンスの検証
  • モーダル要素、プルして更新、読み込みインジケーター、およびその他の機能
  • EAS Build を使用してビルドされた APK ファイル

私のポートフォリオ

  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • Material UI
  • Framer Motion
  • i18n

さまざまな最先端のテクノロジーを、多くの小規模プロジェクトに取り組んだ後に得たユニークなデザインアイデアと統合しました。 私のスキルについて読むだけでなく、実際のスキルを見ることもできます。 このプロジェクトで使用されている機能とテクノロジーの詳細なリストについては、GitHubのリードミー を必ず確認してください。

  • ユニークなデザインとインタラクティビティー
  • 国際化（日本語・英語）
  • 拡張性と使いやすさを念頭に置いた設計
  • 徹底的なパフォーマンスと資産の最適化

やることアプリ

  • TypeScript
  • Vite.js
  • React
  • Tailwind CSS
  • Framer Motion
  • Firebase
  • Firestore

一見するとシンプルなやることアプリのように見えますが、ユーザー認証、データベース統合、遅延補正、ドラッグ アンド ドロップの並べ替え、アニメーションなどの追加機能が含まれています。

  • Firebaseを利用したユーザー認証（メール/Google）
  • 匿名ユーザーのログインとアップグレード
  • Firestoreを使用したデータベースストレージ
  • Framer Motion を使用したアニメーションと並べ替え

IPアドレストラッカー

  • TypeScript
  • Vite.js
  • React
  • Leaflet.js
  • Tailwind CSS
  • Node.js
  • Express.js
  • REST API

このプロジェクトでは、Leaflet.js (地図表示) および複数のパブリック IP 地理位置情報 API を使用し、セキュリティのために独自の API を Node.js/Express.js に実装して、それからデータを取得し、フロントエンドに送信しました。

  • パブリック API とフロントエンドの間のプロキシとして機能するカスタム API
  • CORS、秘密キー、IP ごとのレート制限を使用した API セキュリティ
  • 秘密キーを検証し、レート制限を適用し、JSON 応答にカスタム フィールドを追加するカスタム ミドルウェアの開発

クリップボードのランディング ページ

  • TypeScript
  • Vite.js
  • React
  • Material UI
  • AOS

このプロジェクトのレイアウトはすべて Material UI を使用して行われます。 また、アニメーション、スクロール スナップ、およびページ全体のナビゲーションも追加しました。 この記事で私のプロセスを確認できます。

  • TypeScript を使用した Material UI のカスタマイズ
  • ページ全体のナビゲーションとスクロール スナップ
  • AOSライブラリを使用したスムーズなアニメーション

その他のプロジェクト

GitHub

GitHub アカウントには他にもたくさんのプロジェクトがあります。ぜひチェックしてください。

Frontend Mentor

frontendmentor.io で定期的にコーディングの課題に取り組んでいます。時間の経過とともに私の進歩を確認できます。