Wix KickstartX चैलेंज 2026 — पूर्ण राइटअप

परिणाम: 200/200 (100%) — टोकन: WKX-9245FA70-200 दिनांक: 24 मार्च 2026

1. खोज और टोह

चैलेंज की घोषणा

एक LinkedIn पोस्ट ने Wix KickstartX — एक जूनियर डेवलपर प्रोग्राम — के लिए एक विशेष चैलेंज की घोषणा की। नियम:

30 मिनट, केवल एक प्रयास
शीर्ष 10 उच्चतम स्कोर सीधे परीक्षा चरण में आगे बढ़ते हैं
दो लिंक प्रदान किए गए: wix-kickstartx-challenge-2026.base44.app/ और wixkickstart.com

चैलेंज एंट्री पॉइंट ढूँढना

मुख्य साइट wixkickstart.com एक Wix-होस्टेड साइट है (Wix के Thunderbolt इंजन द्वारा सर्वर-साइड रेंडर की गई)। मानक curl केवल JavaScript शेल लौटाता है — कोई वास्तविक सामग्री नहीं। हमने इसे रेंडर करने के लिए हेडलेस Chromium का उपयोग किया:

chromium --headless --disable-gpu --no-sandbox --virtual-time-budget=10000 \
  --dump-dom "https://wixkickstart.com" > /tmp/wix_rendered.html

रेंडर किए गए DOM से हमने एक एम्बेडेड iframe निकाला:

यह एक p5.js पार्टिकल एनीमेशन (हेरो सेक्शन का आकर्षक सजावटी तत्व) निकला, न कि चैलेंज स्वयं। वास्तविक चैलेंज Base44 ऐप पर है।

2. चैलेंज ऐप का रिवर्स इंजीनियरिंग

प्लेटफ़ॉर्म: Base44

चैलेंज Base44 पर चलता है — एक लो-कोड ऐप प्लेटफ़ॉर्म। ऐप एक सिंगल-पेज React एप्लिकेशन है जिसका सारा लॉजिक एक ही JS बंडल में है:

https://wix-kickstartx-challenge-2026.base44.app/assets/index-oTG160r9.js

आकार: 410,809 बाइट्स (मिनिफाइड React + ऐप लॉजिक + Base44 SDK)

API सतह निकालना

JS बंडल को grep करके, हमने पूरे API का मानचित्रण किया:

फ़ंक्शन	उद्देश्य
`startGame`	गेम सत्र बनाता है, 200 छवियाँ + 200 विवरण लौटाता है
`scoreGame`	`{matches: {}, sessionId: ""}` स्वीकार करता है, `{correctCount: N}` लौटाता है
`generateToken`	sessionId लेता है, पूर्णता टोकन लौटाता है
`getLeaderboard`	शीर्ष स्कोर लौटाता है
`saveNickname`	लीडरबोर्ड के लिए प्रदर्शन नाम सहेजता है

एंटिटीज़: GameSession, Participant

API URL पैटर्न:

POST /api/apps/{appId}/functions/{functionName}

ऐप ID: 69aea07cbcb9a3dd1039a58d

बंडल से मुख्य स्थिरांक

const or = 1800;   // Time limit: 1800 seconds (30 minutes)
const rm = 200;    // Total items: 200 image-description pairs

JSON सबमिशन की खोज

एक महत्वपूर्ण खोज — ऐप में एक JSON बल्क सबमिशन मोड है। मिनिफाइड स्रोत से:

function Ik({onSubmit:r, onClose:n}) {
    // ...
    h = JSON.parse(s)  // Parse JSON input
    // Validation: must be object like { "IMG-001": "DESC-042", ... }
    r(h)  // Submit all matches at once
}

मोडल में प्लेसहोल्डर टेक्स्ट:

{
  "IMG-001": "DESC-042",
  "IMG-002": "DESC-017",
  ...
}

इसका मतलब है कि हमें UI में 200 बार क्लिक करने की आवश्यकता नहीं है — हम सभी 200 मैचों की JSON मैपिंग प्रोग्रामेटिक रूप से सबमिट कर सकते हैं।

प्रमाणीकरण प्रवाह

Base44 SDK JWT प्रमाणीकरण का उपयोग करता है:

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

JWT पेलोड में शामिल है:

{
  "sub": "[email protected]",
  "exp": 1782162460,
  "iat": 1774386460
}

सभी API कॉल के लिए आवश्यक हेडर:

Content-Type: application/json
Authorization: Bearer {jwt_token}
X-App-Id: 69aea07cbcb9a3dd1039a58d
Base44-Functions-Version: prod
X-Origin-URL: https://wix-kickstartx-challenge-2026.base44.app/

3. गेम डेटा को समझना

startGame प्रतिक्रिया

POST /api/apps/69aea07cbcb9a3dd1039a58d/functions/startGame
Status: 200
Transferred: 62.87 kB compressed (2.20 MB decompressed)
Content-Encoding: br (Brotli)

प्रतिक्रिया संरचना:

{
  "status": "active",
  "sessionId": "69c2fd218e5b26f307c941c9",
  "startedAt": "2026-03-24T21:07:45.101Z",
  "imageOrder": ["IMG-154", "IMG-102", ...],   // 200 items (display order)
  "descOrder": ["DESC-125", "DESC-109", ...],  // 200 items (display order)
  "imagesData": { "IMG-001": "data:image/svg+xml;base64,...", ... },  // 200 SVGs
  "descriptionsData": { "DESC-105": "milky field, overlaid with...", ... }  // 200 texts
}

