๐ฅ 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
Download
0 formatsNo download links available.