Overview
Code Snippet Manager is a modern, full-stack web application designed to help developers organize, search, and share their code snippets efficiently. Built with cutting-edge technologies, it showcases advanced full-stack development skills including database design, authentication, AI integration, and modern React patterns.
Key Features
🤖 AI-Powered Semantic Search
- OpenAI embeddings for intelligent code search
- Find snippets using natural language queries
- Semantic understanding beyond keyword matching
🎨 Syntax Highlighting
- Beautiful code rendering with Shiki
- Support for 50+ programming languages
- GitHub Dark theme for optimal readability
🔐 Secure Authentication
- NextAuth.js integration
- Credential-based authentication
- Protected routes and session management
📊 Smart Organization
- Tag-based categorization
- Language filtering
- Full-text search across title, description, and code
- Public/private snippet sharing
💾 Robust Database Design
- PostgreSQL with Prisma ORM
- Efficient indexing for fast queries
- Many-to-many tag relationships
- Cascade deletion for data integrity
Technical Stack
Frontend
- Next.js 16 - React framework with App Router
- React 19 - Latest React features
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- Shiki - Syntax highlighting engine
Backend
- Next.js API Routes - Serverless API endpoints
- Prisma ORM - Type-safe database client
- PostgreSQL - Relational database
- Zod - Runtime validation
Authentication & AI
- NextAuth.js - Authentication framework
- OpenAI API - Embeddings for semantic search
- bcryptjs - Password hashing
Architecture Highlights
Database Schema
Designed a normalized database schema with:
- User authentication tables (NextAuth compatible)
- Snippet storage with metadata
- Tag system with many-to-many relationships
- Embedding storage for AI search
- Optimized indexes for performance
API Design
RESTful API with:
- CRUD operations for snippets
- Search and filter endpoints
- Authentication middleware
- Input validation with Zod
- Error handling and status codes
State Management
- Server-side rendering for initial data
- Client-side state with React hooks
- Optimistic UI updates
- Real-time search filtering
Development Process
This project demonstrates proficiency in:
- Full-stack TypeScript development
- Database design and ORM usage (Prisma)
- Authentication implementation (NextAuth.js)
- AI/ML integration (OpenAI embeddings)
- Modern React patterns (Server/Client components)
- API development (RESTful design)
- Form handling and validation
- Responsive UI design
Challenges Solved
- Prisma 7 Migration - Adapted to new Prisma Client initialization requirements
- Syntax Highlighting - Integrated Shiki for client-side code rendering
- Tag Management - Implemented efficient many-to-many relationships
- Search Optimization - Combined full-text and semantic search
- Type Safety - Extended NextAuth types for custom user properties
Future Enhancements
- Collections/folders for snippet organization
- Code execution playground
- Browser extension for quick snippet capture
- VS Code extension integration
- Markdown support in descriptions
- GitHub Gist export
- Team collaboration features
Deployment
Deployed on Vercel with:
- PostgreSQL database (Neon/Supabase)
- Environment variable management
- Automatic deployments from Git
- Edge runtime optimization