🍌 Banana Nano Prompt Gallery

A modern, visually stunning AI prompt gallery showcasing 1084+ carefully curated AI-generated artworks.

🇨🇳 中文版 README |

✨ Features

🎨 Design & Experience

Unique Design: Playful Pop-Art x Futurism style with Banana Yellow + Neon Purple color scheme
Custom Font System: Syne (display) + Outfit (body) + Space Mono (code)
Smooth Animations: Framer Motion powered silky interactions and page transitions
Responsive Layout: Perfect support for mobile, tablet, and desktop devices

🔍 Powerful Functionality

Real-time Search: Quick search across titles and prompt content
Tag Filtering: Filter cases by style, model, and other tags
Bilingual Support: Chinese/English automatic switching with intelligent language detection
Detail Modal: Click cards to view large images and complete prompts
One-click Copy: Quickly copy prompts to clipboard

⚡ Performance Optimization

CDN Acceleration: 1303+ images distributed globally via Cloudflare R2 CDN
Image Optimization: Next.js Image component automatic optimization
Code Splitting: On-demand loading for fast first-screen rendering
Data Caching: Smart caching strategy

🚀 Developer Experience

TypeScript: Type-safe with excellent development experience
Component-based: Clear component structure and code organization
Incremental Upload: R2 image incremental upload tool avoids duplicate uploads

🎯 Tech Stack

Technology	Version	Purpose
Next.js	15.5.9	React framework, App Router
React	19.0	UI library
TypeScript	5	Type safety
Tailwind CSS	3.4	Styling framework
Framer Motion	11.15	Animation library
AWS SDK	3.962	R2 storage client
Cloudflare R2	-	Image CDN storage

Font System

Syne (700, 800) - Headings and display text
Outfit (300-700) - Body and UI text
Space Mono (400, 700) - Code and prompts

📦 Installation & Usage

Requirements

Node.js 18+
npm or yarn

Quick Start

# 1. Clone repository
git clone https://github.com/gotoBest/banana-nano-prompt.git
cd banana-nano-prompt

# 2. Install dependencies
npm install

# 3. Start development server
npm run dev

# 4. Open browser
# http://localhost:3000

Build Production Version

# Build
npm run build

# Start production server
npm run start

🚀 Deployment

Vercel Deployment (Recommended)

Click the button above
Import GitHub repository
Vercel auto-detects Next.js configuration
Click "Deploy"

Environment Variables (Optional)

If you need to configure CDN or other features:

# R2 CDN domain (images already configured as https://gotovpn.win)
NEXT_PUBLIC_R2_CDN_URL=https://your-cdn-domain.com

🎨 Design System

Color Scheme

--color-banana: #FFE135;      /* Banana Yellow */
--color-neon-pink: #FF6B9D;   /* Neon Pink */
--color-neon-purple: #B829DD; /* Neon Purple */
--color-bg-dark: #0F0E1E;     /* Dark Background */
--color-bg-card: #1A1033;     /* Card Background */

Font Hierarchy

--font-display: 'Syne', sans-serif;
--font-body: 'Outfit', sans-serif;
--font-mono: 'Space Mono', monospace;

Component Features

Glass Card: Frosted glass effect cards
Neon Glow: Neon glowing borders
Skeleton Shimmer: Loading screen animation
Hover Effects: 3D tilt and zoom effects

📁 Project Structure

banana-nano-prompt/
├── src/
│   ├── app/
│   │   ├── globals.css          # Global styles and CSS variables
│   │   ├── layout.tsx           # Root layout (font loading)
│   │   └── page.tsx             # Main page
│   ├── components/
│   │   ├── Header.tsx           # Top navigation bar
│   │   ├── PromptCard.tsx       # Case card component
│   │   ├── Modal.tsx            # Detail modal
│   │   └── MetadataUpdater.tsx  # SEO metadata update
│   ├── contexts/
│   │   └── LanguageContext.tsx  # Language switch context
│   ├── data/
│   │   ├── prompts.json         # 1084 cases data
│   │   ├── title-en.json        # English translations
│   │   └── id-title.json        # ID-title mapping
│   ├── lib/
│   │   ├── data.ts              # Data loading
│   │   └── i18n.ts              # Internationalization
│   └── types/
│       └── index.ts             # TypeScript type definitions
├── public/
│   └── images/                  # Image folder (migrated to R2)
├── scripts/
│   ├── upload-images-to-r2.js  # R2 upload script
│   ├── update-image-urls-to-r2.js # URL update script
│   └── download-images.js      # Image download script
├── .env.local.example           # Environment variables template
├── next.config.js               # Next.js configuration
├── tailwind.config.ts           # Tailwind configuration
└── package.json

📊 Data Statistics

Total Cases: 1084 AI prompt cases
Image Count: 1303+ high-quality images
Storage: Cloudflare R2 CDN
Data Size: ~2MB (excluding images)
Supported Languages: Chinese, English

🔧 R2 CDN Management

Upload Images to R2

# First time or incremental upload
npm run r2:upload

# Update image URLs
NEXT_PUBLIC_R2_CDN_URL=https://your-cdn.com npm run r2:update-urls

Features

✅ Incremental Upload: Automatically skips already uploaded files
✅ Record Tracking: r2-upload-record.json tracks upload history
✅ R2 Sync: Automatically syncs existing files from R2
✅ Progress Display: Real-time upload/skip progress

🌍 Internationalization

Supported Languages

🇨🇳 Chinese (Simplified)
🇺🇸 English

Auto Detection

Automatically switches based on browser language
Chinese users see Chinese by default
Other languages default to English
Manual switching takes effect immediately

🎯 Use Cases

✅ AI artists finding inspiration
✅ Prompt engineers reference and learning
✅ Designers exploring AI art styles
✅ Developers learning Next.js best practices

🛠️ Development Commands

# Development
npm run dev          # Start development server

# Build
npm run build        # Build production version
npm run start        # Start production server

# Image Management
npm run download-images      # Download images
npm run r2:upload            # Upload to R2
npm run r2:update-urls       # Update image URLs

# Code Check
npm run lint          # ESLint check

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Fork the repository
Create feature branch (git checkout -b feature/AmazingFeature)
Commit changes (git commit -m 'Add some AmazingFeature')
Push to branch (git push origin feature/AmazingFeature)
Open Pull Request

📝 Changelog

v1.0.0 (2026-01-06)

✅ Initial release
✅ 1084 AI prompt cases
✅ Bilingual support (Chinese/English)
✅ Responsive design
✅ R2 CDN integration
✅ Incremental upload functionality

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

Next.js - React framework
Tailwind CSS - CSS framework
Framer Motion - Animation library
Cloudflare R2 - Object storage
Nano Banana - AI prompt source

Made with 🍌 by gotoBest

⭐ If this project helps you, please give it a Star!

📧 Questions or suggestions? Welcome to submit Issue

Name		Name	Last commit message	Last commit date
src		src
.gitignore		.gitignore
DEPLOYMENT.md		DEPLOYMENT.md
I18N.md		I18N.md
R2_SETUP.md		R2_SETUP.md
README.md		README.md
README.zh-CN.md		README.zh-CN.md
download-images.js		download-images.js
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
retry-failed.js		retry-failed.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
update-image-urls-to-r2.js		update-image-urls-to-r2.js
upload-images-to-r2.js		upload-images-to-r2.js
upload-to-r2.sh		upload-to-r2.sh
vercel.json		vercel.json

Latest commit

History

Folders and files

Repository files navigation