In this video, we’ll be walking you through the process of creating a generative image app using OpenAI and React. We’ll cover everything from setting up your development environment to integrating the OpenAI API and creating a user-friendly interface with React. By the end of this tutorial, you’ll have a solid understanding of how to use OpenAI to generate images and be able to create your own generative image app. This video is perfect for developers who are new to OpenAI and React, or anyone looking to learn more about creating generative art. So, grab your code editor and let’s get started!
How to deploy the app – https://youtu.be/N9hrClMJFqk
Code:
Frontend – https://github.com/candraKriswinarto/genieart
backend – https://github.com/candraKriswinarto/genieart-api
Link:
backend
Express – https://expressjs.com/
Nodemon – https://www.npmjs.com/package/nodemon
Cors – https://www.npmjs.com/package/cors
Dotenv – https://www.npmjs.com/package/dotenv
OpenAI – https://beta.openai.com/
Frontend
Vite – https://vitejs.dev/guide/#scaffolding-your-first-vite-project
Tailwindcss – https://tailwindcss.com/
HeroIcons – https://heroicons.dev/?copyAs=name&strictJsx=true&exportComponent=true&framework=react
HeroIcons Package – https://github.com/tailwindlabs/heroicons
Contact Me:
https://canddev.vercel.app/
Find Me Here:
Instagram : https://www.instagram.com/candra_kriswinarto/
GitHub: https://github.com/candraKriswinarto/
Linkedin: https://www.linkedin.com/in/candra-kriswinarto/
#react #OpenAI
