A production-ready, secure, and scalable code snippet vault with multi-language support, syntax highlighting, tag-based organization, visibility controls, forking, and safe code execution preview.
- Snippet Management: Full CRUD operations with rich metadata (title, description, tags, language)
- Syntax Highlighting: Monaco editor for editing, Prism for read views
- Search & Discovery: Tag-based search, language filters, full-text search
- Fork System: Clone public snippets with lineage tracking
- Visibility Control: Public, private, and unlisted snippets
- Safe Execution: Sandboxed code execution with resource limits
- Authentication: JWT-based auth with access and refresh tokens
- Collections: Organize snippets into folders
- Social Features: Stars, views, activity tracking
- Frontend: React 18 + TypeScript + Vite
- Backend: Node.js + Express + TypeScript
- Database: MongoDB with Mongoose ODM
- Authentication: JWT (access + refresh tokens)
- Code Editor: Monaco Editor
- Syntax Highlighting: Prism.js
- Execution Sandbox: Docker-based isolated runners
- Testing: Jest, React Testing Library, Supertest
- CI/CD: GitHub Actions
- Monitoring: Sentry, Prometheus
- Node.js >= 18.x
- MongoDB >= 6.x
- Docker (for execution sandbox)
- npm or yarn
# Install backend dependencies
cd backend
npm install
# Install frontend dependencies
cd ../frontend
npm installCreate .env files in both backend and frontend directories:
backend/.env
NODE_ENV=development
PORT=5000
MONGODB_URI=mongodb://localhost:27017/snippet-manager
JWT_ACCESS_SECRET=your-access-secret-key-change-in-production
JWT_REFRESH_SECRET=your-refresh-secret-key-change-in-production
JWT_ACCESS_EXPIRY=15m
JWT_REFRESH_EXPIRY=7d
CORS_ORIGIN=http://localhost:5173
RUNNER_API_URL=http://localhost:5001
SENTRY_DSN=
RATE_LIMIT_WINDOW_MS=900000
RATE_LIMIT_MAX_REQUESTS=100frontend/.env
VITE_API_URL=http://localhost:5000/api
VITE_SENTRY_DSN=# Using Docker
docker run -d -p 27017:27017 --name mongodb mongo:latest
# Or use MongoDB Atlas (cloud)# Terminal 1: Start backend
cd backend
npm run dev
# Terminal 2: Start frontend
cd frontend
npm run dev
# Terminal 3: Start execution runner (optional)
cd backend/runner
npm run devThe application will be available at:
- Frontend: http://localhost:5173
- Backend API: http://localhost:5000
- API Docs: http://localhost:5000/api-docs
# Backend tests
cd backend
npm test
npm run test:coverage
# Frontend tests
cd frontend
npm test
npm run test:e2e
# Integration tests
npm run test:integration# Build and run all services
docker-compose up -d
# Scale runner workers
docker-compose up -d --scale runner=3-
Build frontend:
cd frontend npm run build -
Deploy backend: Upload to your hosting provider (AWS, Heroku, etc.)
-
Configure environment variables in production
-
Set up MongoDB Atlas or managed MongoDB instance
-
Configure CDN for frontend static assets
API documentation is available via Swagger UI at /api-docs when running the backend.
- Auth:
/api/auth/register,/api/auth/login,/api/auth/refresh - Snippets:
/api/snippets(CRUD operations) - Search:
/api/search?q=term&language=javascript&tags=react - Fork:
POST /api/snippets/:id/fork - Execute:
POST /api/snippets/:id/execute - Collections:
/api/collections(CRUD)
- Passwords hashed with bcrypt (cost factor 12)
- JWT tokens with short expiry
- Rate limiting on all endpoints
- Input validation with Zod
- CORS protection
- XSS prevention
- SQL/NoSQL injection prevention
- Sandboxed code execution with resource limits
- Audit logging for sensitive operations
- Node.js + Express
- TypeScript
- MongoDB + Mongoose
- JWT authentication
- Joi/Zod validation
- bcrypt
- helmet (security headers)
- express-rate-limit
- morgan (logging)
- React 18
- TypeScript
- Vite
- React Router v6
- Zustand (state management)
- Monaco Editor
- Prism.js
- TailwindCSS
- shadcn/ui components
- Axios
- React Hook Form
- Docker + Docker Compose
- GitHub Actions
- ESLint + Prettier
- Jest + Supertest
- Cypress/Playwright
MERN_Project/
├── backend/
│ ├── src/
│ │ ├── config/ # Configuration files
│ │ ├── models/ # Mongoose models
│ │ ├── controllers/ # Route controllers
│ │ ├── routes/ # Express routes
│ │ ├── middleware/ # Custom middleware
│ │ ├── services/ # Business logic
│ │ ├── utils/ # Utility functions
│ │ └── server.ts # Entry point
│ ├── tests/ # Test files
│ ├── runner/ # Execution sandbox service
│ └── package.json
├── frontend/
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── pages/ # Page components
│ │ ├── hooks/ # Custom hooks
│ │ ├── store/ # State management
│ │ ├── services/ # API services
│ │ ├── utils/ # Utilities
│ │ └── App.tsx # Root component
│ ├── public/
│ └── package.json
├── docker-compose.yml
└── README.md
- Ensure MongoDB is running:
mongoshor check Docker container - Verify MONGODB_URI in
.env
- Change PORT in backend
.env - Update VITE_API_URL in frontend
.env
- Ensure Docker is running
- Check runner service logs:
docker logs snippet-runner
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
- All tests pass
- Linting passes
- Type checks pass
- Documentation updated
- Security checklist completed
This project is licensed under the MIT License.
- Monaco Editor by Microsoft
- Prism.js for syntax highlighting
- shadcn/ui for component library
- The MERN stack community
For issues and questions:
- GitHub Issues: [Create an issue]
- Documentation: See
/docsfolder - Email: support@snippetmanager.dev
Built with ❤️ by the Snippet Manager Team