You can find-shyt and phish them

A real-time question & answer chat / challenge application (built with Next.js, TypeScript, Supabase, etc.).

• Demo / Live
• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Setup
  • Env Variables
  • Running Locally
  • Deploying
• How it Works / Architecture
• Folder Structure
• Contributing
• License
• Acknowledgements

👉 find-shyt.vercel.app

• 🔄 Real-time updates of chat messages and answers (via Supabase real-time)
• 👥 Paired Q&A — users respond to the same question and see each other’s answers
• 💬 Chat interface to discuss or reflect after answering
• 📅 Daily / Question cycling
• ⚡ State syncing so that when one user responds, the partner sees it live
• 🧹 Proper cleanup of subscriptions / listeners

• Frontend / Framework: Next.js (React) + TypeScript
• UI / Styling: Tailwind CSS
• Backend / Database / Real-time: Supabase (auth, Postgres, real-time features)
• Hosting / Deployment: Vercel
• Utilities / Hooks: Custom React hooks, API wrappers

• Node.js (>= 16)
• pnpm / npm / yarn
• Supabase project (with database + real-time enabled)

Clone the repo and install dependencies:

git clone https://github.com/k499wang/FindShyt.git
cd FindShyt
pnpm install   # or npm install / yarn install

Create a .env.local file and provide the required keys:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_KEY=your-supabase-service-key

pnpm dev
# or npm run dev / yarn dev

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

Deploy easily via Vercel.
Make sure to set the environment variables in your project dashboard.

1. User / Pairing

   • Users are paired via a pairId. Each “question session” is identified by pairId + day + questionId.

2. Subscriptions / Real-Time Updates

   • The frontend subscribes (via apiSubscribeAnswerChat) to Supabase real-time changes.
   • On DB updates, callbacks (onMessagesChange, onAnswersChange) run and refresh local state.

3. Effect Cleanup & Re-subscription

   • The subscription lives inside a React useEffect.
   • When dependencies change or the component unmounts, it unsubscribes to prevent leaks.

4. Data Flow

   • User submits answer → DB insert → Supabase pushes change → frontend updates partner view.
   • Messages are stored in a messages table and synced the same way.

/app
/components
/hooks
/lib
/public
/styles
/types
/middleware.ts
/next.config.mjs
/package.json
/tsconfig.json

Contributions welcome!

1. Fork the repo
2. Create a feature branch (git checkout -b feat/your-feature)
3. Commit your changes
4. Push and open a PR

This project is licensed under the MIT License.

• Supabase for real-time & database
• Vercel for hosting
• Tailwind CSS for styling
• Hackathon spirit ✨