AI Learning Platform

A comprehensive web application that teaches AI fundamentals through AI-generated interactive courses. Built with React frontend and Flask backend, featuring dynamic course creation powered by OpenAI.

🚀 Features

• AI-Generated Content: Courses and lessons dynamically created using OpenAI GPT models
• Interactive Learning: Engaging course structure with sections and lessons
• Modern UI: Clean, responsive design built with React and Tailwind CSS
• Course Management: Create, browse, and manage AI courses
• Real-time Updates: Live course content generation and updates

🛠️ Tech Stack

Frontend

• React 19 - Modern React with latest features
• Vite - Fast build tool and dev server
• Tailwind CSS 4 - Utility-first CSS framework
• React Router - Client-side routing
• Radix UI - Headless UI components
• Lucide React - Beautiful icons
• Axios - HTTP client

Backend

• Flask 3.1 - Python web framework
• SQLAlchemy - Database ORM
• SQLite - Local database
• OpenAI API - AI content generation
• Flask-CORS - Cross-origin resource sharing
• Python-dotenv - Environment variable management

📦 Project Structure

AI-Powered-app-Teaching-AI-Fundamentals/
├── frontend/                 # React frontend application
│   ├── src/
│   │   ├── components/      # Reusable UI components
│   │   ├── pages/          # Main application pages
│   │   ├── services/       # API service layer
│   │   └── assets/         # Static assets
│   ├── public/             # Public static files
│   └── package.json        # Frontend dependencies
├── backend/                 # Flask backend API
│   ├── models/             # Database models
│   ├── routes/             # API route handlers
│   ├── services/           # Business logic services
│   ├── instance/           # Database files
│   └── requirements.txt    # Backend dependencies
├── start-dev.sh            # Development server startup script
├── setup.sh               # Initial project setup script
└── build.sh              # Production build script

🚦 Getting Started

Prerequisites

• Node.js (v18+ recommended)
• Python (v3.8+ recommended)
• OpenAI API Key (for AI content generation)

Installation

1. Clone the repository

   git clone <repository-url>
   cd AI-Powered-app-Teaching-AI-Fundamentals

2. Set up the backend

   cd backend
   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   pip install -r requirements.txt

3. Set up the frontend

   cd frontend
   npm install

4. Environment Configuration

   Create a .env file in the backend directory:

   SECRET_KEY=your-secret-key-here
   OPENAI_API_KEY=your-openai-api-key
   DATABASE_URL=sqlite:///courses.db

Development

Quick Start (Recommended)

# Start both frontend and backend servers
./start-dev.sh

Manual Start

# Terminal 1: Backend
cd backend
source venv/bin/activate
python app.py

# Terminal 2: Frontend  
cd frontend
npm run dev

Access the Application

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

Production Build

# Build the application for production
./build.sh

🧪 Development Commands

Frontend

cd frontend
npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

Backend

cd backend
source venv/bin/activate
python app.py    # Start Flask development server

📡 API Endpoints

Courses

• GET /api/courses - Retrieve all courses
• POST /api/courses - Create a new course
• GET /api/courses/{id} - Get specific course details
• POST /api/courses/{id}/generate-content - Generate AI content for course

🔧 Configuration

Environment Variables

Variable	Description	Required
SECRET_KEY	Flask secret key for sessions	Yes
OPENAI_API_KEY	OpenAI API key for content generation	Yes
DATABASE_URL	Database connection string	No (defaults to SQLite)

Database

The application uses SQLite by default with the following models:

• Course - Main course entity
• CourseSection - Course sections/chapters
• Lesson - Individual lessons within sections

Database is automatically created on first run.

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Troubleshooting

Common Issues

Backend won't start

• Ensure Python virtual environment is activated
• Check that all dependencies are installed: pip install -r requirements.txt
• Verify OpenAI API key is set in .env file

Frontend build fails

• Clear node modules: rm -rf node_modules package-lock.json
• Reinstall dependencies: npm install
• Check Node.js version (v18+ recommended)

Database errors

• Delete the database file: rm backend/instance/courses.db
• Restart the backend to recreate tables

Performance Tips

• Use the development script ./start-dev.sh for optimal development experience
• Enable React DevTools browser extension for debugging
• Monitor API requests in browser Network tab

🔮 Future Enhancements

• User authentication and profiles
• Course progress tracking
• Interactive quizzes and assessments
• Multi-language support
• Video content integration
• Advanced AI tutoring features

📞 Support

For questions or support, please open an issue on GitHub or contact the development team.

---

Happy Learning! 🎓🤖