ImageAi is a MERN stack app that allows users to generate and share images with a community showcase. In this project, we've used Vite in the frontend and Tailwind for styling. To make this app work, you'll need a few API keys, including an OPENAI_API_KEY, MONGODB_URL, CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, and CLOUDINARY_API_SECRET.
To run this app, you'll need to have the following installed:
- Node.js (version 14.16.0 or later)
- npm (version 6.14.11 or later)
You'll also need to create accounts and obtain API keys for the following services:
To get started, you'll first need to clone this repository: https://github.com/sahil-github011/mern-image-ai.git
Next, navigate to the client and server folders and install the dependencies using:
cd client npm install
cd ../server npm install
Create a .env file in the server directory and add your API keys as follows:
OPENAI_API_KEY=your_openai_api_key MONGODB_URL=your_mongodb_url CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name CLOUDINARY_API_KEY=your_cloudinary_api_key CLOUDINARY_API_SECRET=your_cloudinary_api_secret
Once you've added your API keys, you can start the app in development mode by running: cd server npm start
This will start the server at http://localhost:8080.
In a separate terminal, start the client by running: cd client npm run dev
The home page of the app has a header with a logo and an icon called "generate". The body of the page displays images fetched from MongoDB Atlas that have been posted by all users. There is also a search bar that allows you to search for posts from the community showcase.
If you click the "generate" button in the header, you'll be redirected to the generate page. On this page, you can generate an image by giving a prompt. There is also an option for a random prompt and to generate an image. After generating an image, you have the option to share the image in the community showcase by typing your name.
The API used to generate images is OpenAI's DALL-E API. The images generated by the API are stored in Cloudinary, and the image string details are stored in MongoDB. We fetch the image string details from MongoDB to display in the community showcase.