Feat/subscription plans

.env.example

@@ -1,34 +1,55 @@
 NODE_ENV=development
 
-# GENERAL
-NEXT_PUBLIC_VERCEL_ENV=development
-NEXT_PUBLIC_VERCEL_URL=localhost:3000
-
-NEXT_PUBLIC_SENTRY_TUNNEL=/monitoring
-SENTRY_DSN=
-
-#SUPABASE
+# Required: core platform
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
-SUPABASE_SERVICE_ROLE_KEY= 
-
-#CANNY
-CANNY_API_KEY=
-
-NEXT_PUBLIC_HOTJAR_SITE_ID=
-
-#LIVEBLOCKS
+SUPABASE_SERVICE_ROLE_KEY=
 LIVEBLOCKS_SECRET_KEY=
-LIVEBLOCKS_PUCLIC_API_KEY=
 
-KEEPALIVE_ENDPOINT= 
-KEEPALIVE_API_KEY=
-
-#ANALYTICS
+# Required: app + billing
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+NEXT_PUBLIC_VERCEL_ENV=development
+NEXT_PUBLIC_VERCEL_URL=localhost:3000
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
+STRIPE_SECRET_KEY=sk_test_...
+STRIPE_WEBHOOK_SECRET=whsec_...
+NEXT_PUBLIC_STRIPE_STARTER_MONTHLY_PRICE_ID=price_...
+NEXT_PUBLIC_STRIPE_STARTER_YEARLY_PRICE_ID=price_...
+NEXT_PUBLIC_STRIPE_PRO_MONTHLY_PRICE_ID=price_...
+NEXT_PUBLIC_STRIPE_PRO_YEARLY_PRICE_ID=price_...
+
+# Optional: observability
+NEXT_PUBLIC_SENTRY_TUNNEL=/monitoring
+SENTRY_DSN=
+SENTRY_ENVIRONMENT=
+SENTRY_TRACES_SAMPLE_RATE=
+SENTRY_PROFILES_SAMPLE_RATE=
+SENTRY_TRACE_PROPAGATION_TARGETS=
+SENTRY_RELEASE=
+SENTRY_REPLAYS_SESSION_SAMPLE_RATE=
+SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE=
+
+# Optional: analytics + marketing
 NEXT_PUBLIC_POSTHOG_KEY=
 NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com
 NEXT_PUBLIC_POSTHOG_ENABLE_LOCAL=false
 POSTHOG_API_KEY=
+NEXT_PUBLIC_HOTJAR_SITE_ID=
+NEXT_PUBLIC_SITE_URL=
+CANNY_API_KEY=
+
+# Optional: feature flags + experiments
+NEXT_PUBLIC_EXPORT_EXPERIMENT=control
+NEXT_PUBLIC_TRANSITION_EXPERIMENT=control
 
-#SECURITY
-ARCJET_KEY=
+# Optional: collaboration / security
+ARCJET_KEY=
+NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_API_KEY=
+CORS_ALLOWED_ORIGIN=
+NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA=
+VERCEL_GIT_COMMIT_SHA=
+
+# Optional: maintenance
+KEEPALIVE_ENDPOINT=
+KEEPALIVE_API_KEY=
+SKIP_ENV_VALIDATION=false

.github/workflows/cron-check-usage.yml

@@ -0,0 +1,38 @@
+name: Check Usage Limits
+
+on:
+  schedule:
+    # Runs daily at midnight UTC
+    - cron: '0 0 * * *'
+  # Allow manual triggering from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  check-usage:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Invoke Usage Check API
+        env:
+          APP_URL: ${{ secrets.APP_URL || 'https://jollycode.dev' }}
+          CRON_SECRET: ${{ secrets.CRON_SECRET }}
+        run: |
+          if [ -z "$CRON_SECRET" ]; then
+            echo "Error: CRON_SECRET secret is not set in GitHub Secrets"
+            exit 1
+          fi
+
+          response=$(curl -s -w "\n%{http_code}" -X GET \
+            -H "Authorization: Bearer ${CRON_SECRET}" \
+            "${APP_URL}/api/cron/check-usage")
+          http_code=$(echo "$response" | tail -n1)
+          body=$(echo "$response" | sed '$d')
+
+          if [ "$http_code" -eq 200 ]; then
+            echo "✅ Usage check completed successfully"
+            echo "$body" | jq '.' || echo "$body"
+          else
+            echo "❌ Usage check failed with HTTP $http_code"
+            echo "$body"
+            exit 1
+          fi

