🔥 Build a Real-Time Code Compiler in Next.js | Save & Share Code Snippets

🚀 **CodePen Clone in Next.js – Full Project Overview** Welcome to WebDevYT! In this video, I’ll walk you through my latest project – a **web-based code compiler** application built using **Next.js**. It allows users to write, preview, and save code snippets in **HTML, CSS, and JavaScript** – all in real time! 🌐💻 --- ### 🔧 **Key Features** - 🔤 Multi-language Support: HTML, CSS, JavaScript - ⚡ Real-time Preview as You Code - 🌓 Light/Dark Theme Toggle - 👤 Authentication (via Clerk: Email, Google) - 💾 Save & Share Snippets (for logged-in users) - 🔍 View Console Logs for JS Debugging - 🖥️ Responsive Layout with Fullscreen Toggle - 💾 Temporary Storage (LocalStorage) + Permanent Save (MongoDB) --- ### 🧑‍💻 **Tech Stack** - **Frontend**: Next.js, Tailwind CSS - **Code Editor**: Monaco-editor/react - **Icons**: Lucide React - **Authentication**: Clerk.js - **Database**: Prisma ORM + MongoDB --- 🌐 **Live Site**: [https://mtweblab.vercel.app](https://web-compiler-client.vercel.app) 💻 **Source Code**: [https://github.com/manishtmtmt/web-compiler-nextjs](https://github.com/manishtmtmt/web-compiler-nextjs) --- ### 📲 **Follow Me for More Projects** - 🔗 **YouTube**: [https://youtube.com/@webdevyt](https://youtube.com/@webdevyt) - 💼 **LinkedIn**: [https://linkedin.com/in/wdmanisht](https://linkedin.com/in/wdmanisht) --- ### 🙌 **Support the Channel** If you enjoyed this project: ✅ **Like** the video 💬 **Comment** your favorite feature 🔔 **Subscribe** to **WebDevYT** for more full stack content! --- ### 🔖 **Hashtags** #Nextjs #WebCompiler #CodepenClone #React #FullStackProject #TailwindCSS #WebDevYT #ClerkAuth #MonacoEditor #MongoDB #Prisma #CodeEditor #FrontendDevelopment