rudraprasad69/ai-text-to-image-platform

1. Overall shape

PixelForge AI is a single-page Next.js App Router application with a strong marketing/interactive dashboard feel. The app/page.tsx entry composes the full experience from reusable sections rather than navigating across many routes.

2. Presentation layer

Most of the UI lives in components/, with section-style components such as hero, features, models, pricing, gallery, testimonials, prompt-demo, chatbot, navbar, and footer. This suggests the page is built as a vertically stacked landing experience where each section owns its own visuals and local interactions.

3. Client-side interaction layer

hooks/useImageGeneration.ts is the main interaction hook and likely centralizes prompt submission, loading/error state, and response handling for the generation flow. It is the bridge between user actions in the UI and the backend API routes.

4. API boundary

The app exposes two Next route handlers under app/api/: generate/route.ts and models/route.ts. These form the server-side boundary for image generation requests and model discovery/comparison data, keeping the UI decoupled from the underlying AI/provider integration.

5. Backend integration abstraction

lib/api-config.ts likely holds shared configuration for endpoints, model metadata, pricing parameters, or provider settings. This is the main place where generation-related constants are centralized so the UI and API routes stay in sync.

6. Shared utilities and design system

lib/utils.ts and components/ui/button.tsx indicate a small shared foundation for common helpers and reusable primitives. This is the “glue” layer that keeps styling and small formatting logic from leaking into feature components.

7. Visual and motion subsystem

components/particle-bg.tsx and components/scroll-animate.tsx provide the ambient motion layer. Combined with Framer Motion in the README stack, they support the premium animated feel without being tied to core business logic.

8. Content and feature modules

gallery.tsx, models.tsx, pricing.tsx, prompt-demo.tsx, and chatbot.tsx represent distinct product capabilities: image gallery browsing, model comparison, pricing simulation, prompt sandboxing, and FAQ assistance. These modules are independent enough to be diagrammed as separate UI subsystems sharing the same app shell.

9. Static asset flow

public/images/hero and public/images/gallery provide the visual content used by the hero and gallery sections. The app appears to rely on bundled static assets for showcase imagery rather than dynamic media storage.

10. Styling and app shell

app/layout.tsx, app/globals.css, tailwind.config.ts, and postcss.config.mjs define the global shell and styling pipeline. This is a Tailwind-first frontend with app-wide layout, theme, and CSS behavior established at the framework level.

11. Runtime and deployment boundary

The stack is explicitly Next.js + React + TypeScript, with serverless-style API routes suitable for deployment on Vercel/Netlify. There is no sign of a database, auth system, or background worker; the architecture is primarily a stateless frontend plus thin server endpoints.

12. How the pieces connect

User actions originate in the section components, flow through useImageGeneration, and then cross the API boundary into generate or models. The response is rendered back into the interactive UI, while the rest of the page remains mostly presentational and driven by static content, local state, and animation.