छवि प्रारूप: इनलाइन SVG (base64-एन्कोडेड)

प्रत्येक छवि एक 200x200 SVG है जिसमें शामिल है:

एक पृष्ठभूमि ग्रेडिएंट (हल्का या गहरा थीम)
एक वैकल्पिक ओवरले पैटर्न (रेखाएँ, बिंदु, रिंग, आदि)
विशिष्ट रंगों, आकारों, अपारदर्शिता, रोटेशन और स्थिति वाली ज्यामितीय आकृतियाँ

डिकोड किए गए SVG का उदाहरण (IMG-001):

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="bg" ...>
      <stop offset="0%" stop-color="#f5f0eb"/>
      <stop offset="100%" stop-color="#e8e0d5"/>
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#bg)"/>
  <!-- Optional overlay lines/dots/rings here -->
  <polygon points="..." fill="#E2725B" transform="translate(128.6,185.7) rotate(90)"
           style="opacity:0.5;filter:drop-shadow(...)"/>
  <!-- More shapes... -->
</svg>

विवरण प्रारूप: संरचित प्राकृतिक भाषा

प्रत्येक विवरण एक सख्त पैटर्न का पालन करता है:

{background} field[, overlaid with {overlay}]. {N} elements total:
{size} {opacity} {color} {shape} ({rotation}, at {position}) ·
{size} {opacity} {color} {shape} ({rotation}, at {position}) · ...

उदाहरण:

milky field, overlaid with tilted cross-lines. 10 elements total:
minuscule nearly solid dim gray pike (steeply angled, at center inner-left) ·
substantial solid azure pike (diagonal, at top center) · ...

4. स्वचालित सॉल्वर का निर्माण

चरण 1: सभी स्थिरांकों का मानचित्रण

हमें SVG गुणों को विवरण शब्दावली में मैप करने की आवश्यकता थी। इसके लिए सटीक पत्राचार खोजने हेतु सभी 200 छवियों और सभी 200 विवरणों का विश्लेषण आवश्यक था।

पृष्ठभूमि मानचित्रण (12 प्रकार)

दोनों ओर घटनाओं की गणना करके, हमने 1:1 मानचित्रण स्थापित किया:

SVG ग्रेडिएंट प्रारंभ रंग	गणना	विवरण शब्द	गणना
`#0a1628`	28	`pitch`	28
`#eef2f7`	20	`frosted`	20
`#0d0d0d`	19	`tenebrous`	19
`#fef9f0`	18	`pearlescent`	18
`#1e0a2e`	18	`nocturnal`	18
`#0a1a0a`	17	`midnight`	17
`#1a0a0a`	15	`inky`	15
`#f5f0eb`	14	`milky`	14
`#f7f3ee`	14	`ethereal`	14
`#f0f0f0`	14	`radiant`	14
`#f0f7f4`	13	`glowing`	13
`#1a1a2e`	10	`somber`	10

विधि: सभी 200 SVGs में अद्वितीय ग्रेडिएंट प्रारंभ रंगों की गणना करें, सभी 200 विवरणों में अद्वितीय पहले-शब्द की गणना करें, गणना द्वारा मिलाएँ।

ओवरले मानचित्रण (7 प्रकार)

SVG ओवरले प्रकार के आधार पर अलग-अलग तरीकों से लागू किए जाते हैं:

SVG पैटर्न	पहचान विधि	गणना	विवरण नाम	गणना
`<line>` तत्व, क्षैतिज (`dy=0`)	x1,y1,x2,y2 जाँचें	35	`striped overlay`	35
`<line>` तत्व, ऊर्ध्वाधर (`dx=0`)	x1,y1,x2,y2 जाँचें	34	`lattice pattern`	34
`opacity="0.06"` वाला `<circle>` (बिंदु)	कम-अपारदर्शिता वाले सर्कल गिनें	30	`stippled layer`	30
कोई ओवरले तत्व नहीं	कोई रेखाएँ नहीं, कोई bg आकृतियाँ नहीं	28	(कोई नहीं)	28
`<line>` तत्व, विकर्ण	ढलान दिशा जाँचें	27	`tilted cross-lines`	27
`opacity="0.06"` वाले छोटे `<polygon>`/`<path>`	कम-अपारदर्शिता विशेषता वाली आकृतियाँ	25	`arrow-band texture`	25
`fill="none" stroke="#888"` वाला `<circle>`	केवल-स्ट्रोक सर्कल	21	`ringed pattern`	21

मुख्य अंतर्दृष्टि: पृष्ठभूमि पैटर्न तत्व opacity को XML विशेषता के रूप में उपयोग करते हैं (जैसे, opacity="0.06"), जबकि अग्रभूमि आकृतियाँ opacity को style विशेषता के अंदर उपयोग करती हैं (जैसे, style="opacity:0.7")। पृष्ठभूमि पैटर्न को वास्तविक आकृतियों से अलग करने के लिए यह अंतर महत्वपूर्ण था।

रंग मानचित्रण (28 रंग)

सभी 200 SVGs ठीक 28 अद्वितीय हेक्स फिल रंगों का उपयोग करते हैं। सभी 200 विवरण ठीक 28 अद्वितीय रंग नामों का उपयोग करते हैं।

wix-kickstartx-challenge-writeup

सबसे लोकप्रिय