Temmbo

A modern, glassmorphic AI prompt sharing platform for the next generation of creators, powered by Next.js 14, React, Tailwind CSS, and Supabase.

---

🚀 Overview

Temmbo is a full-stack web application for discovering, sharing, and managing high-quality prompts for large language models (LLMs) and generative AI. It features a TikTok-style infinite masonry feed, robust user authentication, real-time notifications, and a seamless, glassmorphic user experience for both anonymous and authenticated users.

---

✨ Features

• Infinite Masonry Feed: TikTok-style, responsive, and fast. Explore trending, new, and saved prompts.
• Prompt Creation: Add prompts with images, tags, and rich metadata. All uploads are attributed to users.
• Authentication: Email/password, magic link, and OAuth (Google, GitHub). Email verification required for restricted actions.
• User Profiles: View your uploads, likes, and collections in a modern, glassmorphic banner-style layout with slider toggles.
• Likes, Saves, Copies: Engage with the community and manage your favorite prompts. Copy prompts with one click.
• Comments & Replies: Threaded comments, likes/dislikes on comments, and reply notifications.
• Collections: Organize prompts into collections, with public/private options and color coding.
• Notifications: Real-time, per-user notifications for likes, saves, comments, replies, and copies. Delivered via a glassmorphic modal overlay.
• Branded OAuth: Google and GitHub sign in/up with branded, accessible buttons.
• Glassmorphic UI: Consistent overlays and modals (Create Prompt, Comments, Notifications, Auth, etc.) with accessibility in mind.
• Full Prompt Display: Complete prompt visibility on detail pages with proper text wrapping for long or unbroken content.
• Performance: Virtualized lists (react-window), API caching, and optimized Supabase queries for speed at scale.
• Accessibility: All modals and UI elements are accessible, keyboard-friendly, and screen-reader compatible.
• Admin Panel (optional): Moderate content, manage users, and view analytics (admin only).

---

🎨 Recent UI/UX Improvements

• Profile Page Redesign: Glassmorphic banner-style profile cards with blue accent colors and improved breathing room
• Grid/List Toggle: Modern slider-style toggle for switching between prompt display modes
• Prompt Detail Enhancement: Full prompt display with proper text wrapping, ensuring long or unbroken prompts are always readable
• Glassmorphic Consistency: Unified design language across all components with backdrop blur and subtle borders
• List View Optimization: Compact, horizontally-oriented prompt cards for better content density

---

🛠️ Tech Stack

• Frontend: Next.js 14 (App Router, TypeScript), React, Tailwind CSS
• Backend: Supabase (Postgres, Auth, Storage, RLS)
• State Management: React Context, custom hooks
• UI: shadcn/ui, lucide-react icons, glassmorphic design
• Performance: react-window for list virtualization
• Project Management: Taskmaster (MCP) for AI-driven task and complexity management

---

📁 Project Structure

Temmbo/
├── app/                      # Next.js app directory (routes, pages, layouts, modals)
│   ├── explore/              # Explore page and related routes
│   ├── notifications/        # Notifications modal/page (legacy)
│   ├── p/                    # Prompt detail pages
│   ├── saved/                # Saved prompts
│   ├── profile/              # User profile pages
│   ├── clientLayout.tsx      # Client-side layout logic
│   ├── layout.tsx            # Root layout
│   ├── page.tsx              # Main landing page
│   └── not-found.tsx         # 404 page
│
├── components/               # Reusable UI and logic components
│   ├── ui/                   # Shared UI primitives (buttons, modals, etc.)
│   ├── sidebar.tsx           # Main sidebar navigation
│   ├── sign-up-modal.tsx     # Sign up modal and logic
│   ├── sign-in-modal.tsx     # Sign in modal and logic
│   ├── create-prompt-modal.tsx # Modal for creating prompts
│   ├── notifications-modal.tsx # Modal for notifications
│   ├── prompt-card.tsx       # Prompt display card (grid/list views)
│   ├── prompt-detail-view.tsx # Full prompt detail display
│   ├── masonry-grid.tsx      # Masonry feed layout
│   └── ...                   # Many more feature components
│
├── lib/                      # Utility functions and Supabase client
│   ├── supabase/             # Supabase client setup (client.ts, server.ts)
│   └── ...                   # General utilities
│
├── hooks/                    # Custom React hooks
│   ├── use-auth.ts           # Authentication logic
│   ├── use-saved-prompts.ts  # Saved prompts logic
│   └── ...                   # Other hooks
│
├── contexts/                 # React context providers
│   └── saved-prompts-provider.tsx # Saved prompts context
│
├── types/                    # TypeScript type definitions
│   └── ...                   # Types for prompts, auth, etc.
│
├── public/                   # Static assets (images, icons)
│   └── ...
│
├── styles/                   # Tailwind and global CSS
│   └── globals.css
│
├── .taskmaster/              # Taskmaster AI project management
│   ├── docs/                 # PRD and documentation
│   │   └── prd.md            # Product Requirements Document
│   ├── reports/              # Complexity and analysis reports
│   ├── tasks/                # Task files and tasks.json
│   ├── templates/            # Example PRD templates
│   └── config.json           # Taskmaster config
│
├── package.json              # Project dependencies and scripts
├── tailwind.config.ts        # TailwindCSS configuration
├── tsconfig.json             # TypeScript configuration
├── next.config.mjs           # Next.js configuration
├── postcss.config.mjs        # PostCSS configuration
├── README.md                 # Project documentation (this file)
└── .env.example              # Example environment variables

