✦

GenPix — AI Image Generator

Create stunning, high-quality images from text prompts — instantly and for free.

Features • Tech Stack • Getting Started • Project Structure • API Reference • Contributing • License

---

✨ Overview

GenPix is a full-stack AI image generation web application that lets users turn natural-language prompts into beautiful visuals in seconds. Powered by Pollinations.ai on the backend, GenPix provides a sleek, modern interface for creating, previewing, and downloading AI-generated images — no design skills or API keys required.

---

🖼️ Features

Feature	Description
Prompt-to-Image	Describe any scene and get a high-quality AI-generated image in seconds
Multiple Aspect Ratios	Choose from Square (1:1), Landscape (16:9), Portrait (9:16), and Wide (21:9)
Instant Download	Download generated images as PNG with a single click
Prompt Suggestions	Pre-built creative prompts to spark inspiration
Circular Gallery	Interactive 3D circular image gallery on the landing page (powered by OGL / WebGL)
Showcase Gallery	Curated gallery page browsing AI-generated images by style category
AI Chat	Dummy conversational AI chat interface page
Voice Assistant	Dummy AI voice assistant interface page
Dark Theme	Premium dark UI with lime-green accents and smooth animations
Responsive Design	Fully responsive across desktop, tablet, and mobile devices
Zero Auth Required	No sign-up, no API key — start generating immediately

---

🛠️ Tech Stack

Frontend

Technology	Purpose
Next.js 16	React framework with App Router
React 19	UI library
TypeScript	Type safety
Tailwind CSS 4	Utility-first styling
OGL	WebGL-based circular gallery
Lucide React	Icon library
Space Grotesk	Primary font
Pixelify Sans	Accent pixel font

Backend

Technology	Purpose
Express.js 5	HTTP server & API routing
Pollinations.ai	Free AI image generation (no API key)
CORS	Cross-origin request handling

---

🚀 Getting Started

Prerequisites

• Node.js ≥ 18
• npm ≥ 9

1. Clone the Repository

git clone https://github.com/mhdjaseemtk/flight-landing.git
cd flight-landing

2. Set Up the Backend

cd backend
npm install
npm run dev

The backend server will start at http://localhost:5000.

3. Set Up the Frontend

Open a second terminal:

cd frontend
npm install
npm run dev

The frontend dev server will start at http://localhost:3000.

4. Open the App

Navigate to http://localhost:3000 in your browser. Click "Get Started" or go to /generate to start creating images!

Environment Variables (Optional)

Variable	Default	Description
PORT	5000	Backend server port
NEXT_PUBLIC_API_URL	http://localhost:5000	Backend API URL used by the frontend

To connect the frontend to a deployed backend, create a .env.local file in the frontend/ directory:

NEXT_PUBLIC_API_URL=https://your-deployed-backend.com

---

📁 Project Structure

GenPix/
├── backend/
│   ├── index.js              # Express server & /api/generate endpoint
│   ├── package.json
│   └── node_modules/
│
├── frontend/
│   ├── public/               # Static assets (gallery images 1.jpg–7.jpg)
│   ├── src/
│   │   ├── app/
│   │   │   ├── layout.tsx    # Root layout (Navbar + Footer)
│   │   │   ├── page.tsx      # Landing page (Hero + Circular Gallery)
│   │   │   ├── globals.css   # Global styles, theme tokens, animations
│   │   │   ├── generate/
│   │   │   │   └── page.tsx  # AI image generation page (/generate)
│   │   │   ├── gallery/
│   │   │   │   └── page.tsx  # Showcase gallery — browse by style (/gallery)
│   │   │   ├── about/
│   │   │   │   └── page.tsx  # About GenPix — mission, stats, values (/about)
│   │   │   ├── pricing/
│   │   │   │   └── page.tsx  # Pricing plans with toggle (/pricing)
│   │   │   ├── blog/
│   │   │   │   └── page.tsx  # Featured posts & article card grid (/blog)
│   │   │   ├── contact/
│   │   │   │   └── page.tsx  # Contact form with sidebar (/contact)
│   │   │   ├── chat/
│   │   │   │   └── page.tsx  # AI chat interface (dummy) (/chat)
│   │   │   └── voice/
│   │   │       └── page.tsx  # AI voice assistant interface (dummy) (/voice)
│   │   │
│   │   └── components/
│   │       ├── Navbar.tsx          # Sticky navigation bar
│   │       ├── HeroSection.tsx     # Hero banner with CTA
│   │       ├── FeaturesSection.tsx # Circular gallery showcase
│   │       ├── CircularGallery.tsx # WebGL 3D circular gallery (OGL)
│   │       ├── ImageCarousel.tsx   # Image carousel component
│   │       └── Footer.tsx          # Site footer
│   │
│   ├── package.json
│   ├── tsconfig.json
│   ├── next.config.ts
│   ├── postcss.config.mjs
│   └── eslint.config.mjs
│
└── README.md