.github/workflows/keepalive.yml

@@ -2,8 +2,8 @@ name: Keepalive
 
 on:
   schedule:
-    # Runs every Monday at midnight UTC
-    - cron: '0 0 * * 0'
+    # Runs every Monday at 00:00 UTC (day 1 = Monday)
+    - cron: '0 0 * * 1'
   # Allow manual triggering from the Actions tab
   workflow_dispatch:
 
@@ -13,6 +13,26 @@ jobs:
 
     steps:
       - name: Ping Keepalive Endpoint
+        env:
+          KEEPALIVE_URL: ${{ secrets.KEEPALIVE_ENDPOINT }}
         run: |
-          curl -X GET "${{ secrets.KEEPALIVE_ENDPOINT}}" \
-            -H "Authorization: Bearer ${{ secrets.KEEPALIVE_API_KEY }}"
+          if [ -z "$KEEPALIVE_URL" ]; then
+            echo "::error::KEEPALIVE_ENDPOINT secret is not set"
+            echo "Please set it in repository settings to your production URL"
+            echo "Example: https://your-domain.com/api/keepalive"
+            exit 1
+          fi
+
+          response=$(curl -s -w "\n%{http_code}" "$KEEPALIVE_URL")
+          http_code=$(echo "$response" | tail -n1)
+          body=$(echo "$response" | sed '$d')
+
+          echo "Response body: $body"
+          echo "HTTP Status: $http_code"
+
+          if [ "$http_code" -ne 200 ]; then
+            echo "::error::Keepalive ping failed with status $http_code"
+            exit 1
+          fi
+
+          echo "✅ Keepalive ping successful!"

.github/workflows/plan-validation.yml

@@ -0,0 +1,39 @@
+name: Plan Limits
+
+on:
+  pull_request:
+    paths:
+      - 'src/lib/config/plans.ts'
+      - 'supabase/migrations/**'
+      - '.github/workflows/plan-validation.yml'
+  push:
+    branches:
+      - main
+    paths:
+      - 'src/lib/config/plans.ts'
+      - 'supabase/migrations/**'
+      - '.github/workflows/plan-validation.yml'
+
+jobs:
+  validate-plan-limits:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        # Version is automatically read from package.json packageManager field
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Validate plan limits
+        run: pnpm run validate:plans

.gitignore

@@ -23,6 +23,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.cursor/debug.log
 
 # local env files
 .env*.local

AGENTS.md

@@ -27,11 +27,39 @@
 - PRs should describe intent, note any env vars touched (e.g., `NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`, Sentry/PostHog keys), and link related issues. Include screenshots or short clips for UI changes and mention manual checks run.
 
 ## Security & Configuration Tips
-- Store secrets in `.env.local`; never commit keys. Required keys include Supabase (`NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`) and Sentry/PostHog credentials where applicable.
+- Store secrets in `.env.local`; never commit keys. Required keys include Supabase (`NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`), Stripe (`STRIPE_SECRET_KEY`, `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`, `STRIPE_WEBHOOK_SECRET`, price IDs), and Sentry/PostHog credentials where applicable.
 - When developing analytics/Sentry changes, guard them behind environment checks to keep local runs noise-free.
+- Stripe webhook endpoint: `/api/webhooks/stripe` - must be configured in Stripe Dashboard with events: `customer.subscription.created`, `customer.subscription.updated`, `customer.subscription.deleted`, `checkout.session.completed`.
 
 ## Usage Limits & Plans
