🔥📜 Floid — The First Prompt Network for Everyone

Floid is a modern 🔥 platform where anyone can create ✒️, share 📩, and discover 🧭 prompts for GPT 🤖, image generation 📷, and more. It’s a sleek, thread-based 🧵 website designed for the prompt engineering community—no AI-generated content, just real user creativity ✨.

Important

If you find Floid useful, please star the repository on GitHub! Your support helps drive development.

Note

Floid is currently in beta. Expect bugs and rapid changes.

🙋‍♀️ What is Floid?

Floid is the first open prompt network for everyone. Users can generate, share, and discuss prompts for GPT, image generation, or any other AI tool. Floid is a community-driven space for prompt creators and enthusiasts.

✨ Features

A next-gen, thread-based platform built with Once UI, focused on prompt sharing and discovery.

1. 📝 Creation: Create and share prompts for GPT, image generation, and more
2. 🧵 Thread-based Discussions: Discuss and refine prompts in organized threads
3. ⚡ Real-time Activity: Instantly see new prompts and comments via Supabase subscriptions
4. 🔐 Secure Authentication: Google OAuth integration for user management
5. 📱 Responsive Design: Optimized for all devices
6. 🎨 Modern UI: Built with Once UI for a polished look
7. 🏷️ Prompt Metadata: Each prompt displays tags, models, author, creation date, and click counts
8. 🗂️ Rich Prompt Cards: Prompts are shown in interactive cards with copy, preview, and code features
9. 🧑‍💻 Model Icons: Prompts can be tagged with supported models (ChatGPT, Gemini, Perplexity, Android, Apple, Linux, Code, Others)
10. 🗑️ Edit/Delete Permissions: Only prompt authors can edit or delete their prompts

🗃️ Prompt Card Details

Each prompt card includes:

• Title, description, tags, and model icons (ChatGPT, Gemini, Perplexity, Android, Apple, Linux, Code, Others)
• Author and creation date
• Click count
• Edit/Delete buttons (if you are the author)
• Copy and preview features
• 🚨 Future API usage 🚨

🗄️ Database Setup

Floid uses Supabase (PostgreSQL) for data storage.

Try Floid and join the prompt engineering community.

🛠️ Technology Stack

• ⚛️ Next.js 15 (React 19)
• 🟦 TypeScript
• 🟨 Javascript (JSON config)
• 🎨 Tailwind CSS, SCSS, PostCSS
• 🦸 Supabase (Database, Auth, Real-time)
• 🧩 Once UI (Design System)
• 🏃 Framer Motion, GSAP (Animations)
• ▲ Vercel (Deployment)

🎥 Demo

See Floid in action: Demo.

🌠 Getting Started

Follow these steps to run Floid locally for development.

⚙️ Prerequisites

1. Node.js 18+
2. npm or yarn
3. Supabase account (for development)

📩 Installation

1. Clone the repository:

git clone https://github.com/divyanshudhruv/floid.git
cd floid

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env.local

Add your Supabase credentials to .env.local:

SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser.

🧩 Design System & Customization (dev)

• 🎨 Tokens:

  • Design tokens (colors, spacing, typography) in src/resources/once-ui.config.js
  • Custom styles in src/resources/custom.css and src/app/global.css

• 🧱 Components:

  • Use Once UI components from src/components/eldoraui, magicui, and ui

• 🌗 Theming:

  • Responsive, mobile-first design

📁 Project Structure

A brief overview of Floid's directory structure:

floid/
├── src/
│   ├── app/
│   │   ├── (main)/           # Main application pages & threads
│   │   ├── auth/             # Authentication
│   │   └── api/              # OG image generation
│   ├── blocks/               # Animation components
│   ├── components/           # UI components
│   └── lib/                  # Utility functions
├── public/                   # Static assets
├── package.json
├── .env.example              # Example environment variables
├── .env.local                # Local environment variables
├── .eslintrc.json            # ESLint config
├── biome.json                # Biome config
├── postcss.config.mjs        # PostCSS config
├── next.config.mjs           # Next.js config
├── tsconfig.json             # TypeScript config
├── LICENSE                   # License
├── README.md                 # This file
├── .github/                  # GitHub workflows & templates
├── .next/                    # Next.js build output

👥 Creators

Connect with us!

1. 👨‍💻 Lorant One: Site / Threads / LinkedIn
2. 👨‍💻 Divyanshu Dhruv: Site / LinkedIn

📄 License

See LICENSE for details.

🏷️ Credits

• 🧩 Built with Once UI
• 🦸 Powered by Supabase

Crafted in shadows for the open-source community.