Python for Biologists

An interactive, browser-based platform designed to teach biologists the fundamentals of Python programming using practical, real-world biological scenarios and examples. This tool provides a hands-on learning experience without requiring any setup or installation.

✨ Features

• Interactive Learning: Run and modify Python code directly in the browser.
• Biology-Centric Curriculum: Lessons are framed around common biological tasks like analyzing DNA sequences, managing species data, and evaluating protein properties.
• Core Concepts Covered: Learn essential Python concepts including Variables, Lists, Loops, Conditionals, and Functions.
• Instant Feedback: An integrated output panel shows the result of your code and provides clear, concise explanations of what's happening.
• Zero Setup: Runs entirely on the client-side. No need for Python installation, external APIs, or backend servers.
• Sleek & Responsive UI: A modern interface with dark mode support, built with Tailwind CSS.

🚀 How to Use

1. Select a Lesson: Choose a topic from the sidebar on the left.
2. Understand the Concept: Read the scenario and the explanation for the programming concept.
3. Run the Code: Click the "Run Code" button to see the output from the pre-written example.
4. Review the Output: Observe the simulated output and read the explanation of how the code produced that result.
5. Experiment: Modify the code in the editor to explore the concept further. Note: This version provides a static explanation for the original code only.
6. Reset: Use the "Reset" button to revert the code back to the original lesson example at any time.

💻 Technology Stack

• Frontend Framework: React with TypeScript
• Styling: Tailwind CSS

📁 Project Structure

.
├── index.html                # Main HTML entry point
├── index.tsx                 # Main React application entry point
├── App.tsx                   # Root component, manages state and layout
├── constants.tsx             # Static data for all lessons
├── types.ts                  # TypeScript type definitions
└── components/
    ├── CodeEditor.tsx        # The interactive code editor component
    -── OutputDisplay.tsx     # Component to show code output and explanation
    ├── LessonView.tsx        # Displays the current lesson's scenario
    ├── Sidebar.tsx           # Navigation sidebar with the list of lessons
    └── icons/                # SVG icons for the UI

🔮 Future Improvements

• Expanded Curriculum: Add more lessons covering topics like Dictionaries, File I/O (e.g., parsing FASTA files), and external libraries (Pandas, Biopython).
• Interactive Quizzes: Include small challenges or quizzes at the end of each lesson to test understanding.
• State Persistence: Use localStorage to save the user's code and progress for each lesson.
• Dynamic Code Evaluation: Integrate a web-based Python interpreter (like Pyodide) to run user-written code and provide dynamic feedback.