"code-learning-env" is an innovative web application designed to facilitate the learning of programming and researching the influence of AI on programming education. By integrating AI with a code execution environment, it offers a unique platform for learners and researchers to write, test, and learn from code snippets interactively.
This application is suitable for:
- Learners: Individuals looking to practice and improve their programming skills through interactive challenges.
- Researchers: Experts investigating how AI tools can support and enhance learning in the field of computer programming.
- Task Description Panel: Presents users with coding challenges that they can solve to learn or test their coding knowledge.
- Code Writing and Interpreter Window: A dual-purpose space that allows users to write Python code and see immediate feedback on execution. It enforces correct Python syntax, and any errors in the code will be reported in this area.
- AI Instruction Composer: Users can type in natural language instructions for the AI, which then assists by generating code, offering suggestions, or explaining concepts based on the user's input and current code.
- Python Documentation Access: Provides handy access to official Python documentation, aiding users in understanding and utilizing Python's rich set of features and libraries.
- Next.js: A React framework for building user interfaces and static websites. Please note that the new "app" project structure is used.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
- TypeScript: A superset of JavaScript providing static type checking.
- ESLint: A static code analysis tool for identifying problematic patterns in JavaScript code.
To get started with "code-learning-env," follow these steps:
- Clone the repository:
git clone https://github.com/wmohamed24/code-learning-env.git- Navigate into the project directory:
cd code-learning-env- Install dependencies:
npm install- You would need to create a .env file in the main directory and add in it GEMINI_API_KEY=YOUR_GEMINI_API_KEY
After installing the project, you can start the development server by running:
npm run devVisit http://localhost:3000 in your web browser to view the application.
- Enter your Python code in the Code Writing Window.
- Run your code to see the output or any syntax errors in the Interpreter Window.
- Correct any errors based on the feedback and re-run your code.
- To leverage the AI's capabilities, type instructions into the AI Instruction Composer.
- The AI can build upon your current code in the Code Writing Window, guiding the development of your solution.
- The more specific your instructions, the better the AI can assist you in generating code and explanations.
This project is licensed under the MIT License. See the LICENSE file for more details.