Key Points:

• All main features are modularized in components/ and app/.
• Project management and planning are handled in .taskmaster/ using Taskmaster AI.
• Utility logic, hooks, and types are separated for clarity and reusability.
• Static assets live in public/, and all styling is managed with Tailwind in styles/.

---

🔐 Authentication & Security

• Supabase Auth handles all authentication:
  • Sign up: Email/password, magic link, or OAuth (Google, GitHub)
  • Email verification: Required for restricted actions (creating prompts)
  • Sign in: Email/password or OAuth
  • Forgot password: Email reset link
• User data is synced from auth.users to public.users via a database trigger.
• Session management is handled via Supabase client and React context.
• Row Level Security (RLS):
  • RLS is enabled on all user data tables (users, prompts, comments, likes, saves, collections, comment_likes, audit_logs)
  • Policies ensure users can only access their own data or public data as appropriate
• API Security:
  • All API routes validate user auth and permissions
  • Sensitive actions (create, update, delete) are protected
• OAuth:
  • Branded Google and GitHub buttons, accessible and secure

---

📝 How to Use the App

• Browse Prompts: Visit the home page to see the infinite feed. Copy prompts with one click.
• Sign Up / Sign In: Create an account to unlock all features. Email verification is required for some actions.
• Create Prompts: Use the "Create Prompt" modal to add new prompts with images (uploaded to Supabase Storage).
• Like, Save, Copy: Interact with prompts and manage your favorites.
• Explore: Use the Explore page to search and discover prompts by keyword or tag.
• Profile: View your uploads, likes, and collections in your account page with the new glassmorphic design.
• View Modes: Switch between Grid and List views using the modern slider toggle.
• Prompt Details: Click on any prompt to view the full content with proper text wrapping.
• Notifications: View notifications for likes, saves, comments, replies, and copies in the notifications modal overlay.
• Collections: Organize prompts into collections, set public/private, and color code them.
• Comments & Replies: Add threaded comments, like/dislike comments, and reply to others.
• Admin Panel: (If you are an admin) Moderate content, manage users, and view analytics.

---

🏆 Feed Ranking Algorithm

Prompts are ranked in the feed using a scoring formula:

score = (like_count × 1.5) + (save_count × 4) + (copy_count × 1) + (1200 / (hours since created + 2))

• The score is calculated in a Supabase view (prompt_feed) and used for ordering.
• The algorithm can be tuned as the community grows.
• No friend/social graph boost is currently implemented.

---

🗂️ Privacy Model

• Uploads: Only the user can see their private uploads; public uploads are visible to all.
• Collections: Public collections are visible to all; private collections are only visible to the owner.
• Likes/Saves: Users can view their liked/saved prompts in their profile.
• Strict privacy enforcement is implemented in both frontend and backend (Supabase RLS).

---

⚙️ Setup Instructions

1. Clone the Repository

git clone https://github.com/DKim0909/temmbo.git
cd temmbo

2. Install Dependencies

pnpm install
# or
npm install

3. Configure Environment Variables

• Copy .env.example to .env and fill in your Supabase project credentials:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
• (Optional) Add API keys for Taskmaster AI if using advanced features.

4. Supabase Setup

• Create a Supabase project.
• Set up the database schema (see migrations or use the SQL editor):
  • public.users table (synced with auth.users)
  • prompts, comments, likes, saves, collections, notifications, copies, comment_likes, audit_logs
• Configure Storage buckets for prompt images.
• Set up Row Level Security (RLS) and policies as needed.
• Add the user sync trigger:

  CREATE OR REPLACE FUNCTION public.handle_new_user()
  RETURNS trigger AS $$
  BEGIN
    INSERT INTO public.users (id, email, username)
    VALUES (
      NEW.id,
      NEW.email,
      COALESCE(NEW.raw_user_meta_data->>'username', '')
    )
    ON CONFLICT (id) DO NOTHING;
    RETURN NEW;
  END;
  $$ LANGUAGE plpgsql SECURITY DEFINER;
  
  CREATE TRIGGER on_auth_user_created
    AFTER INSERT ON auth.users
    FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

5. Run the App Locally

pnpm dev
# or
npm run dev

Visit http://localhost:3000

---

🧠 Taskmaster/MCP Workflow

• Taskmaster AI manages project tasks, subtasks, and complexity:
  • Tasks are generated from the PRD (.taskmaster/docs/prd.md).
  • Tasks are expanded, assigned, and tracked in .taskmaster/tasks/tasks.json.
  • Use the Taskmaster CLI or MCP tools to view, update, and complete tasks.
  • Complexity analysis and subtask expansion help break down large features.
  • See .taskmaster/ for all project management files.

---

🤝 Contribution Guidelines

1. Fork the repo and create a feature branch.
2. Use Taskmaster AI to add or expand tasks for your feature/bugfix.
3. Follow the existing code style (TypeScript, Tailwind, modular components).
4. Write clear commit messages and document your changes.
5. Open a pull request and link to relevant tasks.
6. Report bugs via GitHub Issues or Taskmaster tasks.

---

🚀 Deployment Notes

• Recommended: Deploy frontend on Vercel and backend on Supabase.
• Set all required environment variables in Vercel/Supabase dashboard.
• Ensure Supabase Storage and Auth redirect URLs are configured for your production domain.
• Run database migrations as needed.

---

📝 Credits & License

• Created by: Temmbo team
• Project Management: Taskmaster AI
• License: MIT

---

For questions or help, open an issue or contact the maintainers.