Learning Tracker
学びを記録して、成長を見える化するWebアプリケーション
プロジェクト概要
目的
学習の記録・可視化を通じて、日々の成長を実感できるようにすることを目的としたWebアプリケーションです。記録の作成・一覧・編集・削除、週ごと・カテゴリごとのまとめ表示、ユーザー情報編集やCSVインポートなど、学習管理に必要な機能を備えています。
開発背景
日々の学びを継続し、振り返りや分析をしやすくするためのツールが欲しくて開発を始めました。バックエンド・フロントエンド・インフラの実践的なスキル習得も兼ねています。
プロジェクト画像
メイン画面 - 学習記録の一覧表示
サマリー画面 - 週間・カテゴリ別の集計
技術詳細
使用技術
Laravel 10
Next.js 15
React 19
TypeScript
Tailwind CSS
MySQL
Docker
開発期間
2025年4月～5月（約3週間）
開発体制
個人開発
デプロイ
ローカル環境（Docker）
主な機能
学習記録管理
- • 記録の作成・一覧・編集・削除
- • 週ごと・カテゴリごとのまとめ表示
- • CSVインポート機能
ユーザー管理
- • ユーザー登録・ログイン
- • ユーザー情報編集
開発過程
1
要件定義・設計
学習記録のデータ構造や集計方法、UI/UXの設計を行い、必要な機能を洗い出しました。
2
バックエンド・フロントエンド開発
LaravelでAPIを構築し、Next.js/Reactでフロントエンドを開発。Dockerでローカル開発環境を整備し、MySQLでデータを管理しました。
3
テスト・運用
基本的な動作確認を行い、今後はUI/UXの改善や本番環境へのデプロイも検討しています。
成果・学び
技術的な学び
- • LaravelとNext.jsのAPI連携
- • Dockerによる開発環境構築
- • データ集計・可視化の実装
- • UI/UX設計の工夫
プロダクト面の学び
- • 学習継続のモチベーション向上
- • ユーザー目線での機能設計
- • 実践的なフルスタック開発経験