概要
このプロジェクトでは、プログラミング学習のための、コーディングチャレンジアプリを構築します。
ユーザーは与えられた課題に対してコードを書き、実行して正解かどうかを確認できます。
学習目標
React のカスタムフックについて、学習します。
React コンポーネントから、カスタムフックでロジックを分離する利点や、実装方法について確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- カスタムフックによるロジックの分離
- Vite を用いた React 環境構築
- TypeScript による型チェック
- Tailwind CSS v4.0 を用いたスタイリング
- shadcn/ui によるコンポーネントの導入
- GitHub Pages へのデプロイ
🎯 お題
- 「ユーザーストーリー」を全て満たすアプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
- スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- チャレンジ問題の管理：
- 複数の課題の表示・選択ができる
- コードエディタ：
- コードを入力・編集できるエディタを実装する。
- 入力したコードの実行・リセットができる。
- コード検証：
- 入力されたコードを実行し、正誤判定を行う。
- エラーメッセージを適切に表示する。
ユーザーストーリー
- ユーザーがサイトにアクセスすると、複数のチャレンジ課題が表示されている。
- ユーザーは、課題を選択することができる。
- 課題の詳細画面では、説明・ヒントを確認することができる。
- コードエディタには、課題に応じたテンプレートコードが入力されている。
- ユーザーはコードを編集し、「Run Code」ボタンをクリックして、結果を確認できる。
- コードが正しい場合は、成功メッセージが表示される。
- コードにエラーがある場合は、エラー内容が表示される。
- アプリケーションがデプロイされており、誰でもアクセス可能である。