CodePen GPT

---

CodePen GPT is a powerful React Single Page Application (SPA) that integrates OpenAI's API to generate code snippets based on user input. The generated code is then placed into CodeMirror editors, allowing users to quickly test and demo their code in real-time. The output is displayed in an i-frame, providing a seamless experience similar to popular platforms like CodePen and Code Sandbox.

Features

• Utilizes OpenAI's API to generate code snippets based on user input
• CodeMirror editors for HTML, CSS, and JavaScript
• In-browser linting for JavaScript with auto-correct
• In-editor search (command/ctrl F)
• rainbowBrackets custom CodeMirror Extension for colored scope
• Real-time code execution and output display in an i-frame
• Track session cost rounded to nearest penny.
• Responsive design for a seamless experience on various devices
• Download your code to an html file.

Tech Stack

Getting Started

Prerequisites

• Node.js (v14.x or later)
• npm (v6.x or later)
• An OpenAI API key (soon), preferably GPT4

Installation

1. Clone the repository:

git clone https://github.com/eriknewland/codepen-gpt.git

2. Change to the project directory:

cd codepen-gpt

3. Install the dependencies:

npm install

4. Create a .env file in the root directory and add your OpenAI API key:

REACT_APP_OPENAI_API_KEY=your_api_key_here

5. Start the development server:

npm start

The application should now be running on http://localhost:3000.

Usage

1. Enter your desired code generation prompt in the input field located in the top right corner.
2. Click the "Call API" button to generate code snippets based on your input.
3. The generated code will be placed into their respective CodeMirror editors (HTML, CSS, and JavaScript).
4. The output will be displayed in the i-frame below the editors in real-time.
5. You can edit the code in the editors and see the changes in the output instantly.
6. Save your code snippets by downloading everything to a simple html file to use in your favorite desktop editor.

Roadmap

• Implement CSS and HTML linting
• Implement a better way to share
• Implement theme changing

Contributing

Contributions to CodePen GPT are always welcome! If you'd like to contribute, please follow these steps:

1. Create a new branch with a descriptive name.
2. Make your changes and commit them with a clear and concise commit message. See the Issue Templates if you need a good place to start.
3. Push your changes to your newly created branch
4. Create a pull request, detailing the changes you made and why.

License

MIT License.

Acknowledgements

• OpenAI for their powerful API
• CodeMirror for their versatile code editor and amazing community.
• CodePen and Code Sandbox for inspiring this project