Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdullah0dev/imagegenius
🖼️AI-powered image generator using React Native and Node.js!🎨👇👇
https://github.com/abdullah0dev/imagegenius
express nodejs react-native react-native-app react-native-navigation react-native-vector-icons
Last synced: about 1 month ago
JSON representation
🖼️AI-powered image generator using React Native and Node.js!🎨👇👇
- Host: GitHub
- URL: https://github.com/abdullah0dev/imagegenius
- Owner: Abdullah0Dev
- Created: 2024-07-20T11:33:01.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-20T06:46:20.000Z (3 months ago)
- Last Synced: 2024-10-11T10:04:34.282Z (about 1 month ago)
- Topics: express, nodejs, react-native, react-native-app, react-native-navigation, react-native-vector-icons
- Language: TypeScript
- Homepage: https://bit.ly/3LboNOQ
- Size: 3.82 MB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🔗 [Links](#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](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/Abdullah0Dev/imageGenius.git
cd imageGenius
```
**Installation**
Navigate to the `frontend` folder and install dependencies:
```bash
cd frontend
npm install
```
Navigate to the `backend` folder and install dependencies:
```bash
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:
```bash
npm start
```
**Running the Frontend**
Navigate back to the `frontend` folder and start the React Native app:
```bash
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✍](https://www.figma.com/design/sALWpDNqeNmxMo1vSbJvze/AI-Image-Generator-Application-%7C-IOSA-%7C-Android-%7C-UI-Kit-(Community)-(Community)-(Community)?node-id=0-1&t=hcPRa2dPGw5xMPiR-1)
- **Replicate Model URL**: [Replicate Model](https://replicate.com/bytedance/sdxl-lightning-4step)