---

📄 Pages

Route	Page	Description
/	Landing	Hero section with animated headline, CTA button, and WebGL circular image gallery
/generate	Generate	Full-featured AI image generation UI with prompt input, aspect ratio selector, and download
/gallery	Gallery	Curated showcase of AI-generated images organised into 6 style categories with hover previews
/about	About	Mission statement, live stats (images generated, uptime, users), and core values grid
/pricing	Pricing	Free / Pro / Enterprise plan cards with monthly/annual billing toggle and feature comparison
/blog	Blog	Featured article hero, category filter tags, and a responsive article card grid
/contact	Contact	Multi-field contact form with inquiry type selector and contact details sidebar
/chat	Chat	AI chat assistant interface (dummy UI, ready for backend integration)
/voice	Voice	AI voice assistant interface (dummy UI, ready for backend integration)

---

🔌 API Reference

GET /

Health check endpoint.

Response:

{ "message": "Welcome to the GenPix API!" }

POST /api/generate

Generate an AI image from a text prompt.

Request Body:

{
  "prompt": "A futuristic city skyline at sunset with flying cars",
  "width": 1024,
  "height": 1024
}

Parameter	Type	Required	Default	Description
prompt	string	✅	—	Text description of the desired image
width	number	❌	1024	Output image width in pixels
height	number	❌	1024	Output image height in pixels

Success Response: 200 OK — Returns the generated image as a binary blob (image/jpeg).

Error Responses:

Status	Description
400	Missing or empty prompt
502	Image generation service unavailable
500	Internal server error

---

🎨 Design System

GenPix uses a carefully crafted design system built on Tailwind CSS 4 with custom theme tokens:

Token	Value	Usage
--color-accent	#a3e635	Primary lime-green accent
--color-accent-dim	#84cc16	Subdued accent variant
--color-bg	#090909	App background
--color-surface	#111111	Card / elevated surfaces
--color-border	rgba(255,255,255,0.08)	Subtle borders
--font-sans	Space Grotesk	Primary typeface
--font-pixel	Pixelify Sans	Decorative pixel font

Custom Animations

• animate-spin-slow — Slow rotating icon in the navbar
• animate-fade-up — Staggered fade-in entrance animations
• animate-shimmer — Loading skeleton shimmer effect
• animate-pulse-dot — Pulsing status indicator
• animate-beam — Glowing beam effect

---

🧑‍💻 Contributing

Contributions are welcome! Here's how to get started:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m "Add amazing feature"
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Tips

• The backend uses node --watch compatible syntax — restart the server after changes, or use a tool like nodemon.
• The frontend supports hot-reload via Next.js dev server.
• All styling should use Tailwind CSS utility classes and the design tokens defined in globals.css.

---

📄 License

This project is licensed under the ISC License. See the backend package.json for details.

---

Built with ❤️ by mhdjaseemtk