https://github.com/bighnesh0007/dwcode
A LeetCode-style practice platform for MuleSoft DataWeave — problems, a live playground, contests and AI-assisted learning.
https://github.com/bighnesh0007/dwcode
coding-challenges dataweave integration learning-platform mule mulesoft nextjs open-source playground typescript
Last synced: 6 days ago
JSON representation
A LeetCode-style practice platform for MuleSoft DataWeave — problems, a live playground, contests and AI-assisted learning.
- Host: GitHub
- URL: https://github.com/bighnesh0007/dwcode
- Owner: bighnesh0007
- License: mit
- Created: 2026-06-20T09:24:18.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2026-07-26T15:37:32.000Z (14 days ago)
- Last Synced: 2026-07-26T16:10:13.304Z (14 days ago)
- Topics: coding-challenges, dataweave, integration, learning-platform, mule, mulesoft, nextjs, open-source, playground, typescript
- Language: TypeScript
- Homepage: https://dwcode.vercel.app
- Size: 908 KB
- Stars: 4
- Watchers: 1
- Forks: 3
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
**A LeetCode-style coding platform built exclusively for MuleSoft DataWeave developers.**
Practice data transformations, compete in timed contests, and sharpen your skills with AI-generated problems — all in a browser-based Monaco editor connected to a live DataWeave 2.0 compiler.
Stop practicing transformations in a scratch Anypoint project you'll never open again.
Solve real problems. Race the clock. Climb the leaderboard. Let AI throw new challenges at you until `%dw 2.0` feels like a second language.
### 🎬 [**▶ Watch the 2-minute Demo**](https://drive.google.com/file/d/1fK-xpvf82gxItmtEjhcHu2E9O9FS8vcX/view?usp=drive_link)
## 🌍 Why DWCode Exists
Every MuleSoft developer knows the feeling: you can wire up an API in your sleep, but hand you a gnarly `groupBy` → `pluck` → `reduce` chain under interview pressure and suddenly the docs are open in three tabs.
DataWeave is a language. Languages get sharp with **reps**, not tutorials.
DWCode is the dojo. It gives you an endless supply of curated and AI-generated transformation puzzles, a real compiler to check your work against hidden test cases, and a scoreboard that turns "I should practice more" into "I'm rank #3 and I'm not stopping."
> **Built by the community, for the community.** 💜
## ✨ Features
### 🏋️ Problem Workspace — _your training ground_
The main event. A clean split-pane battle station:
- **Split-pane layout**: Problem description | Monaco editor | Console — everything in one view, zero context-switching
- **Run** code against custom JSON input, or click **Submit** to evaluate all test cases at once
- Real-time **pass/fail feedback** with per-test-case diff output — see exactly where your output drifted
- Built-in **countdown timer** to simulate interview pressure (or just keep you honest)
- **Bookmark** any problem for later revision
- **Reveal Solution** toggle with optional hints
- **My Notes** tab — auto-saved, per-problem markdown notes so future-you remembers the trick
- **Discussion** tab — comment thread per problem
### 🤖 AI Problem Generator — _the endless boss fight_
Never run out of problems again.
- **One-click generation** via Google Gemini 2.5 Flash
- Configure **difficulty** (Easy / Medium / Hard), **category**, and an optional **topic**
- Returns a *full* problem: description, examples, constraints, starter code, test cases, hidden test cases, hints, and a reference solution
- Problems are saved immediately to the database and appear in the problem list
### 🏆 Contests — _prove it under pressure_
- Create time-boxed contests with any subset of problems
- **Public** or **invite-code-only** visibility
- Auto-computed status: `upcoming` → `active` → `ended`
- Participant scoring: **Hard ×5, Medium ×3, Easy ×1**
### 📊 Leaderboard — _the wall of legends_
- Global ranking based on weighted score across all accepted submissions
- Per-user breakdown: Easy / Medium / Hard solved, acceptance rate, total submissions
- **Live aggregation** — no manual sync required
### 🛝 Free Playground — _no rules, just DataWeave_
- Standalone editor with no problem constraints — bring your own chaos
- Three-panel layout: **Input payload** | **DataWeave script** | **Output**
- Instant execution, copy-to-clipboard, reset, and execution time display
### ✍️ Blog — _the community's brain_
- Community blog with full CRUD
- Write posts using a rich text editor; published posts are publicly visible
### 👤 User Profiles — _your story so far_
- Progress overview: total solved, by difficulty, bookmarks
- Submission history and personal stats
### 🪙 Coins System — _because winning should feel good_
- Gamification layer: earn coins for accepted solutions
- Transaction history visible in user profile
### 🔐 Admin Panel — _mission control_
- Role management and user administration via dedicated `/admin` routes
- Protected by Clerk authentication and custom role checks
## 🏗 Tech Stack
Every piece was chosen to keep the loop tight: **write DataWeave → run against a real compiler → get instant truth.**
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5 |
| UI | Tailwind CSS v4, shadcn/ui, Lucide Icons |
| Editor | Monaco Editor (`@monaco-editor/react`) |
| Auth | Clerk (`@clerk/nextjs`) |
| Database | MongoDB via Mongoose |
| AI | Google Gemini 2.5 Flash (`@google/genai`) |
| State | Zustand |
| Compiler Backend | DataWeave runtime (Docker / external service) |
| Containerisation | Docker Compose |
| Font | Geist (via `next/font`) |
## 🚀 Getting Started
> From `git clone` to green checkmarks in five steps.
### Prerequisites
- **Node.js** ≥ 18
- **Docker** (for MongoDB and optional DataWeave compiler backend)
- A **Clerk** account — [clerk.com](https://clerk.com)
- A **Google Gemini** API key — [ai.google.dev](https://ai.google.dev)
### 1. Clone & Install
The Next.js application lives in the **`client/`** directory; there is no root `package.json`.
All npm commands below run from `client/`.
```bash
git clone https://github.com/your-username/dwcode.git
cd dwcode/client
npm install
```
### 2. Environment Variables
Create `client/.env.local` and fill in your values:
```bash
# from the repo root
touch client/.env.local
```
```env
# client/.env.local
# MongoDB connection string
MONGODB_URI=mongodb://localhost:27017/dwcode
# Google Gemini API key (for AI problem generation)
GEMINI_API_KEY=your_gemini_api_key_here
# Clerk authentication keys (from your Clerk dashboard)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
# Clerk redirect paths
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
```
### 3. Start MongoDB
From the **repo root** (`docker-compose.yml` lives there, not in `client/`):
```bash
docker-compose up -d
```
This spins up a MongoDB instance at `localhost:27017` with a persistent volume.
### 4. Start the DataWeave Compiler Backend
The code execution engine is a separate DataWeave runtime service. By default the app points to `https://dwlbackend.onrender.com`. To run it locally, start the companion Docker container and update `DATAWEAVE_BACKEND_URL` in your env file accordingly.
### 5. Run the Development Server
```bash
cd client
npm run dev
```
The app starts on **[http://localhost:8000](http://localhost:8000)** — open it, pick a problem, and start transforming. 🎉
## 📂 Project Structure
The repo root holds infrastructure and docs; the entire Next.js application lives in `client/`.
```
dwcode/
├── client/ # ◀ THE NEXT.JS APP (run npm here)
│ ├── app/ # App Router pages & API routes
│ │ ├── api/ # REST API handlers
│ │ │ ├── execute/ # DataWeave code execution proxy
│ │ │ ├── transform/ # Playground execution proxy (multi-input)
│ │ │ ├── generate/ # AI problem generation (Gemini)
│ │ │ ├── problems/ # Problem CRUD
│ │ │ ├── submissions/ # Submission tracking
│ │ │ ├── contests/ # Contest management
│ │ │ ├── leaderboard/ # Score aggregation
│ │ │ ├── bookmarks/ # Bookmark toggle
│ │ │ ├── notes/ # Per-problem notes
│ │ │ ├── coins/ # Gamification coins
│ │ │ ├── blog/ # Blog posts
│ │ │ ├── comments/ # Problem discussion threads
│ │ │ ├── profile/ # Profile, username, follow
│ │ │ ├── auth/github/ # GitHub OAuth flow
│ │ │ ├── playground/ # Share, AI insights, GitHub import/push
│ │ │ └── admin/ # Admin: users & roles
│ │ ├── problems/[slug]/ # Problem workspace (split-pane editor)
│ │ ├── playground/ # Free DataWeave playground
│ │ ├── contests/ # Contest list & detail
│ │ ├── leaderboard/ # Global leaderboard
│ │ ├── blog/ # Blog list, detail & editor
│ │ ├── profile/ # User profile page
│ │ ├── create/ # Manual problem creation form
│ │ └── admin/ # Admin dashboard
│ ├── components/ # Shared UI components (Navbar, Comments, etc.)
│ ├── models/ # Mongoose schemas (Problem, Submission, Contest…)
│ ├── lib/ # Database connection, config, utilities
│ ├── public/ # Static assets
│ ├── __tests__/ # Vitest property-based tests
│ ├── proxy.ts # Clerk middleware (Next.js 16 naming)
│ ├── package.json # Dependencies & scripts
│ ├── next.config.ts # output: "standalone"
│ ├── tsconfig.json # "@/*" → client root
│ └── .env.local # Local secrets (gitignored)
├── .github/workflows/ # CI (runs with working-directory: client)
├── .agents/ · .kiro/ # Agent skills & feature specs
├── docker-compose.yml # MongoDB container
├── Dockerfile # App image (build context = repo root)
└── README.md
```
## 🔑 Key API Routes
| Method | Route | Description |
|--------|-------|-------------|
| `GET/POST` | `/api/problems` | List or create problems |
| `POST` | `/api/execute` | Run DataWeave code |
| `POST` | `/api/generate` | Generate problem with AI |
| `GET/POST` | `/api/contests` | List or create contests |
| `GET` | `/api/leaderboard` | Fetch ranked leaderboard |
| `POST` | `/api/submissions` | Submit a solution |
| `GET/POST` | `/api/bookmarks` | Toggle bookmark |
| `GET/PUT` | `/api/notes` | Read/write problem notes |
| `GET` | `/api/coins` | User coin balance |
| `GET/POST` | `/api/blog` | Blog post management |
| `GET/POST` | `/api/comments` | Problem discussion |
## 🐳 Docker
Start only MongoDB (from the repo root):
```bash
docker-compose up -d
```
Build and run the full app in Docker. The build context is the **repo root** (the Dockerfile
copies from `client/`), so run this from the root, not from `client/`:
```bash
docker build -t dwcode .
docker run -p 3000:3000 --env-file client/.env.local dwcode
```
> **Note:** the image listens on port **3000** (`ENV PORT 3000` in the Dockerfile), whereas
> `npm run dev` and `npm start` use port **8000**. Map ports accordingly.
## 🚀 Deployment
The two halves deploy independently.
| Part | Platform | Config | Why |
|---|---|---|---|
| `client/` | **Vercel** | [client/vercel.json](client/vercel.json) | Native Next.js hosting |
| `server/` | **Render** | [render.yaml](render.yaml) | Long-lived Express process |
**The backend cannot run on Vercel.** It calls `app.listen()`, holds a MongoDB
connection pool, and runs a periodic upstream heartbeat — none of which survive a
serverless runtime that freezes between invocations.
### Frontend → Vercel
Create the project, then **set Root Directory to `client`** in Settings → General.
That one setting is what makes the monorepo work; everything else is auto-detected.
Required environment variables:
```
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
CLERK_SECRET_KEY
NEXT_PUBLIC_API_URL # the deployed Render URL
NEXT_PUBLIC_APP_URL # the deployed Vercel URL
MONGODB_URI # until the API migration finishes
```
### Backend → Render
Dashboard → **Blueprints** → New Blueprint Instance, pointed at `render.yaml`.
It declares the build/start commands, `/health` as the health check, and every
environment variable. Secrets are marked `sync: false`, so Render prompts for them
instead of reading values from git.
After the first deploy, two values must agree or the browser will be blocked by CORS:
- `CORS_ALLOWED_ORIGINS` on Render must contain the Vercel origin.
- `NEXT_PUBLIC_API_URL` on Vercel must be the Render URL.
The service also keeps the frozen legacy endpoints — `POST /api/transform`,
`/health`, `/healthcheck` — byte-compatible with the original `server.js`, so
existing callers continue to work unchanged.
## 🗺 Roadmap Ideas
_Want to help shape where DWCode goes next? These are open for the taking:_
- 📅 Daily challenge streaks (keep the muscle warm)
- 🏢 Company-tagged problem sets for interview prep
- 🧵 DataWeave "pattern of the week" community writeups
- 🥇 Team leagues and seasonal contests
_Have an idea? Open an issue and let's talk._
## 🎁 Our Gift to the MuleSoft Community
> **DWCode is open source — because the best integrations are the ones we build together.** 🐴💜
We didn't build DWCode to lock it away behind a paywall. We built it because we *are* the MuleSoft community — and every Muley deserves a place to sharpen their DataWeave without spinning up yet another throwaway Mule app.
So here it is. **Free. Open. Yours.** Fork it, self-host it, remix it, ship it. This is our contribution to the flow — now add yours.
**Every Muley makes the mule stronger.** Here's how you can plug in:
- 🧩 **Add a problem** — dreamt up a devious transformation? Drop it in and stump the leaderboard.
- 🐛 **Squash a bug** — see something misbehaving? A PR is worth a thousand issues.
- 📖 **Write a blog post** — teach a DataWeave pattern that took *you* three hours to crack.
- ✨ **Build a feature** — the roadmap above is a menu, not a limit.
- ⭐ **Star the repo** — the cheapest, kindest way to say "keep going."
```dataweave
%dw 2.0
output application/json
var community = payload.developers
---
{
status: "open source, forever",
gift: "DWCode",
from: "us",
to: "the MuleSoft community",
yourMove: community map (dev) -> dev ++ { contributed: true }
}
```
> _An API is only as good as the community that connects to it. Same goes for a practice platform._ 🔌
## 🤝 Contributing
DWCode gets better every time a MuleSoft dev throws in a problem, fixes a bug, or writes a blog post. Jump in:
1. Fork the repo and create a feature branch: `git checkout -b feat/your-feature`
2. Install **from the repository root** — this is an npm workspace: `npm install`
3. Make your changes, then verify: `npm run typecheck && npm run lint && npm test && npm run build`
4. Open a pull request with a clear description
**[CONTRIBUTING.md](CONTRIBUTING.md) has the full guide** — repository layout,
the rule about never hand-writing a problem's expected output, database
migration conventions, and the gotchas that bite newcomers.
Please also read our [Code of Conduct](CODE_OF_CONDUCT.md).
Every contribution — a single test case or a whole new feature — makes the whole community sharper. 🙌
## 📄 License
[MIT](LICENSE) — feel free to use, fork, and extend. Go build something great.
Found a security issue? Please report it privately — see [SECURITY.md](SECURITY.md).
```dataweave
%dw 2.0
output application/json
---
{
project: "DWCode",
builtWith: "💜",
gift: "open source, to the MuleSoft community",
from: "one Muley to every Muley",
message: "Keep weaving. Keep shipping. Keep leveling up.",
yourTurn: "fork it → improve it → give it back"
}
```
⭐ **If DWCode helped you level up, drop a star — it fuels the mission.** ⭐
