家計簿アプリ
webアプリ
使用技術・ライブラリ - react typescript firestore MUI
制作期間 - 2日
この制作では、Udemyの学習動画を見ながら、ReactとTypeScriptを駆使してアプリケーション開発の基礎を学ぶことを目指しました。Next.jsの学習に進む前にreactの技術的な理解を深めるため、実際にアプリケーションを作成しながら、Reactのコンポーネント設計やTypeScriptの型システムの活用方法を実践的に学びました。
タスク管理アプリ
webアプリ
使用技術・ライブラリ - Next.js typescript mongoDB
制作期間 - 1週間
Firestoreを使って家計簿アプリを作成したことで、NoSQLデータベースにおける基本的な操作に慣れました。その後、MongoDBを利用してCRUD操作の理解を深め、異なるNoSQLデータベース間の違いやベストプラクティスを学びました。また、家計簿アプリでは行わなかったフロント表示にもこだわり、Lottieアニメーションの使用、フォントの適用を行いました。
fizzi
webサイト - LP
使用技術・ライブラリ - Next.js typescript prismic GSAP R3F drei
制作期間 - 2日
このプロジェクトでは、GSAPとNext.jsを駆使して、アニメーション効果を持つモダンなサイトを構築しました。また、Three.jsを活用したサイト制作にも興味があったため、R3fやdreiを使用し、3D要素の組み込みについても多くを学びました。実践を通して、アニメーションと3D表現を融合させる技術を深く理解することができました。
career Nexus
webサイト - コーポレート
使用技術・ライブラリ - Next.js typescript microCMS hubspot GSAP lenis tailwindCSS MUI
制作期間 - 1ヶ月
このサイトは、ヘッドレスCMSとGSAPの活用方法を学習する目的で作成された架空のコーポレートサイトです。ヘッドレスCMSを利用してコンテンツの管理と配信を行い、GSAPで動的なアニメーションを実現しています。モダンなWeb技術を駆使して、ユーザー体験を向上させることに焦点を当てました。また、家計簿アプリの制作で使用したzodを使用しhubspotと連携したフォームも作りました。
HueDay
webアプリ - SNS
使用技術・ライブラリ - Next.js typescript supabase prisma clerk tailwindCSS
制作期間 - 1ヶ月
アプリケーション開発において、認証機能の実装やリレーショナルDBを用いたCRUD操作に関する知識を深めました。また、AI技術を活用したデータベース設計にも取り組み、効率的なデータ管理を実現しました。さらに、本番環境へのデプロイに伴う問題解決にも取り組み、デプロイプロセス全体を通して多くの学びを得ることができました。
Astroブログサイト
webサイト - ブログ
使用技術・ライブラリ - Astro preact
制作期間 - 1日
Astroの特徴やメリットを簡単なレイアウトを通して、実際のサイト制作を行う際にどのように効率的に活用できるかイメージすることを意識しながら制作しました。コンポーネントベースの開発や、静的サイト生成（SSG）の特性を活かし、サイトのパフォーマンスを最適化する方法を学びました。また、Astroの柔軟な統合機能を活用し、必要なツールやライブラリを簡単に組み合わせることができました。