-- Free plan caps: 10 snippets, 10 animations, 5 slides per animation. Pro plan removes limits.
-- Usage counts live in `profiles` and `usage_limits` with helper RPCs (`check_*_limit`, `increment_*`, `decrement_*`).
-- Use `src/lib/services/usage-limits.ts` + `src/features/user/queries.ts` for limit checks and usage fetch/invalidation.
-- Surface upgrade prompts via `UpgradeDialog` and show current usage with `UsageStatsWidget`.
+
+### Plan Tiers
+
+- **Free**: 0 saved snippets/animations, 3 slides per animation, 50 public shares
+- **Started** ($5/mo or $3/mo yearly): 50 snippets, 50 animations, 10 slides per animation, 10 folders, 50 video exports, 1,000 public shares
+- **Pro** ($9/mo or $7/mo yearly): Unlimited everything + watermark removal + priority support
+
+### Implementation Details
+
+- Plan configuration lives in `src/lib/config/plans.ts` with helper functions (`getPlanConfig`, `isLimitReached`, `getUsagePercentage`, etc.)
+- Database schema in migration `supabase/migrations/20251207103258_add_usage_limits_and_plans.sql`:
+  - `profiles` table has plan columns: `plan` (enum), `plan_updated_at`, usage counters, and Stripe fields
+  - PostgreSQL RPC functions handle atomic limit checks and counter updates
+- Usage tracking service: `src/lib/services/usage-limits.ts` provides `checkSnippetLimit`, `checkAnimationLimit`, `incrementUsageCount`, `decrementUsageCount`, `getUserUsage`
+- Server actions enforce limits: `src/actions/snippets/create-snippet.ts` and `src/actions/animations/create-animation.ts` check RPCs before saving
+- React Query hooks: `src/features/user/queries.ts` exports `useUserUsage()` and `useUserPlan()` for client-side usage display
+- UI components:
+  - `src/components/usage-stats-widget` shows current usage with progress bars and upgrade CTA
+  - `src/components/ui/upgrade-dialog` displays plan comparison and pricing for upgrades
+- Animation store (`src/app/store/animation-store.ts`) enforces slide limits via `addSlide({ maxSlides, onLimit })` parameter
+
+### Stripe Integration
+
+- Service layer: `src/lib/services/stripe.ts` handles customer management, checkout sessions, subscriptions, and webhooks
+- Client-side: `src/lib/stripe-client.ts` loads Stripe.js; `src/actions/stripe/checkout.ts` provides `createCheckoutSession()` and `createPortalSession()` server actions
+- API endpoints:
+  - `/api/checkout` - Creates Stripe checkout session for plan upgrades
+  - `/api/webhooks/stripe` - Handles subscription lifecycle events and updates user plans
+  - `/api/customer-portal` - Creates Stripe customer portal session for subscription management
+- Webhooks automatically update `profiles` table when subscriptions are created, updated, or canceled
+- Price IDs must be configured in environment variables for both monthly and yearly billing for Started and Pro plans

README.md

@@ -10,9 +10,13 @@ Welcome to the Github repo for JollyCode. An open-source aesthetically appealing
 
 We support a wide array of programming languages, including Python, JavaScript, Java, C++, C#, Ruby, PHP, and more. No matter your preferred development language, we've got you covered.
 
+### 🎬 Code Animations
+
+Create stunning multi-slide code animations with smooth transitions. Perfect for tutorials, demos, and showcasing code evolution. Export as GIF, MP4 or live embeds.
+
 ### 🎨 Share Code Imagery
 
-Fancy showing off your beautiful code? You can share captivating images of your code right from JollyCode.
+Share captivating images of your code with beautiful syntax-highlighted Open Graph previews for Twitter, LinkedIn, and other social platforms. Your shared links automatically generate professional preview cards.
 
 ### 🌍 Short shared URL
 
