On this page
ওভারভিউ
Hexode হলো একটি ব্রাউজার-ভিত্তিক, ক্লাউড-সমর্থিত কোলাবোরেটিভ IDE যা AI-নেটিভ ডেভেলপমেন্ট এবং রিয়েল-টাইম কোলাবোরেশনকে সরাসরি ব্রাউজারে আনার জন্য ডিজাইন করা হয়েছে।
এটি একাধিক ব্যবহারকারীকে কোনো লোকাল ইনস্টলেশন ছাড়াই একসাথে মাল্টি-ফাইল প্রজেক্ট সম্পাদনা করতে, কোড চালাতে এবং একটি সমন্বিত AI কোডিং অ্যাসিস্ট্যান্টের পরামর্শ নিতে সক্ষম করে। Hexode টেকনিক্যাল ইন্টারভিউ এবং DSA অনুশীলনের জন্য জিরো-সেটআপ ব্রাউজার কোডিং প্লেগ্রাউন্ড হিসেবেও কাজ করে।
আমি কেন Hexode তৈরি করেছি
"আমি এমন একটি ডেভেলপমেন্ট পরিবেশ চেয়েছিলাম যা সম্পূর্ণ ব্রাউজারে থাকে: কোনো লোকাল সেটআপ নেই, কোড লেখা ও চালানোর জায়গা, ইন্টারভিউ এবং DSA সমস্যা অনুশীলনের সুবিধা, রিয়েল টাইমে অন্যদের সাথে কোলাবোরেশন এবং একই ওয়ার্কফ্লোর ভেতরে AI ব্যবহারের সুযোগ।"
আর্কিটেকচার
- LevelDB is used for CRDT persistence.
- Clerk provides authentication.
- Vercel hosts the frontend.
রিয়েল-টাইম কোলাবোরেশন
Monaco serves as the primary editing surface, while Yjs provides CRDT-based shared document state. File contents are represented as Y.Text, and project files are tracked using a Y.Map. Synchronization is transported over WebSocket, with Awareness providing real-time presence and cursor state. Chat messages are also persisted within the shared Yjs document.
Crucially, the server implements the Yjs binary synchronization and awareness protocol directly using y-protocols/sync, y-protocols/awareness, and lib0 encoding/decoding.
By avoiding the standard y-websocket server package, the HTTP and WebSocket state live together in the same Node.js process. This means the server already has access to the live Yjs documents, allowing the AI endpoint to access that state without requiring the browser to resend the full code context.
Hard Problem Callout
সিনক্রোনাইজেশন বাগ: ইনিশিয়ালাইজেশন রেস কন্ডিশন সমাধান করা
In the original approach, a simple setTimeout was used before initializing a project. This risked overwriting the state before the CRDT synchronization had fully completed.
The final approach waits for the Websocket/Yjs provider to emit a 'synced' event. By combining provider.on('synced') with a check to ensure yFilesMap.size === 0, the project initializes only when appropriate. This is a correctness and race-condition fix, ensuring reliable document state.
setTimeout(() => init(), 1000)provider.on("synced", ...) + yFilesMap.size === 0মাল্টি-ফাইল কোড এক্সিকিউশন
Hexode supports multi-file projects, but Judge0 receives a single source_code string. This central mismatch requires a language-specific transformation pipeline.
For Java, public classes are renamed to Main, packages are stripped, access modifiers are handled, and Main collisions are managed.
For JavaScript, a custom require() shim is injected, resolving relative modules through an in-memory registry.
For C, C++, and Python, files are merged via ordered concatenation.
HexodeAI
When a user sends a message, it hits the /api/ai/chat endpoint. After rate limiting, the server reads the current Yjs document state directly from memory. It builds the context (capped at 2000 characters) and sends it to the Gemini API (gemini-3-flash-preview).
The response is streamed back via SSE (Server-Sent Events) and consumed by the client using a ReadableStream for incremental React rendering.
The AI endpoint enforces limits of 5 requests per minute and 20 requests per day. Additionally, a keyword-based query firewall blocks unrelated queries before they even reach the Gemini API.
ইঞ্জিনিয়ারিং চ্যালেঞ্জ
1. CRDT ইনিশিয়ালাইজেশন রেস কন্ডিশন
Problem: Initializing default project files could overwrite remote state if synchronization hadn't finished.
Approach: Listen to the Yjs provider's 'synced' event and check if the document is empty before initializing.
Result: Removed the initialization race that could overwrite synchronized project state.
2. মাল্টি-ফাইল প্রজেক্ট এক্সিকিউশন
Problem: Executing multi-file code against a single-string execution API (Judge0).
Approach: Implement language-specific merging pipelines (e.g., custom require shims, class renaming, concatenation).
Result: Enables multi-file execution across 5 supported languages.
3. ম্যানুয়াল Yjs WebSocket প্রোটোকল
Problem: Need to share HTTP and WebSocket state without running separate processes.
Approach: Implement the Yjs binary sync protocol directly on the Express server using lib0 and y-protocols.
Result: Unified server state, enabling the AI to read live documents from memory.
4. SSE মিড-স্ট্রিম এরর হ্যান্ডেলিং
Problem: HTTP status codes cannot be changed once headers are sent during a Server-Sent Events stream.
Approach: Stream specialized error event payloads that the client interprets and renders gracefully.
Result: Robust UI error states even when the LLM API fails mid-generation.
5. Monaco/Yjs রি-বাইন্ডিং
Problem: Switching files in the IDE left lingering CRDT bindings on the editor instance.
Approach: Destroy the previous MonacoBinding and rebind on file name changes.
Result: Clean transitions between files with correct cursor and edit tracking.
প্রযুক্তিগত সিদ্ধান্ত
Manual Yjs Server
Sharing the HTTP and WebSocket server provides direct access to the server-side document state in memory.
Sync-Event Initialization
Prevents premature default initialization that would corrupt incoming CRDT state.
Server-Side Yjs Context for AI
Avoids sending the full document contents over the network from the browser with every AI request.
Derived WebSocket URL
Deriving the WebSocket URL from the API URL reduces frontend deployment configuration surface.
ট্রেড-অফ এবং সীমাবদ্ধতা
- ইন-মেমরি Yjs ডক্স সরাসরি হরিজন্টাল স্কেলিংকে বাধা দেয়।
- অথোরাইজেশন বর্তমানে শুধুমাত্র ক্লায়েন্ট-সাইড।
- Judge0 CE পাবলিক API ব্যবহার করা হয়েছে, যার নিজস্ব রেট এবং SLA সীমাবদ্ধতা রয়েছে।
- কোনো স্বয়ংক্রিয় টেস্টিং স্যুট নেই।
- কোডবেসটি TypeScript ছাড়াই JavaScript-এ লেখা।
- টার্মিনালটি একটি আসল PTY-এর পরিবর্তে সিমুলেটেড।
- কোনো ডেডিকেটেড কনফ্লিক্ট-রেজোলিউশন UI নেই, কারণ Yjs স্বয়ংক্রিয়ভাবে CRDT কনফ্লিক্টগুলি পরিচালনা করে।
আমি যা শিখেছি
রিয়েল-টাইম সিস্টেমগুলি মৌলিকভাবে সিনক্রোনাইজেশনের সমস্যা।
CRDT স্টেট পারসিস্টেন্স এবং ইনিশিয়ালাইজেশন সম্পর্কে চিন্তাভাবনার ধরন পরিবর্তন করে দেয়। আপনি আর কেবল ডেটাবেস থেকে স্টেট লোড করতে পারবেন না; আপনাকে এটিকে নিরাপদে মার্জ করতে হবে।
মাল্টি-ফাইল AI কনটেক্সট একটি আর্কিটেকচার সমস্যা, কেবল 'LLM API কে কল করা' নয়। সিস্টেমটি এমনভাবে ডিজাইন করা যাতে সার্ভারের লাইভ ডকুমেন্টগুলোতে অ্যাক্সেস থাকে, ক্লায়েন্টের পেলোড বোঝা পুরোপুরি দূর করে দেয়।
নির্ভরযোগ্য এক্সিকিউশনের জন্য এক্সিকিউশন সার্ভিসের সীমাবদ্ধতাগুলোর চারপাশে ডিজাইন করার প্রয়োজন হয়।
আজ আমি অন্যভাবে কী তৈরি করতাম
"যদি আমি আজ Hexode শুরু করতাম, আমি প্ল্যাটফর্মটিকে আর্কিটেকচার লেভেল থেকেই AI-নেটিভ করে তুলতাম, বিদ্যমান IDE-তে যুক্ত একটি অ্যাসিস্ট্যান্ট হিসেবে নয়। আমি আগের Piston-ভিত্তিক পদ্ধতির পরিবর্তে শুরু থেকেই Judge0 কে বেছে নিতাম।"
টেকনোলজি স্ট্যাক
| Technology | Role |
|---|---|
| React | ফ্রন্টএন্ড UI লাইব্রেরি |
| Vite | ফ্রন্টএন্ড টুলিং এবং বান্ডলার |
| Monaco | কোড এডিটর সারফেস |
| Yjs | রিয়েল-টাইম কোলাবোরেশনের জন্য CRDT |
| WebSocket | রিয়েল-টাইম সিনক্রোনাইজেশন ট্রান্সপোর্ট |
| Node.js | ব্যাকএন্ড রানটাইম এনভায়রনমেন্ট |
| Express | ব্যাকএন্ড API এবং WebSocket হোস্ট |
| MongoDB Atlas | ব্যবহারকারী এবং প্রজেক্ট মেটাডেটার জন্য প্রাইমারি ডেটাবেস |
| Mongoose | MongoDB অবজেক্ট মডেলিং |
| LevelDB | CRDT ডকুমেন্ট আপডেটের জন্য স্থায়ী স্টোরেজ |
| Gemini | HexodeAI কে শক্তি প্রদানকারী LLM |
| Judge0 | কোড এক্সিকিউশন ইঞ্জিন |
| Clerk | ব্যবহারকারী প্রমাণীকরণ |
| Framer Motion | UI অ্যানিমেশন |
| Tailwind | ইউটিলিটি-ফার্স্ট CSS স্টাইলিং |