Hi, I'm Makoto Katayori
植物を愛するWebエンジニア 🌱
フロントエンド / バックエンド / インフラまで幅広く対応
Featured Projects
主要な制作物とプロジェクト
Plants Log
植物の成長を記録・管理できるWebアプリケーション。写真やメモと共に日々の変化を記録し、タイムライン形式で成長過程を可視化。科学的分類に基づいた植物データベースと多言語対応（日本語/英語）を実装。
Next.js 15TypeScriptSupabaseTailwind CSSshadcn/uiReact Hook FormZod
Portfolio
Next.js App Routerで構築した個人ポートフォリオサイト
Next.jsTypeScriptReactCSS Modules
Codeku（コードク）
VS Code拡張機能。コードの識別子にホバーすると日本語の読み（カタカナ）を表示。camelCase/PascalCase/snake_case/kebab-caseを自動認識し、プログラミング略語にも対応。
TypeScriptVS Code Extension APINode.jsWebpack
Otokogi（男気じゃんけん）
旅行や飲み会の「男気じゃんけん」スコアを記録・共有できるWebアプリ。参加者をQRコードで招待し、勝利回数や支払金額をリアルタイム集計。SWRによる疑似リアルタイム同期で全員に自動反映。サーバーレス構成で完全無料運用を実現。
Next.js 15TypeScriptNeon PostgresDrizzle ORMTailwind CSSSWRVercel
Tech Stack
使用技術とスキル
🔨プログラミング言語
JavaScriptTypeScriptPHP
🚀フロントエンド
React.jsNext.jsVue.js (2/3)Nuxt.js
⚙️バックエンド・API
GraphQLExpress.jsLaravelNode.jsOpenAPI
🎨UI・スタイリング
MUIChakra UIVuetifyTailwind CSSshadcn/uiCSS Modules
🧪テスト・品質管理
JestVitestreact-testing-libraryCypressStorybook
📦状態管理・フォーム
react-hook-formSWRVuexPinia
☁️クラウド・インフラ
AWSFirebaseVercelNetlifySupabaseNeon Postgres
💾ORM・データベース
PostgreSQLDrizzle ORMPrisma
🛠️ツール・開発環境
Git / GitHubGitHub ActionsESLintPrettierpnpmhuskyCI/CDmonorepo