CodepenAI

Welcome to CodepenAI, where the future of web development meets the power of artificial intelligence. Our platform offers a unique code editor experience that allows you to interact with AI in a conversational manner, making web development more intuitive and accessible than ever before.

Check out the live demo here.

Features

AI-Powered Code Generation: Describe what you want in plain text and let the AI generate the HTML, CSS, and JavaScript code for you.
Interactive Code Editor: Fine-tune the AI-generated code or write your own with our codemirror code editor.
Project Management: Save your projects and come back to them anytime. Edit and update as needed with ease.
Live Demo: Try out the editor with a live demo. Please note that there is no back-end, and data will reset upon page reload.

Installation

To run CodepenAI locally, follow these steps:

Clone the repository:

git clone https://github.com/Connectslide121/codepenAI.git

Navigate to the project directory:

cd codepenAI

Install dependencies:

npm install

Configure database:

Set up the connection string for the database you want to use. Back end is written to use a MySQL server.

Start the development server:

This script will start back and front ends concurrently.

npm run dev

Available Scripts

In the project directory, you can run:

npm run dev: Runs the app in development mode.
npm run endpoints: Runs the server app in development mode.
npm start: Runs the client app in development mode.
npm run build: Builds the app for production to the build folder.
npm run predeploy: Runs the build script and deploys the app to GitHub Pages.
npm run deploy: Deploys the app to GitHub Pages.
npm test: Launches the test runner in interactive watch mode.
npm run eject: Removes the single build dependency from your project.

Code Structure

src/index.js - Entry point that renders App component
src/components/App.js - Main App component
src/components/ - Other React components
src/functions/ - Small utility/helper functions
src/APIs/ - API calling functions
src/style.css - Global styles

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch

git checkout -b feature/AmazingFeature

Commit your Changes

git commit -m 'Add some AmazingFeature'

Push to the Branch

git push origin feature/AmazingFeature

Open a Pull Request

Acknowledgements

OpenAI API

React-codemirror npm

License

Distributed under the MIT License. See LICENSE for more information.

Connectslide121/CodepenAI