ImageGenius: Full Stack AI Image Generator App

Build this project step by step with our detailed tutorial on Web Minds YouTube. Join the WM family!

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🔗 Links

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, Web Minds.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

🤖 Introduction

Welcome to ImageGenius! This AI-powered app generates stunning images based on user inputs. Built with React Native, Node.js, and MongoDB, and powered by the Replicate API, ImageGenius ensures high performance, scalability, and creativity.

⚙️ Tech Stack

• React Native
• Tailwind CSS
• Node.js
• Express
• MongoDB
• Replicate API

🔋 Features

👉 AI-Powered Image Generation: Create unique images based on user inputs using the Replicate API.

👉 Responsive Design: Optimized for any device, ensuring a seamless user experience.

👉 Real-time Image Rendering: Instant feedback and image generation.

👉 User Authentication: Secure authentication mechanisms to protect user data.

👉 Scalable Backend: Efficient backend powered by Node.js and Express.

👉 Easy-to-Use Interface: User-friendly interface designed with React Native and Tailwind CSS.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/Abdullah0Dev/imageGenius.git
cd imageGenius

Installation

Navigate to the frontend folder and install dependencies:

cd frontend
npm install

Navigate to the backend folder and install dependencies:

cd ../backend
npm install

Environment Variables

Create a .env file in the backend directory and add the following:

export REPLICATE_API_TOKEN=your_replicate_api_key

Running the Backend

Start the backend server:

npm start

Running the Frontend

Navigate back to the frontend folder and start the React Native app:

cd ../frontend
npx react-native run-android # For Android
npx react-native run-ios # For iOS

Open the app on your simulator or real device to view the project.

🔗 Links

• 🎨 Design : Figma App Design✍
• Replicate Model URL: Replicate Model