🎨 ImageCraft AI App

A React Native (Expo) application that empowers users to generate AI-based images using a credit-based system, with secure login via Clerk, smooth navigation, and seamless in-app credit purchases.

✨ Core Features

✅ User Authentication with Clerk – Secure, scalable sign-in/sign-up system with real-time user context
✅ AI Image Generation – Users generate stunning AI art using pre-purchased credits
✅ Credit-Based Access – Each image generation deducts from a user’s credit balance
✅ Credit Purchase Flow – Add more credits through a built-in purchase flow (e.g., Stripe or dummy handler)
✅ Profile & Gallery – Users can view their generated images and manage profile info
✅ Context API Integration – Persistent user data and credit tracking using React Context
✅ Expo Router Navigation – Modern routing for a native-like flow and transitions

🛠️ Tech Stack

• Frontend: React Native (Expo), Tailwind (via NativeWind)
• Authentication: Clerk (React Native SDK)
• AI Backend: External API (e.g., Replicate, Stability AI, or HuggingFace API)
• Credit System: In-app context-based tracking (can extend to backend DB)
• Payments (Optional): Stripe Integration or placeholder logic
• State Management: Context API, React Query (optional)
• Navigation: Expo Router + Stack + Tabs
• Media Handling: Expo MediaLibrary, Image Picker, FileSystem

🧭 App Flow

Start │ ├── Login / Register (Clerk) │ ├── Home Page │ ├── Generate Image (uses 1 credit) │ └── View Credit Balance │ ├── Image Results │ └── Save / Share / Delete │ ├── Profile │ ├── Purchase Credits │ └── View History │ └── Logout

📁 Project Structure

ImageCraftAI/ ├── app/ │ ├── index.tsx │ ├── login.tsx │ ├── generate.tsx │ ├── profile.tsx ├── components/ │ ├── ImageCard.tsx │ ├── Header.tsx ├── context/ │ ├── UserContext.tsx ├── lib/ │ ├── api.ts # Handles AI image generation │ ├── creditUtils.ts ├── assets/ │ └── icons/ ├── App.tsx └── tailwind.config.js

🚀 How to Run

1. Clone the repository
   git clone https://github.com/Reethikaa05/imagecraft-ai.git

2. Install dependencies
   npm install

3. Set up environment variables (e.g., Clerk API keys, AI API keys)

4. Run the app
   npx expo start

⚠️ Ensure Expo Go or an emulator is ready

🌐 Coming Soon

• Stripe integration for real credit purchases
• Firebase/Hasura backend for persistent credit history
• Multi-model image generation (e.g., anime, photorealistic, sketch)

👩‍💻 Author

Reethika Selvam
GitHub: Reethikaa05
MCA | AI & Mobile Development Enthusiast | Cloud Native Advocate

---

📢 Want to collaborate on agentic AI apps or visual AI tools? Let’s connect!