🌟 Master AI Prompting

Live Site 🌐

---

🚀 Overview

Master AI Prompting is a self-help style web application designed to teach users effective AI prompting techniques. It provides ready-to-use prompt examples for learners ranging from beginners to advanced users.

The project is built using React with Vite, ensuring a fast, modern, and responsive web experience.

---

🗂 Folder Structure

Master-AI-Prompting/
├─ components/ (all reusable UI components)
│  ├─ ui/
│  │  ├─ Reveal.tsx
│  │  ├─ Tooltip.tsx
│  ├─ Footer.tsx
│  ├─ Header.tsx
│  ├─ Hero.tsx
│  ├─ ImportanceSection.tsx
│  ├─ ModelComparison.tsx
│  ├─ PracticeGuide.tsx
│  ├─ PromptLibrary.tsx
│  ├─ StructureSection.tsx
│  └─ ThemeContext.tsx
├─ dist/ (production build output)
├─ node_modules/ (dependencies)
├─ App.tsx
├─ index.tsx
├─ vite.config.ts
├─ package.json
├─ tsconfig.json
├─ .env.local
├─ .gitignore
└─ README.md

---

⚙️ Technical Details

• Framework: React 19.x
• Build Tool: Vite
• Language: TypeScript
• Styling: CSS/SCSS
• Deployment: GitHub Pages via gh-pages branch
• Responsive Design: Mobile-first layout, optimized for all screen sizes

🔹 Key Components

• Header: Dynamic and responsive navigation bar
• Footer: Includes credits, links, and copyright info
• Hero: Main introduction section
• PromptLibrary: Displays prompt examples
• ImportanceSection / StructureSection / ModelComparison / PracticeGuide: Informative sections for learning AI prompting
• ThemeContext: Handles dark/light theme toggling
• UI components (Reveal, Tooltip): Reusable smaller UI elements

🔹 Functionality Highlights

• Interactive prompt examples for user learning
• Fully responsive design supporting desktop, tablet, and mobile
• Modular, component-based architecture
• Optimized for fast loading using Vite build

---

📦 Installation & Setup

# Clone the repository
git clone https://github.com/maliha63/Master-AI-Prompting.git

# Navigate to project folder
cd Master-AI-Prompting

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📤 Deployment

• Run npm run deploy (configured via gh-pages package)
• Ensure the homepage field in package.json points to your GitHub Pages URL

---

📸 Preview

---

🛠 Tools & Libraries

Tool / Library	Purpose
React	UI development component-based framework
Vite	Fast build and dev server
npm	Package management
gh-pages	Deployment to GitHub Pages

---

🎯 Features

• Learn how to craft effective AI prompts
• Access a library of ready-to-use prompt examples
• Modular React components for easy expansion
• Fully responsive layout for all devices

---

📜 License

This project is licensed under the MIT License.
© 2025 Maliha Bathool C

---

✨ Credits

• Created and designed by Maliha Bathool C
• Images and mockups sourced from project assets
• Inspired by best practices in AI prompting education

---

Made with ❤️ using React + Vite