Code snippet manager. This project demonstrates user's ability to share, execute, and comment on code snippets in various programming languages.
- Frontend: Next.js 15 βοΈ
- Authentication: Clerk π (Google π and GitHub π authentication)
- Database: Convex π¦
- Authentication:
π Secure login via Google π and GitHub π using Clerk. - Code Snippet Management:
π Create, share, and manage code snippets.
π¬ Add comments on snippets.
β Star favorite snippets for quick access. - Code Execution Logs:
π₯οΈ Store and view details of executed code. - User Management:
π Pro user support with LemonSqueezy integration for subscriptions.
The database is structured using Convex for real-time interactions. Below is the schema definition:
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";
export default defineSchema({
codeExecutions: defineTable({
code: v.string(),
error: v.optional(v.string()),
language: v.string(),
output: v.optional(v.string()),
userId: v.string(),
}).index("by_user_id", ["userId"]),
snippetComments: defineTable({
content: v.string(),
snippetId: v.id("snippets"),
userId: v.string(),
userName: v.string(),
}).index("by_snippet_id", ["snippetId"]),
snippets: defineTable({
code: v.string(),
language: v.string(),
title: v.string(),
userId: v.string(),
userName: v.string(),
}).index("by_user_id", ["userId"]),
stars: defineTable({
snippetId: v.id("snippets"),
userId: v.string(),
})
.index("by_snippet_id", ["snippetId"])
.index("by_user_id", ["userId"])
.index("by_user_id_and_snippet_id", [
"userId",
"snippetId",
]),
users: defineTable({
email: v.string(),
isPro: v.boolean(),
lemonSqueezyId: v.optional(v.string()),
lemonSqueezyOrderId: v.optional(v.string()),
name: v.string(),
proSince: v.optional(v.float64()),
userId: v.string(),
}).index("by_user_id", ["userId"]),
});- Node.js (v16 or higher) π’
- npm or yarn π¦
- Convex CLI π§
- Clerk API keys π
-
Clone the repository:
git clone https://github.com/yourusername/code-hub-saas.git
-
Navigate to the project directory:
cd code-hub-saas -
Install dependencies:
npm install
-
Setup βοΈ
Create a .env file and add your Clerk and Convex credentials:
NEXT_PUBLIC_CLERK_FRONTEND_API=<your-clerk-api> CONVEX_URL=<your-convex-url>
-
Run the Convex schema:
npx convex dev
-
Start the development server:
npm run dev
-
Access the application at:
http://localhost:3000
- Sign In: Log in using your Google π or GitHub π account.
- Create Snippets: Add code snippets with a title, language, and optional description.
- Collaborate: Add comments π¬ and discuss snippets with other users.
- Pro Features: Unlock advanced features π by upgrading to Pro via LemonSqueezy.