An AI-powered image generator built with Next.js, TypeScript, and fal.ai models.
This project allows users to create AI images, upload files seamlessly with FilePond and Cloudflare R2, and enjoy a clean interface styled using TailwindCSS and DaisyUI.
- ⚡ AI image generation using fal.ai
- 📂 Image uploads with FilePond + Cloudflare R2
- 🎨 Modern UI with TailwindCSS + DaisyUI
- 🔑 Authentication with Clerk and Google OAuth
- 🛠️ Built on Next.js + TypeScript
Clone the repository and install dependencies:
git clone git@github.com:iamdipankarj/imagegen.git
cd imagegen
yarn installCopy the example environment file and configure it:
cp .env.example .env| Variable | Description |
|---|---|
HOST_NAME |
Hostname for your app (default: localhost). |
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY |
Clerk Publishable Key. Create a project on Clerk Dashboard → API Keys. |
CLERK_SECRET_KEY |
Clerk Secret Key from Clerk Dashboard. |
NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL |
Redirect path after login (default: /). |
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL |
Redirect path after signup (default: /). |
NEXT_PUBLIC_CLERK_SIGN_IN_URL |
Sign-in route (default: /login). |
NEXT_PUBLIC_CLERK_SIGN_UP_URL |
Sign-up route (default: /register). |
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL |
Fallback login redirect (default: /login). |
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL |
Fallback signup redirect (default: /register). |
SOA_INTERNAL_KEY |
Internal service key (pre-filled). |
FAL_KEY |
API Key for fal.ai. Create a free account and generate an API key under Settings → API Keys. |
GOOGLE_CLIENT_ID |
Google OAuth Client ID. Create in Google Cloud Console. |
GOOGLE_CLIENT_SECRET |
Google OAuth Client Secret from the same console. |
This project uses Clerk for authentication.
Follow the steps below to configure Clerk for local development and production.
- Visit https://dashboard.clerk.com/
- Click Create Application
- Select Web (or the appropriate client type)
- Go to Settings → API Keys
- Copy the following keys:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYCLERK_SECRET_KEY
Create a .env file in the project root:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key_here
CLERK_SECRET_KEY=your_secret_key_here
# Optional (recommended)
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-upThis project uses Cloudflare R2 for storage (images, assets, uploads, etc.).
Follow the steps below to configure R2 for both local development and production.
- Go to https://dash.cloudflare.com/
- Select your account → open R2 (Object Storage)
- Click Create Bucket
- Give your bucket a name, e.g.
my-app-bucket - After creation, go to the bucket → Settings → copy:
- Bucket Name
- Public Bucket URL (if public access is needed)
- In Cloudflare dashboard, go to R2 → Manage R2 API Tokens
- Click Create API Token
- Choose Edit or Read & Write access for your bucket
- Generate the token
- Save the following:
R2_ACCESS_KEY_IDR2_SECRET_ACCESS_KEY
Each bucket gets a unique S3-compatible endpoint.
- Go to your bucket → S3 API
- Copy the S3 Endpoint
Add these to your .env file:
R2_ACCOUNT_ID=your_r2_account_id
R2_ACCESS_KEY_ID=your_access_key
R2_SECRET_ACCESS_KEY=your_secret_key
R2_BUCKET_NAME=my-app-bucketyarn dev
or
npm run dev
The app will be available at http://localhost:3000.
- Next.js – React framework for SSR/SSG
- TypeScript – Strong typing for JavaScript
- fal.ai – AI model inference
- FilePond – File uploads
- TailwindCSS – Utility-first CSS
- DaisyUI – Tailwind component library
- Clerk – Authentication and user management
- Cloudflare R2 – File Storage
Pull requests are welcome! For major changes, please open an issue first to discuss what you’d like to change.
This project is licensed under the MIT License.