Coding Challenge App

ブラウザで手軽に挑戦できる、インタラクティブなコーディング課題プラットフォーム

Coding Challenge App は、AtCoderのようにプログラミングの問題に挑戦し、その場でコードを書いて実行・採点ができるWebアプリケーションです。

🚀 デモサイト (Live Demo)

今すぐ、あなたのプログラミングスキルを試してみましょう！

➡️ コーディングに挑戦する

🌟 プロジェクト概要 (About this Project)

このアプリケーションは、ユーザーが気軽にコーディングスキルを試し、向上させるための学習プラットフォームです。複数のチャレンジ問題が用意されており、ブラウザさえあれば、いつでもどこでもプログラミングの問題解決に取り組むことができます。

✨ 主な機能 (Features)

• 🧩 チャレンジ問題の選択

  • 複数のコーディング課題がリスト表示され、挑戦したい問題を自由に選択できます。
  • 各問題には、詳細な説明とヒントが用意されています。

• 📝 インタラクティブなコードエディタ

  • ブラウザ上で直接コードを入力・編集できる、使いやすいエディタを搭載。
  • 課題に応じたテンプレートコードが予め用意されており、すぐにコーディングを開始できます。
  • ワンクリックでコードの実行やリセットが可能です。

• ✅ リアルタイムなコード検証

  • 記述したコードをその場で実行し、正解かどうかを即座に判定します。
  • コードが正しい場合は成功メッセージ、誤りがある場合は具体的なエラーメッセージを表示し、デバッグをサポートします。

🛠️ 使用技術 (Tech Stack)

本プロジェクトは、Viteによる高速な開発環境のもと、モダンなフロントエンド技術で構築されています。

📖 ユーザーストーリー (User Stories)

1. 課題の選択: ユーザーはサイトにアクセスすると、挑戦可能なチャレンジ課題の一覧を見る。
2. 課題への挑戦: 興味のある課題を選択すると、問題の詳細説明、ヒント、そしてコードエディタが表示される。
3. コーディング: エディタに用意されたテンプレートコードを元に、自身のロジックを実装する。
4. コードの実行と検証: 「Run Code」ボタンをクリックすると、書いたコードが実行される。
5. 結果の確認:
   • 成功: コードが正しく、期待された結果を返した場合、「Success」などの成功メッセージが表示される。
   • 失敗: コードに文法エラーや論理エラーがある場合、具体的なエラー内容が表示され、修正のヒントを得る。
6. 再挑戦: ユーザーはフィードバックを元にコードを修正し、正解するまで何度でも挑戦できる。