@@ -22,15 +26,13 @@ Once you share your URL, it gets shortened for easy sharing via services like Tw
 
 On the shared link, visualize the users interacting with your code snippet.
 
-### 💾 Code Snippets
-
-Save your code snippets for future reference directly in the tool. Group your saved snippets into categories for easy retrieval.
+### 💾 Code Snippets & Collections
 
-- **Saving Snippets**: Use the 'Save Snippet' button after you've added your code. Give your snippet a meaningful name so you can easily find it later.
+Save your code snippets and animations for future reference. Organize them into collections (folders) for easy retrieval and management.
 
-- **Organizing Snippets**: Group your snippets into categories or use tags to organize them. This organization method makes it easy to find a relevant piece of code.
-
-- **Using Snippets**: Click on any snippet in 'My Snippets' to load it into the code editor. You can then modify it as per your current requirements.
+- **Saving**: Save snippets and animations with meaningful names for quick access.
+- **Organizing**: Group your content into collections to keep everything organized.
+- **Using**: Click on any saved item to load it into the editor and continue working.
 
 ## 🚀 Built With
 
@@ -39,6 +41,10 @@ Save your code snippets for future reference directly in the tool. Group your sa
 - Supabase
 - TailwindCSS
 
+## Environment Variables
+
+We validate configuration with `@t3-oss/env-nextjs`; `pnpm env:check` runs automatically before `pnpm dev`, `pnpm build`, and `pnpm start`. Copy `.env.example` to `.env.local` and fill in the required values.
+
 ## Roadmap
 
 For any additional feature request 👉: [Check it out](https://jollycode.canny.io/feature-requests)

emails/account-deleted-email.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+  Tailwind,
+} from "@react-email/components";
+import { Logo } from "../src/components/ui/logo";
+
+interface AccountDeletedEmailProps {
+  name?: string;
+}
+
+export default function AccountDeletedEmail({ name }: AccountDeletedEmailProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>Your Jolly Code account has been deleted</Preview>
+      <Tailwind>
+        <Body className="bg-white my-auto mx-auto font-sans">
+          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
+            <div className="flex justify-center">
+              <Logo variant="short" className="mx-auto scale-75 -mb-5" />
+            </div>
+            <Heading className="text-black text-xl font-normal text-center p-0 my-[30px] mx-0">
+              Your account has been deleted
+            </Heading>
+            <Text className="text-black text-[14px] leading-[24px]">
+              Hey {name || "there"},
+            </Text>
+            <Text className="text-black text-[14px] leading-[24px]">
+              This email confirms that your Jolly Code account and all associated data have been permanently deleted from our systems.
+            </Text>
+            <Text className="text-black text-[14px] leading-[24px]">
+              <strong>What was deleted:</strong>
+            </Text>
+            <Text className="text-black text-[14px] leading-[24px] ml-4">
+              • Your profile and account information<br />
+              • All your code snippets and animations<br />
+              • All your collections and folders<br />
+              • All shared links and associated data<br />
+              • Your subscription information (if applicable)
+            </Text>
+            <Text className="text-black text-[14px] leading-[24px]">
+              If you had an active subscription, it has been canceled and no further charges will be made.
+            </Text>
+            <Text className="text-black text-[14px] leading-[24px]">
+              If you didn't request this deletion or have any questions, please contact us immediately at{" "}
+              <a href="mailto:support@jollycode.dev" className="text-blue-600 underline">
+                support@jollycode.dev
+              </a>
+              .
+            </Text>
+            <Text className="text-black text-[14px] leading-[24px] mt-6">
+              We're sorry to see you go. If you change your mind, you can always create a new account in the future.
+            </Text>
+            <Text className="text-black text-[14px] leading-[24px] mt-6">
+              Best regards,
+            </Text>
+            <Text className="text-black text-[14px] leading-[24px]">
+              The Jolly Code Team
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+