🚀 Forge Gen

An AI-powered mobile SaaS application built on top of Cloudinary's image transformation APIs, inspired by JS Mastery's Imaginify.

📲 Download App

Click To Download APK

Note: The app is only available on Android

🛠️ Tech Stack

TypeScript
Appwrite
Cloudinary
FlutterWave
Expo
React Native
Expo Router

ScreenShots

✨ Key Features

Image Transformations: Perform operations like background removal, image restoration, and object recoloring with ease.
Authentication: Secure user login and registration.
Payments: Payment integration with flutterwave for credit purchases
Credit Management: Manage and track user credits for app services.

🎨 Design

Check out the figma design

Mobile App Navigation Structure

This Folder Structure was derived due to the neccessity of colocating navigation logic with screens

  app/
  │ (only one allowed at root )
  ├── stack.tsx # Stack navigation logic
  ├── drawer.tsx # Drawer navigation logic
  ├── tabs.tsx # Tab navigation logic
  │
  ├── screens/ # Folder containing all screen files and folders
  │ ├── Home.tsx # A screen represented as a file
  │ ├── Profile/ # A screen represented as a folder
  │ │ ├── stack.tsx # Stack navigation for Profile section (only one allowed at root)
  │ │ └── screens/
  │      ├── [id].tsx # Dynamic screen for Profile section (e.g., User ID)
  │      ├── Edit.tsx # Static screen for Profile editing
  │ └── Settings.tsx # Another screen as a file

Key Rules

Root Level of Folders:
- At the root level of any folder, there can only be one of the following:
  - stack.tsx
  - tabs.tsx
  - drawer.tsx
- These files define the navigation logic for that section.
Screen Files:
- Screens can be either a file (React component) or a folder containing its own navigation logic.
- If a folder is used, it must contain one of the navigation files (stack.tsx, tabs.tsx, or drawer.tsx) at its root.
Dynamic Routes:
- Use Next.js-style conventions for dynamic routes.
- Example: In the Profile folder, you can define a dynamic route with [id].tsx to create a dynamic profile screen for each user.
Subfolders for Screens:
- Any folder that represents a screen must also contain a screens/ subfolder to hold additional screens under that navigation.

Example

Profile Folder:
- Contains stack.tsx for managing stack-based navigation.
- Has a screens subfolder containing the actual screens, such as [id].tsx for a dynamic profile and Edit.tsx for profile editing.

Profile/
├── stack.tsx        # Stack navigation at the root
└── screens/
    ├── [id].tsx     # Dynamic screen for profile based on user ID
    └── Edit.tsx     # Static screen for editing profile

📦 Installation

To get started with Forge Gen locally, follow these steps:

Clone the repository:

   git clone https://github.com/nathan-somto/forge-gen.git
   cd forge-gen

Create a cloudinary and appwrite account cloudinary appwrite
Get Your Environment variables for the cloudinary server and mobile app

Cloudinary Server Env

  CLOUDINARY_API_KEY=''
CLOUDINARY_API_SECRET=''
CLOUDINARY_CLOUD_NAME=''

Mobile App Env

EXPO_PUBLIC_APPWRITE_PROJECT_ID=''
EXPO_PUBLIC_APPWRITE_DATABASE_ID=''
EXPO_PUBLIC_APPWRITE_USER_COLLECTION_ID=''
EXPO_PUBLIC_APPWRITE_TRANS_COLLECTION_ID=''
EXPO_PUBLIC_APPWRITE_BUCKET_ID=''
EXPO_PUBLIC_APPWRITE_TRANSACTIONS_COLLECTION_ID=''
EXPO_PUBLIC_FLUTTER_WAVE_PUBLIC_KEY=''
EXPO_PUBLIC_APPWRITE_FUNCTION_ID=''

Install dependencies:

    npm run get:packages

Deploy Appwrite Functions

  npm run deploy:functions

Create a Development Build

  cd mobile-app
  npm run (android | ios)

Deploy Mobile App(Optional) ensure you have eas installed locally and at the root level of the project run

 npm run deploy:app

Nathan-Somto/Forge-Gen