https://github.com/shankardutta/codecraft-webapp
CodeCraft is a frontend code playground built with React, Next.js, CodeMirror, and shadcn/ui. It lets users write and preview HTML, CSS, and JavaScript in real time with a clean, responsive UI—perfect for rapid prototyping, learning, and sharing code.
https://github.com/shankardutta/codecraft-webapp
bun css html javascript lucide-react magicui nextjs reacticons reactjs shadcn-ui swiper-js
Last synced: 2 months ago
JSON representation
CodeCraft is a frontend code playground built with React, Next.js, CodeMirror, and shadcn/ui. It lets users write and preview HTML, CSS, and JavaScript in real time with a clean, responsive UI—perfect for rapid prototyping, learning, and sharing code.
- Host: GitHub
- URL: https://github.com/shankardutta/codecraft-webapp
- Owner: ShankarDutta
- License: mit
- Created: 2025-07-14T03:25:37.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-29T07:37:29.000Z (11 months ago)
- Last Synced: 2025-07-29T09:39:20.217Z (11 months ago)
- Topics: bun, css, html, javascript, lucide-react, magicui, nextjs, reacticons, reactjs, shadcn-ui, swiper-js
- Language: TypeScript
- Homepage:
- Size: 7.87 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 CodeCraft
**CodeCraft** is a modern web-based frontend playground that enables developers to write, edit, and preview HTML, CSS, and JavaScript code in real time. Built with cutting-edge technologies like **Next.js**, **React**, `@uiw/react-codemirror`, and **Tailwind CSS**, it offers a clean, responsive, and intuitive user experience for rapid prototyping, learning, and sharing.
---
## ✨ Features
- 🖊 **Live Code Editing** — Write HTML, CSS, and JS simultaneously with instant results.
- ⚡ **Real-Time Preview** — See your output update live as you type.
- 🎨 **Responsive UI** — Built with Tailwind CSS and `shadcn/ui` for a clean and accessible interface.
- 🧠 **@uiw/react-codemirror Integration** — Fast, lightweight code editor with syntax highlighting and customization support.
- 📱 **Mobile-Friendly Design** — Optimized layout for all screen sizes.
- 🌈 **Dark/Light Theme Support** — Seamless theme switching based on system preferences.
- 💾 **Local Save Option** — Save your code to `localStorage` to persist work across sessions.
- 🔗 **Rich UI Enhancements** — Includes icons and animations using `react-icons`, `swiper-js`.
---
## 🛠 Tech Stack
- **Framework**: [Next.js](https://nextjs.org) + [React](https://reactjs.org)
- **Editor**: [`@uiw/react-codemirror`](https://github.com/uiwjs/react-codemirror)
- **Styling**: [Tailwind CSS](https://tailwindcss.com) + [shadcn/ui](https://ui.shadcn.com)
- **Icons & UI**: `react-icons`, `swiper-js`.
---
## 📌 Use Cases
- 🎯 Rapid prototyping of frontend components and layouts.
- 📚 Learning and experimenting with HTML, CSS, and JavaScript.
- 🔗 Sharing live, interactive code snippets with others.
- 💡 Practicing and improving frontend development skills.
---
## 🚧 Future Improvements
- 📁 Code Export (Download as files or Gists)
- 🔗 Shareable preview URLs
- 💬 Collaborative editing
- ☁️ Cloud saving and GitHub login
- 📦 Integration with code hosting services
Theming support (dark/light mode switch).
Multi-file editing.
Collaboration features (live sharing).