SnippetSphere

SnippetSphere is a bilingual (English/Vietnamese) code-sharing platform for developers. Share reusable snippets, tag them by language/topic, and get quick time–complexity estimates before publishing.

✨ Features

• CRUD flows for public and private code snippets with automatic slug generation
• Tagging by language & topic, trending and recent listing, user profile pages
• Heuristic complexity analysis with explanation + detected signals
• Email/password authentication backed by PostgreSQL sessions
• Responsive UI built with TailwindCSS + shadcn/ui (Violet theme)
• Internationalization via next-intl with locale-aware routing (en/vi)

🧰 Tech Stack

• Next.js 15 (App Router + Turbopack)
• React 19 + TypeScript
• Prisma ORM with PostgreSQL
• TailwindCSS 3.4 + shadcn/ui
• next-intl for localization
• React Hook Form + Zod for validation
• react-syntax-highlighter for prism-based code previews

🚀 Getting Started

Prerequisites

• Node.js 18 or later
• A PostgreSQL instance (local Docker container or remote database)

1. Install dependencies

npm install

2. Configure environment

Copy the example file and set DATABASE_URL (plus any optional URLs such as NEXT_PUBLIC_APP_URL).

cp .env.example .env
# then edit .env with your connection string

3. Set up the database

Generate the Prisma client, run initial migrations, and seed sample data (optional but recommended to preview the UI).

npm run prisma:generate
npm run prisma:migrate -- --name init
npm run prisma:seed

The seed populates languages, topics, demo users, and a few featured snippets.

4. Start the dev server

npm run dev

Visit http://localhost:3000 – language switcher is in the header.

5. Build for production (optional)

npm run build
npm run start

📁 Project Structure

src/
├─ app/                # App Router pages & layouts (localized under [locale])
├─ components/         # UI + domain components (shadcn primitives in components/ui)
├─ data/               # Prisma-backed data access helpers & domain types
├─ i18n/               # next-intl config + message bundles
├─ lib/                # Utilities (prisma client, slug/complexity helpers, etc.)
└─ styles/             # Global Tailwind styles (see src/app/globals.css)

🧩 UI/Theme Notes

• Tailwind config lives in tailwind.config.ts; Violet is the base theme.
• shadcn/ui components can be added via npx shadcn@latest add <component> (aliases are configured in components.json).
• The main layout uses Geist fonts with CSS variables exposed for Tailwind.

🌐 Localization

• Supported locales: en, vi
• Locale switcher updates the URL segment and persists across routes.
• Translation files: src/i18n/messages/en.json & vi.json

🔧 Useful Scripts

Command	Description
npm run dev	Start dev server (Turbopack)
npm run build	Production build
npm run start	Run the production server
npm run prisma:generate	Regenerate Prisma client
npm run prisma:migrate	Apply migrations (prompts for name)
npm run prisma:seed	Seed the database

🗺️ Future Ideas

• Full-text search across snippets
• OAuth providers or magic-link auth
• Collaborative reviews & comments
• Exportable snippet collections for teams

Happy hacking! 🎉