🚀 Code Craft — SaaS Code Editor

<h2>🧑‍💻 Modern, Professional Online Code Editor</h2>

Multi-language. Real-time Collaboration. Professional Features.

🔗 Live Demo • 🎬 Video Tutorial • 📚 Documentation

</div>

✨ Features

🎯 Core

💻 Multi-Language Execution — 10+ languages (JS, Python, Java, C++, Go, Rust, Swift, C#, Ruby, PHP)
🎨 Customizable UI — 5 VSCode themes, adjustable font sizes, color schemes
⚡ Instant Output — Real-time code execution, smart display
🔄 Auto-Save — Persist your code across sessions, never lose work
📱 Responsive Design — Seamless across desktop, tablet, mobile

🤝 Collaboration

🔗 Shareable Snippets — Discover, star, and share code with the community
💬 Comments — Discuss and work together on shared code
🏅 User Profiles — Showcase contributions, execution history

💎 Pro

🚀 Premium Languages — Advanced runtime & tooling
📊 Analytics Dashboard — Usage stats, performance insights
☁️ Cloud Storage — Unlimited snippets, secure backups
🎯 Priority Support — Dedicated help channel

🛠️ Tech Stack

| Category | Technology & Icon | |------------------|------------------| | Frontend | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original-wordmark.svg" width="22" /> Next.js 15, <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" width="22" /> React 18, <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" width="22" /> TypeScript | | Styling | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg" width="22" /> Tailwind CSS, Framer Motion | | Editor | Monaco Editor (VS Code) | | Authentication | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/clerk/clerk-original.svg" width="22" /> Clerk | | Database | <img src="https://raw.githubusercontent.com/convex-dev/convex-brand/main/convex-logo.svg" width="22" /> Convex (Real-time) | | Code Execution | Piston API | | Deployment | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vercel/vercel-original.svg" width="22" /> Vercel | | State Management | Zustand |

🚀 Quick Start

Prerequisites

🟢 Node.js 18+
🟣 npm or yarn
🔵 Git

1. Clone & Install

git clone https://github.com/its-pratyushpandey/Codewave.git
cd Codewave
npm install

2. Environment Setup

Create .env.local in root:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_key_here
CLERK_SECRET_KEY=sk_test_your_key_here

CONVEX_DEPLOYMENT=your-deployment-name
NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud

CLERK_WEBHOOK_SECRET=your_webhook_secret

3. Database Setup

npm install -g convex
npx convex dev

Follow prompts and update .env.local.

4. Authentication Setup

Go to Clerk Dashboard
Create app, copy API keys
Create JWT template named convex per docs
Configure claims as described

5. Start Dev Server

npm run dev

Open http://localhost:3000 and start coding!

📖 Documentation

Scripts

| Command | Description | |------------------|-------------------------| | npm run dev | Start dev server | | npm run build | Build for production | | npm run start | Start prod server | | npm run lint | Run ESLint |

Supported Languages

| Language | Version | Runtime | |-------------|-----------|------------| | JavaScript | 18.15.0 | Node.js | | TypeScript | 5.0.0 | Node.js | | Python | 3.10.0 | CPython | | Java | 15.0.2 | OpenJDK | | C++ | 10.2.0 | GCC | | Go | 1.16.2 | Go | | Rust | 1.68.0 | Cargo | | C# | 6.12.0 | Mono | | Ruby | 3.0.1 | Ruby | | Swift | 5.3.3 | Swift |

API Endpoints

POST /api/execute — Run code
GET /api/snippets — Public snippets
POST /api/snippets — Create snippet
GET /api/user/stats — User statistics

🎨 Screenshots

<details> <summary>Click to view screenshots</summary>

| Main Editor | Snippet Gallery | User Profile | Themes | |-------------|----------------|-------------|--------| | | | | Themes |

</details>

🤝 Contributing

We welcome all contributions!

See CONTRIBUTING.md
Fork → Branch → Code → Test → Commit → PR

Guidelines

TypeScript for all new files
Follow code style
Add tests for new features
Update docs as needed

📝 License

MIT — see LICENSE.

🙏 Acknowledgments

📞 Support

📧 Email: support@codecraft.dev
💬 Discord: Join community
🐛 Issues: GitHub Issues
📖 Docs: Documentation

🗺️ Roadmap

| Timeline | Features | |------------|---------------------------------------------------| | Q1 2025 | Real-time collaboration, Git integration, Theme builder | | Q2 2025 | AI code suggestions, Jupyter notebooks, Mobile app | | Q3 2025 | Enterprise features, Debugging tools, Plugin system |

❤️ Made by Pratyush Pandey
If this project helped you, please ⭐ star the repository!

⬆ Back to Top