Dev

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,47 @@
+---
+name: Bug Report
+about: Report a bug to help us improve
+title: '[BUG] '
+labels: bug
+assignees: ''
+---
+
+## Describe the Bug
+
+A clear and concise description of what the bug is.
+
+## Steps to Reproduce
+
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+## Expected Behavior
+
+A clear description of what you expected to happen.
+
+## Actual Behavior
+
+What actually happened instead.
+
+## Screenshots
+
+If applicable, add screenshots to help explain your problem.
+
+## Environment
+
+- **Browser**: [e.g., Chrome 120, Firefox 121]
+- **OS**: [e.g., Windows 11, macOS Sonoma]
+- **Device**: [e.g., Desktop, iPhone 15]
+- **Logged in**: [Yes/No]
+
+## Console Errors
+
+```
+Paste any browser console errors here
+```
+
+## Additional Context
+
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,30 @@
+---
+name: Feature Request
+about: Suggest an idea for this project
+title: '[FEATURE] '
+labels: enhancement
+assignees: ''
+---
+
+## Is your feature request related to a problem?
+
+A clear and concise description of what the problem is.
+Ex. I'm always frustrated when [...]
+
+## Describe the solution you'd like
+
+A clear and concise description of what you want to happen.
+
+## Describe alternatives you've considered
+
+A clear and concise description of any alternative solutions or features you've considered.
+
+## Additional context
+
+Add any other context, mockups, or screenshots about the feature request here.
+
+## Would you be willing to contribute this feature?
+
+- [ ] Yes, I'd like to implement this feature
+- [ ] I can help test this feature
+- [ ] No, just suggesting

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,40 @@
+## Description
+
+Brief description of what this PR does.
+
+## Type of Change
+
+- [ ] 🐛 Bug fix (non-breaking change which fixes an issue)
+- [ ] ✨ New feature (non-breaking change which adds functionality)
+- [ ] 💥 Breaking change (fix or feature that would cause existing functionality to change)
+- [ ] 📝 Documentation update
+- [ ] 🔧 Refactoring (no functional changes)
+- [ ] 🧪 Tests
+
+## Related Issue
+
+Fixes #(issue number)
+
+## How Has This Been Tested?
+
+Describe the tests you ran to verify your changes.
+
+- [ ] Manual testing in browser
+- [ ] Tested on mobile
+- [ ] Tested as logged-in user
+- [ ] Tested as guest
+
+## Screenshots (if applicable)
+
+| Before | After |
+|--------|-------|
+| image  | image |
+
+## Checklist
+
+- [ ] My code follows the project's code style
+- [ ] I have performed a self-review of my code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] My changes generate no new warnings
+- [ ] I have tested my changes locally
+- [ ] Any dependent changes have been merged and published

.github/workflows/backend-ci.yml

@@ -0,0 +1,43 @@
+name: Backend CI
+
+on:
+  pull_request:
+    branches: [master, main]
+    paths:
+      - 'backend/**'
+      - '.github/workflows/backend-ci.yml'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: backend
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: backend/yarn.lock
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Generate Prisma Client
+        run: npx prisma generate
+
+      - name: TypeScript compile check
+        run: npx tsc --noEmit
+
+      - name: Check for console.log (optional)
+        run: |
+          if grep -r "console.log" src/ --include="*.ts" | grep -v "// allowed"; then
+            echo "⚠️ Found console.log statements (consider removing)"
+          fi
+        continue-on-error: true

.github/workflows/backend-deploy.yml

@@ -0,0 +1,26 @@
+name: Deploy Backend to Railway
+
+on:
+  push:
+    branches: [master, main]
+    paths:
+      - 'backend/**'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Trigger Railway Deployment
+        run: |
+          curl -X POST "${{ secrets.RAILWAY_WEBHOOK_URL }}" \
+            -H "Content-Type: application/json" \
+            -d '{"branch": "master"}'
+        env:
+          RAILWAY_WEBHOOK_URL: ${{ secrets.RAILWAY_WEBHOOK_URL }}
+
+      - name: Deployment triggered
+        run: echo "🚀 Backend deployment triggered on Railway"

README.md

@@ -1,6 +1,6 @@
 # Threads App
 
