Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/amotivv/tools-ai-insta


https://github.com/amotivv/tools-ai-insta

Last synced: 7 months ago
JSON representation

Awesome Lists containing this project

README 

          
# AI-stagram



**AI-stagram** is an AI-powered Instagram feed generator that demonstrates the creative power of generative AI. Using a familiar social media interface, the app dynamically generates images and prompts with advanced AI models to create a custom Instagram‑style feed. Users can interact with posts by liking, commenting, sharing, and downloading images. They can also create a personalized AI profile by selecting an AI type, photo subject, photo style, and naming their AI.



## Features



- **Authentication & User Management:**

  - GitHub OAuth integration for secure sign-in

  - JWT session handling with NextAuth.js

  - User tier system (Basic/Premium)

  - Protected routes and authenticated actions

  - Elegant sign-in page and header integration

  - Admin dashboard for user and content management

  - Role-based access control with admin scope



- **Storage & Data Management:**

  - PostgreSQL database with Prisma ORM

  - Vercel KV (Redis) for fast image caching

  - Vercel Blob storage for generated images

  - User-specific storage organization

  - Efficient data relationships and tracking



- **Dynamic AI Content Generation:**  

  Generate unique image prompts and AI‑generated images on the fly using:

  - [OpenAI GPT‑based text generation](https://openai.com)

  - [Replicate API for image generation](https://replicate.com)

- **Personalized AI Profile:**  

  Select from various AI types (e.g. _FashionBot_, _TechGuru_, _FoodieAI_, etc.), choose photo subjects and styles, and name your AI to tailor the feed.

- **Interactive Feed:**  

  Enjoy an Instagram‑like feed with features such as:

  - Infinite scrolling with dynamic content loading

  - Like, comment, and bookmark interactions

  - Share functionality that generates a unique, shareable feed URL

  - Download all images as a ZIP archive

- **Responsive & Accessible UI:**  

  Built with Next.js, Tailwind CSS, Radix UI, and Shadcn UI components for a polished, mobile‑friendly experience.



## Tech Stack



- **Framework & Auth:**

  - Next.js 14 (App Router)

  - NextAuth.js for authentication

  - Middleware for route protection

- **Language:** TypeScript, React

- **Styling:** Tailwind CSS

- **UI Components:**  

  Shadcn UI (built on Radix UI), Framer Motion, Embla Carousel, and others

- **Database & Storage:**

  - PostgreSQL (via Neon.tech)

  - Prisma ORM for type-safe queries

  - Vercel KV (Redis) for caching

  - Vercel Blob for image storage



- **APIs & Services:**  

  - Replicate API (for image generation)  

  - OpenAI API (for text/prompt generation)  

  - GitHub OAuth API (for authentication)

- **Utilities:**  

  - `nanoid` for unique IDs  

  - `jszip` for downloading multiple images as a ZIP



## Getting Started



### Prerequisites



- **Node.js** v18 or later



### Installation



1. **Clone the repository:**



   ```bash

   git clone https://github.com/yourusername/ai-stagram.git

   cd ai-stagram

   ```



2. **Install dependencies:**



   ```bash

   npm install

   ```



3. **Configure Environment Variables:**



   Create a `.env.local` file in the root of your project and add your credentials:



   ```env

   # API Keys

   REPLICATE_API_TOKEN=your_replicate_api_token_here

   OPENAI_API_KEY=your_openai_api_key_here



   # Database

   DATABASE_URL=your_neon_postgres_url_here



   # Auth

   GITHUB_ID=your_github_oauth_app_id

   GITHUB_SECRET=your_github_oauth_app_secret

   NEXTAUTH_URL=http://localhost:3000

   NEXTAUTH_SECRET=your_nextauth_secret



   # Storage

   BLOB_READ_WRITE_TOKEN=your_vercel_blob_token

   KV_URL=your_vercel_kv_redis_url

   KV_REST_API_URL=your_vercel_kv_rest_url

   KV_REST_API_TOKEN=your_vercel_kv_token

   ```



4. **Run the development server:**



   ```bash

   npm run dev

   ```



   Open [http://localhost:3000](http://localhost:3000) in your browser to see the app in action.



## Usage



- **Authentication:**

  1. Click "Continue with GitHub" to sign in

  2. Authorize the application

  3. You'll be redirected back with full access



- **Create Your AI Feed:**

  1. Select an AI type from the available options.

  2. Choose a photo subject and style generated by the AI.

  3. Enter a custom name for your AI.

  4. Click the **Create my Instagram AI** button to generate your personalized feed.



- **Interact with Posts:**

  - **Like:** Click the heart icon to like a post.

  - **Share:** Use the share button to generate a shareable link (copied automatically to your clipboard).

  - **Download:** Click the download icon to download all posts as a ZIP archive.

  - **Comment:** Add comments directly below posts.



- **View Shared Feeds:**

  - When a feed is shared, the app stores the feed data in Vercel KV.  

  - Shared feeds can be viewed via a unique URL (e.g., `/shared/[id]`).



## Admin Features



- **Access Control:**

  - Admin scope management through GitHub OAuth

  - Protected admin routes and API endpoints

  - Role persistence across sessions



- **User Management:**

  - View all system users

  - Enable/disable user accounts

  - Track user activity (images, shares)

  - Monitor user engagement



- **Content Management:**

  - View all shared feeds

  - Enable/disable shared content

  - Track feed views and engagement

  - Direct access to shared content



- **Analytics:**

  - User statistics

  - Content engagement metrics

  - Share tracking

  - View count monitoring



## File Structure



```

ai-stagram/

├── app/

│   ├── api/

│   │   ├── auth/[...nextauth]/   # NextAuth configuration

│   │   ├── share/                # Feed sharing endpoints

│   │   └── admin/                # Admin API endpoints

│   ├── admin/                    # Admin dashboard

│   ├── auth/

│   │   └── signin/              # Custom sign-in page

│   ├── shared/[id]/page.tsx     # Page for displaying shared feeds

│   ├── actions.ts             # Server actions for generating prompts and images

│   ├── constants.ts           # AI types and other constant values

│   ├── header.tsx             # Header component with navigation and action buttons

│   ├── instagram-feed.tsx     # Main feed component (Instagram-style)

│   ├── layout.tsx             # Root layout

│   ├── page.tsx               # Main entry point rendering the feed

│   └── globals.css            # Global styles for the app

├── components/

│   ├── ui/                   # Shadcn UI components

│   └── providers.tsx         # Auth & theme providers

├── hooks/                     # Custom React hooks (e.g., use-mobile, use-toast)

├── lib/

│   ├── utils.ts              # Utility functions

│   └── prisma.ts             # Prisma client instance

├── styles/                    # Additional global styles

├── package.json

├── next.config.mjs

├── tailwind.config.js

└── tsconfig.json

```



## Deployment



### Deployment with GitHub Auto-Deploy



1. **Connect Repository to Vercel:**

   - Go to [Vercel Dashboard](https://vercel.com/dashboard)

   - Import your GitHub repository

   - Configure project settings



2. **Set Environment Variables:**

   - In Vercel project settings, add all variables from `.env.local`

   - Update for production:

     * `DATABASE_URL`: Your production database URL

     * `NEXTAUTH_URL`: Your production domain

     * `NEXTAUTH_SECRET`: Generate new secret for production

     * All API keys and tokens



3. **Auto-Deploy Process:**

   - Push changes to GitHub

   - Vercel automatically:

     * Detects changes

     * Generates Prisma Client

     * Builds the application

     * Deploys to edge network



4. **Monitor Deployment:**

   - Watch build progress in Vercel dashboard

   - Check build logs for any issues

   - Monitor database health



### Database Management



#### Development

- Migrations run automatically in development

- Use Prisma Studio to manage data:

  ```bash

  npx prisma studio

  ```



#### Admin Access

- Set admin scope in Account table:

  ```bash

  # Open Prisma Studio

  npx prisma studio



  # Find your Account record

  # Set scope to: "read:user,user:email,admin"

  ```



#### Production

- Migrations should be run manually before deployment:

  ```bash

  # Generate migration

  npx prisma migrate dev



  # After testing locally, deploy to production

  npx prisma migrate deploy

  ```

- This prevents timeout issues during Vercel deployment

- Always backup your database before running migrations



## Development Tools



- **Prisma Studio:**

  ```bash

  npx prisma studio

  ```

  Access database records at http://localhost:5555



- **Vercel CLI:**

  ```bash

  # Install CLI

  npm i -g vercel



  # Link project

  vercel link



  # Pull env vars

  vercel env pull

  ```



## Contributing



Contributions are welcome! Please feel free to open issues or submit pull requests with improvements, bug fixes, or new features.



## Data Management



- **Database:** Access records via Prisma Studio

- **KV Storage:** Manage through Vercel dashboard

- **Blob Storage:** View and manage in Vercel Storage section



## License



This project is licensed under the [MIT License](LICENSE).



## Acknowledgments



- Inspired by the creative possibilities of generative AI.

- Built with Next.js, Tailwind CSS, and a suite of modern UI libraries including Radix UI and shadcn UI.

- Special thanks to the communities behind [OpenAI](https://openai.com) and [Replicate](https://replicate.com).