Prompt Tutor

An interactive web application for learning prompt engineering through hands-on exercises.

Features

• 🤖 Interactive Learning: Practice with real AI responses using OpenAI's API
• 🎯 Targeted Exercises: Focus on specific prompt techniques (JSON formatting, role-playing, reasoning, etc.)
• 💡 Smart Hints: Progressive hint system to help when you're stuck
• 📊 Instant Feedback: Automated evaluation with detailed feedback and scoring
• 🎨 Modern UI: Clean, responsive interface built with React and TypeScript

Project Structure

• frontend/ - React frontend application with TypeScript
• backend/ - Node.js/Express API server with TypeScript
• database/ - SQLite database with sample exercises
• exercises/ - Exercise definitions and configurations
• docs/ - Project documentation

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• OpenAI API key

Installation

1. Clone and install dependencies:

   # Install backend dependencies
   cd backend
   npm install
   
   # Install frontend dependencies
   cd ../frontend
   npm install

2. Set up environment variables:

   # Edit backend/.env
   cd ../backend
   # Replace 'your_openai_api_key_here' with your actual OpenAI API key

3. Start the development servers:

   # Terminal 1: Start backend (from backend directory)
   npm run dev
   
   # Terminal 2: Start frontend (from frontend directory)
   npm run dev

4. Open your browser:

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:3001

Sample Exercises

The application comes with 5 sample exercises:

1. JSON Format Response (Difficulty 2) - Learn to request structured JSON output
2. Role Playing - Shakespeare (Difficulty 3) - Practice character-based prompting
3. Step-by-Step Reasoning (Difficulty 2) - Master chain-of-thought prompting
4. Creative Writing with Constraints (Difficulty 3) - Combine creativity with specific requirements
5. List with Numbers (Difficulty 1) - Basic formatting exercises

API Endpoints

• GET /api/exercises - Get all exercises
• GET /api/exercises/:id - Get specific exercise
• POST /api/exercises/:id/submit - Submit prompt for evaluation
• GET /api/health - Health check

Technologies Used

Frontend

• React 18
• TypeScript
• Vite
• Axios
• CSS3

Backend

• Node.js
• Express
• TypeScript
• SQLite3
• OpenAI API
• CORS

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - feel free to use this project for educational purposes!