-A modern social threads application built with GraphQL, Next.js, and PostgreSQL featuring secure JWT authentication with refresh tokens.
+A full-featured social threads application built with GraphQL, Next.js, and PostgreSQL - a Threads/Twitter clone with modern features.
 
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue)
 ![Next.js](https://img.shields.io/badge/Next.js-16-black)
@@ -33,8 +33,8 @@ threads-app/
 ### 1. Clone & Install
 
 ```bash
-git clone https://github.com/shahadot786/threads-backend-graphql.git
-cd threads-backend-graphql
+git clone https://github.com/shahadot786/threads-clone.git
+cd threads-clone
 ```
 
 ### 2. Start PostgreSQL
@@ -43,7 +43,15 @@ cd threads-backend-graphql
 docker compose up -d
 ```
 
-### 3. Start Backend
+### 3. Set Up Supabase
+
+1. Create a project at [supabase.com](https://supabase.com)
+2. Go to **Settings → API** and copy:
+   - Project URL → `SUPABASE_URL`
+   - `anon` public key → `SUPABASE_ANON_KEY`
+   - `service_role` key → `SUPABASE_SERVICE_ROLE_KEY`
+
+### 4. Start Backend
 
 ```bash
 cd backend
@@ -54,41 +62,63 @@ yarn dev
 ```
 → GraphQL API: http://localhost:8000/graphql
 
-### 4. Start Frontend
+### 5. Start Frontend
 
 ```bash
 cd frontend
+cp .env.example .env.local  # Configure environment
 yarn install
 yarn dev
 ```
 → Web App: http://localhost:3000
 
 ## ✨ Features
 
-### Implemented ✅
-- **JWT Authentication** with secure httpOnly cookies
-- **Refresh Token Rotation** for enhanced security
-- **User Registration & Login** with password hashing (HMAC-SHA256)
-- **Protected Routes** on both frontend and backend
-- **Modular GraphQL Architecture** with type-safe resolvers
-- **PostgreSQL** with Prisma ORM
-
-### Coming Soon 🚧
-- Thread creation and feed
-- Likes and comments
-- Follow system
-- Real-time notifications
-- Profile editing with image upload
+### Core Features ✅
+- **Posts/Threads** - Create, edit, delete posts with rich text
+- **Media Upload** - Images, videos, and GIF support
+- **Replies & Threads** - Nested conversation threads
+- **Likes** - Like/unlike posts with counts
+- **Reposts** - Share posts to your profile
+- **Bookmarks** - Save posts for later (accessible via sidebar Pin)
+
+### Social Features ✅
+- **Follow System** - Follow/unfollow users
+- **Activity Feed** - Notifications for likes, follows, mentions, replies
+- **User Profiles** - Bio, stats, profile images
+- **User Tooltips** - Hover to see user info with follow button
+
+### Discovery ✅
+- **Search** - Find users, posts, and hashtags
+- **Hashtags** - #tag support with trending tags
+- **@Mentions** - Mention users with autocomplete suggestions
+- **Trending Posts** - Discover popular content
+
+### Authentication ✅ (Supabase)
+- **Supabase Auth** - Email/password with magic links
+- **Email Verification** - Confirm email before login
+- **Password Reset** - Secure reset via email
+- **Protected Routes** - Frontend and backend guards
+- **Session Management** - Secure cookie-based sessions
+
+### UI/UX ✅
+- **Dark Mode** - Beautiful dark theme by default
+- **Responsive Design** - Works on mobile and desktop
+- **Media Lightbox** - Full-screen media viewing
+- **Quote Generator** - AI-powered quote suggestions
+- **Emoji Picker** - Rich emoji support
 
 ## 🛠 Tech Stack
 
 | Layer | Technology |
 |-------|------------|
 | **Frontend** | Next.js 16, React 19, Tailwind CSS 4, Apollo Client |
 | **Backend** | Apollo Server 5, Express 5, TypeScript 5.9 |
-| **Database** | PostgreSQL 16, Prisma 7 ORM |
-| **Auth** | JWT, httpOnly Cookies, Refresh Tokens |
-| **DevOps** | Docker, Docker Compose |
+| **Database** | PostgreSQL 16 (Supabase), Prisma 7 ORM |
+| **Auth** | Supabase Auth (email + password) |
+| **Real-time** | Socket.io for live updates |
+| **Storage** | Local file storage / CDN-ready |
+| **DevOps** | Docker, Railway, Vercel |
 
 ## 📚 Documentation
 

backend/.env.example

@@ -1,7 +1,21 @@
-# Required
+# Database Configuration
+# For local development (Docker):
 DATABASE_URL=postgresql://postgres:threads@localhost:5432/threads
+DIRECT_URL=postgresql://postgres:threads@localhost:5432/threads
+
+# For production (Supabase):
+# DATABASE_URL=postgresql://postgres.[PROJECT-REF]:[PASSWORD]@aws-0-[REGION].pooler.supabase.com:6543/postgres?pgbouncer=true
+# DIRECT_URL=postgresql://postgres.[PROJECT-REF]:[PASSWORD]@aws-0-[REGION].pooler.supabase.com:5432/postgres
+
+# JWT Secret (min 32 characters)
 JWT_SECRET=your-super-secret-jwt-key-at-least-32-characters
 
-# Optional
+# Server Configuration
 PORT=8000
 FRONTEND_URL=http://localhost:3000
+
+# Supabase Storage (optional - when not set, files stored locally)
+SUPABASE_URL=https://your-project.supabase.co
+SUPABASE_ANON_KEY=your-anon-key
+SUPABASE_SERVICE_KEY=your-service-role-key
+SUPABASE_BUCKET=threads-clone