An advanced code snippet management platform with VS Code-like experience, AI assistance, enhanced UI/UX, and multilingual search capabilities.
📹 Watch the demonstration video
This platform is engineered to fundamentally improve how developers create, manage, share, and discover code snippets. It addresses common shortcomings of existing snippet management tools—such as inefficient organization, basic editors, and limited collaboration—by providing a comprehensive solution that emphasizes frontend excellence as a core differentiator.
The platform seamlessly blends advanced functionalities including:
- Authentic VS Code-like editing experience via Monaco Editor
- Real-time, client-side language detection using guesslang.js
- AI-powered metadata generation with DeepSeek Chat API
- Robust social interaction features
- Outstanding, responsive, and feature-rich user interface
- Dual View Modes:
- Rich, high-performance Grid View with masonry layout, virtual and infinite scrolling
- Compact, functional List View with pagination and expandable code
- Seamless Responsiveness: Desktop-first approach with full adaptation for all screen sizes
- Theme Customization: User-selectable Light and Dark modes
- Monaco Editor Integration: VS Code-like coding environment in the browser
- Multiple Editor Themes: VS Dark, VS Light, HC Black, HC Light, GitHub Dark, GitHub Light, Monokai, Dracula, etc.
- Broad Language Support: Syntax highlighting and editing for 56 programming languages
- Automatic Language Detection: Client-side guesslang.js identifies programming languages as users type
- AI-Assisted Metadata: DeepSeek Chat API automates titles, descriptions, and tags by analyzing code
- Enhanced Multilingual Search: Full-text search with excellent word segmentation for both Chinese and English
- Secure JWT-based registration and login
- Profile management (display name, avatar, email, bio)
- Route protection with automatic redirection
- Create, read, update, and delete snippets with Monaco Editor
- Manual and AI-suggested tagging
- Privacy controls (public/private snippets)
- Unified Interface across main Feed, personal snippets, and bookmarks
- Filtering: Tag-based filtering with autocomplete suggestions
- Full-Text Search: Across snippet content, titles, descriptions, and tags
- Intelligent Text Handling: Custom TextEllipsis component for clean layouts
- Likes, comments, and bookmarks
- Shareable links for easy sharing
- Framework: Next.js 15 - React framework
- UI Component Libraries:
- Shadcn UI - Component collection based on Radix UI
- Radix UI primitives
- State Management:
- Zustand - Lightweight state management
- React Query - Server state management
- Styling Solutions:
- Tailwind CSS - Utility-first CSS framework
- tailwindcss-animate - Tailwind animation library
- Theming: next-themes - Dark/light theme support
- Form Handling: React Hook Form + Zod validation
- Editing & Display:
- Monaco Editor - VS Code-like editor with multiple themes
- Guesslang JS - Automatic programming language detection
- React Markdown - Markdown rendering
- React Syntax Highlighter - Code highlighting
- UI/UX Enhancements:
- Masonry layout with virtualization for Grid View
- Sonner - Toast notification component
- Custom TextEllipsis component for intelligent text truncation
- API Framework: Hono.js - Lightweight, fast web framework
- Database: PostgreSQL with enhanced Chinese/English Full-Text Search
- ORM: Prisma - Type-safe database ORM
- Authentication: JWT (jsonwebtoken) + Bcrypt password encryption
- API Validation: Zod - Type validation library
- AI Integration: DeepSeek Chat API for intelligent metadata generation
- Package Manager: pnpm - Efficient package manager
- TypeScript: Provides type-safe code development
- PostCSS: CSS preprocessing
- ESLint/TypeScript: Code quality checking tools
- Date Handling: date-fns - Modern JavaScript date utility library
The platform uses Prisma ORM with PostgreSQL database, including the following main data models:
- Users (users): User account information
- Code Snippets (code_snippets): Stores code snippets and metadata with enhanced search capabilities
- Bookmarks (bookmarks): User-bookmarked code snippets
- Likes (likes): User likes on code snippets
- Comments (comments): User comments on code snippets
CodeSnip/
├── app/ # Next.js pages and routes
├── components/ # React components
│ ├── ui/ # UI base components
│ ├── business/ # Business components
│ ├── auth/ # Authentication-related components
│ └── layout/ # Layout components
├── server/ # Hono API service
│ ├── routes/ # API route definitions
│ ├── middleware/ # API middleware
│ └── db/ # Database connections and operations
├── prisma/ # Prisma models and migrations
├── public/ # Static assets
├── styles/ # Global styles
├── lib/ # Libraries
├── utils/ # Utility functions
└── hooks/ # React Hooks
The project requires the following environment variables (in .env file):
DATABASE_URL=postgresql://user:password@localhost:5432/dbname
JWT_SECRET=your-secret-key
OPENAI_API_KEY=your-openai-api-key (optional, for AI features)
DEEPSEEK_API_KEY=your-deepseek-api-key (for AI metadata generation)
# Install dependencies
pnpm install
# Initialize database (first run)
pnpm prisma migrate dev
# Start development mode
pnpm dev
# Build project
pnpm build
# Start production mode
pnpm startThis platform is designed for developers, students, and teams who value:
- Efficiency and streamlined workflows
- Collaboration and knowledge sharing
- VS Code-like experience with extensive customization
- AI assistance for routine tasks
- Polished, responsive (desktop-first), and performant UI
Contributions, issues, and feature requests are welcome. Please fork the project, create a branch, submit your changes, and open a Pull Request.
This project is licensed under the MIT License.