YourNextStore – Stripe को backend के रूप में इस्तेमाल करने वाला open source Shopify

 (github.com/yournextstore)
1 पॉइंट द्वारा GN⁺ 2024-09-12 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Your Next Store एक Stripe-आधारित open source AI-native Next.js e-commerce template है, जो self-hosting और Vercel one-click deployment को support करता है
  • AI coding tools के लिए इसे संभालना आसान बनाने हेतु AGENTS.md, idiomatic Next.js App Router patterns, और typed Commerce Kit SDK methods साथ में दिए गए हैं
  • इसकी मुख्य सुविधाएँ Stripe API के direct integration के जरिए checkout, billing, और subscriptions हैं, और product, options, cart, तथा payment domain models को types के साथ व्यवस्थित किया गया है
  • इसका tech stack Next.js 16, Bun, Commerce Kit SDK, Tailwind CSS v4, Shadcn UI, TypeScript, और Biome से बना है
  • theme-001 से theme-149 तक 149 theme branches उपलब्ध हैं, जिनमें themes केवल visual components और static assets बदलते हैं, जबकि product, cart, और checkout वैसे ही बने रहते हैं

प्रोजेक्ट अवलोकन

  • Your Next Store एक open source AI-native Next.js e-commerce template है
  • यह Stripe पर चलता है और AI coding tools को ध्यान में रखकर बनाया गया है
  • यह live demo उपलब्ध कराता है
  • repository जिन खास बातों पर ज़ोर देती है, वे इस प्रकार हैं
    • AI-Friendly Codebase: इसमें AGENTS.md, idiomatic patterns, और typed methods वाला Commerce Kit SDK शामिल है
    • Stripe-Native: यह Stripe API को सीधे integrate करके checkout, billing, और subscriptions को संभालता है
    • Next.js 16: यह App Router, React Server Components, और React Compiler का उपयोग करता है
    • Open Source: इसे कहीं भी self-host किया जा सकता है और Vercel पर one-click deployment किया जा सकता है

AI coding tools के लिए अनुकूल डिज़ाइन

  • AI tools बेहतर तरीके से काम कर सकें, इसके लिए परिचित Next.js patterns का उपयोग किया गया है
    • इसमें App Router, Server Components, Server Actions, और "use cache" जैसे idiomatic configurations इस्तेमाल किए गए हैं
  • Commerce Kit SDK में productBrowse() और cartUpsert() जैसे methods के input और output formats परिभाषित हैं
    • README के अनुसार, जब LLM को contract पता होता है तो वह सही code लिखता है
  • product, variants, cart, और checkout जैसे domain models पहले से मौजूद हैं और उनके types स्पष्ट हैं
    • इसलिए LLM को ये models नए सिरे से बनाने की ज़रूरत नहीं पड़ती
  • AGENTS.md में project context, SDK examples, Biome rules, और validation checklist शामिल हैं
    • इसका उद्देश्य AI agents को code लिखने से पहले codebase समझने में मदद करना है

Tech stack

  • Next.js 16

    • यह App Router, React Server Components, और React Compiler का उपयोग करता है

  • Bun

    • इसे तेज़ JavaScript runtime और package manager के रूप में उपयोग किया जाता है

  • Commerce Kit SDK

    • यह headless commerce API integration को संभालता है

  • Tailwind CSS v4

    • इसे utility-first styling के लिए उपयोग किया जाता है

  • Shadcn UI

    • यह Radix UI आधारित 50 से अधिक accessible components प्रदान करता है

  • TypeScript

    • इसका उपयोग सख्त type-safe development के लिए किया जाता है

  • Biome

    • इसे तेज़ linter और formatter के रूप में उपयोग किया जाता है

Quick start और रन करने की शर्तें

  • quick start command का प्रवाह repository को clone करने, Bun से dependencies install करने, और environment variable file बनाने का है
git clone https://github.com/yournextstore/yournextstore.git
cd yournextstore && bun install
cp .env.example .env.local   # Add your YNS_API_KEY from https://yns.store/manage/settings/api
bun dev
  • इसके बाद store localhost:3000 पर चलने लगता है
  • आवश्यक शर्तें इस प्रकार हैं
  • .env.example को .env.local में copy करके YNS_API_KEY सेट करना होगा
    • YNS_API_KEY admin panel से जारी किया जाने वाला API token है

Themes और विस्तार

  • Your Next Store अलग-अलग store categories के लिए 149 ready-made themes उपलब्ध कराता है
  • हर theme homepage, hero, color palette, और section layout को पूरी तरह से फिर से डिज़ाइन करता है
  • सभी themes एक ही core codebase पर बनाए गए हैं
  • themes theme-001 से theme-149 तक की branches में मौजूद हैं
  • एक ही command से theme बदला जा सकता है
git checkout theme-016
  • हर theme branch main के ऊपर एक single commit के रूप में है, और commit message theme का mood बताता है
  • पूरी theme list नीचे दिए गए command से देखी जा सकती है
git for-each-ref --sort=refname --format='%(refname:short)  %(subject)' 'refs/remotes/origin/theme-*'
  • सभी theme branches theme-001 … theme-149 जैसे 0-padded three-digit ID का उपयोग करती हैं
  • themes केवल visual components और static assets को संशोधित करते हैं
    • product, cart, और checkout में कोई बदलाव नहीं होता

Documentation और contribution

  • coding conventions और PR checklist के लिए CONTRIBUTING.md देखें
  • product import, cart management, और YNS पर build करने का तरीका API documentation में देखा जा सकता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-09-12
Hacker News की राय

  • मैं शायद कभी भी ऐसी कोई चीज़ नहीं बनाऊँगा जो Stripe पर निर्भर हो
    मैं मानता हूँ कि fraud और chargeback की वजह से payments मुश्किल हो जाते हैं, लेकिन Stripe का रिकॉर्ड इतना खराब है कि वह वैध accounts को freeze कर देता है और संपर्क को लगभग नज़रअंदाज़ कर देता है। वह arbitration भी मजबूर करता है, और वे arbitrators Stripe की कमाई पर निर्भर होते हैं, और terms में यह भी रखा गया है कि freeze किए गए funds को invest किया जा सकता है। class action भी प्रतिबंधित है, हालांकि पता नहीं यह clause वास्तव में टिकेगा या नहीं

    • जानना चाहूँगा कि आप alternative के तौर पर क्या recommend करते हैं

  • अब मैं पोस्ट edit नहीं कर सकता, लेकिन YNS का working demo यहाँ है: https://demo.yournextstore.com
    Stripe Link देखने के लिए email test@test.com इस्तेमाल करें, और activate होने पर 000000 दर्ज करें

  • मैं लंबे समय से बिल्कुल यही चीज़ कई बार बनाना चाहता था, बढ़िया बनाया है
    मैंने अभी गहराई से नहीं देखा, लेकिन जानना चाहूँगा कि क्या यह digital downloads support करता है। digital product downloads और “lead magnet” downloads बहुत से stores के लिए काफ़ी मददगार होंगे

    • शुरुआत में मैंने physical products पर ध्यान दिया था, लेकिन digital products feature जोड़ना शायद उल्टा और आसान होगा
      अगर आपके पास कोई ideal solution है, या perfect scenario में यह कैसे काम करना चाहिए, तो बताइए। digital downloads और lead magnet downloads दोनों के लिए किसी reference model की ज़रूरत है

  • demo में मुझे सबसे पसंद आने वाला feature one-page checkout है
    यह Shopify के शानदार checkout flow के बहुत क़रीब है। WooCommerce को Shopify के असली self-hosted alternative की भूमिका निभानी चाहिए, लेकिन अभी भी उसमें कमी है, और plugin ecosystem होने के बावजूद अच्छा cart और checkout चलाना काफ़ी मुश्किल है। launch के लिए बधाई

    • one-page checkout लगातार मेरी top priorities में से एक रहा है, और आगे भी रहेगा
      अभी कुछ छोटे improvements बाकी हैं, लेकिन मौजूदा checkout experience काफ़ी smooth है, इससे मैं खुश हूँ। क्या आपने इसे Stripe Link के साथ भी आज़माया? अगर आपकी पिछली खरीदारी की जानकारी इंटरनेट पर कहीं save है, तो बिना form भरे पूरा checkout 4 clicks तक सिमट जाता है
    • WooCommerce खुद backend के रूप में ज़्यादातर ठीक है, लेकिन themes अधिकतर खराब हैं
      default और free themes सहित layouts बदसूरत हैं, बेवजह भारी हैं, और checkout screens इतनी amateur लगती हैं कि बहुत से लोगों को यह scam site जैसा महसूस हो सकता है। अच्छी themes हैं, लेकिन उनके लिए काफ़ी पैसे देने पड़ते हैं
    • product जोड़ते समय पूरा cart दिखाने वाला छोटा link भी अच्छा detail है

  • जानना चाहूँगा कि shipping cost calculation कैसे handle की जाती है
    क्या यह भी Stripe के product catalog feature में शामिल है?

    • यह feature अभी तैयार नहीं है, लेकिन इस पर सक्रिय रूप से काम चल रहा है
      अगर आपको अभी shipping feature चाहिए, तो इसे third party को सौंप सकते हैं, और कुछ partners इसी तरह features बना रहे हैं। लंबे समय में मैं Stripe के साथ और गहरा integration चाहता हूँ ताकि Stripe e-commerce का core infrastructure बन सके
    • यह data कई third parties से लिया जा सकता है
      व्यक्तिगत रूप से मैं Shippo को पसंद करता हूँ, और मैं founders को जानता हूँ; उन्होंने इसे Weebly में, जो अब Square का हिस्सा है, integrate किया था

  • अगर database की ज़रूरत नहीं है, तो inventory management कैसे होता है, यह जानना चाहूँगा
    उदाहरण के लिए अगर कई लोग एक ही product को एक साथ खरीदना चाहें और stock कम हो, तो क्या होगा?

    • शुरुआत में मैंने inventory जैसी data को सीधे Stripe के product metadata में store करने के तरीके से शुरू किया था
      यहाँ हर store और Stripe के बीच synchronization, जैसे atomicity जैसी चीज़ों को manage करने के लिए एक thin layer भी विकसित कर रहा हूँ। यह अभी ideal solution नहीं है, लेकिन ज़्यादातर छोटे stores के लिए अच्छी तरह काम करता है, और इसे और बेहतर करने के ideas भी हैं। ऐसे मामलों में composable या headless setup उल्टा बोझ बन सकता है

  • मैंने demo आज़माया और जैसा दूसरे लोग कह रहे थे, यह सच में बहुत अच्छी तरह बना है और तेज़ है
    लेकिन cart में product हटाने के लिए quantity को 0 करने पर मुझे एक bug मिला, जहाँ refresh शुरू हो जाता है और interface freeze हो जाता है। यह इस behavior की वजह से है या मौजूदा traffic की वजह से, पता नहीं, लेकिन बताना ठीक लगा

    • उस bug की पुष्टि हो गई है, और बताने के लिए धन्यवाद
      हाल में मैंने उस हिस्से पर कई बार iteration किया था, लगता है कुछ छूट गया

  • काफ़ी smooth है, और Umami support अच्छा लगा
    अच्छा होगा अगर इसे एक Dockerfile में wrap कर दिया जाए, लेकिन personal use के लिए खुद करना भी मुश्किल नहीं होना चाहिए। subscriptions के अलावा Stripe इस्तेमाल किए हुए काफ़ी समय हो गया है, तो जानना चाहूँगा कि coupon codes या sales support करना कितना मुश्किल होगा। क्या इसकी कोई योजना है?

    • मैं अभी कई चीज़ें experiment कर रहा हूँ, और Umami से शुरुआत की है, लेकिन e-commerce के लिए खास analytics subfeatures खुद बनाने पर भी विचार कर रहा हूँ
      coupons roadmap में हैं और उन्हें जोड़ना तुलनात्मक रूप से आसान होना चाहिए। यह भी जानना चाहूँगा कि क्या आप साथ में beta test करने के इच्छुक हैं। Dockerfile community ने propose किया है और मैं आज इसे देखूँगा: https://github.com/yournextstore/yournextstore/pull/22/files

  • demo तेज़ लगने की वजह यह है कि mouse cursor hover या tap पर list को prefetch किया जाता है
    यह पारंपरिक e-commerce में भी संभव है, और ऐसा user experience जो users का data बर्बाद करे, मुझे पसंद नहीं है। क्या prefetch बंद करने का कोई option है?

    • बिल्कुल। open source होने का फ़ायदा यही है, fork करके prefetch disable किया जा सकता है
      लेकिन user experience को देखते हुए, मुझे नहीं लगता कि वह सबसे अच्छा विकल्प होगा
    • next.js में जो configure किया जा सकता है, वही यहाँ भी लागू होता दिखता है
      लेकिन मुझे पता चला कि globally prefetch बंद करने का कोई तरीका नहीं है[0]। इसे हर link पर अलग से बंद करना होगा, या custom link component बनाकर इस्तेमाल करना होगा
      [0] https://github.com/vercel/next.js/discussions/24437

  • बढ़िया। मैं ठीक ऐसी ही चीज़ ढूँढ रहा था
    लेकिन install के दौरान corepack install पर pnpm@9.9.0 hash mismatch error आई। expected hash और received hash अलग थे, इसलिए Internal Error: Mismatch hashes हुआ

    • pnpm को 9.10.0 पर upgrade कर दिया गया है और अब ठीक है
    • लगता है पहले settings को थोड़ा और देखना होगा
      क्या आप पहले package.json से packageManager को पूरी तरह हटाकर फिर दोबारा कोशिश कर सकते हैं? अगर संभव हो, तो मैं एक छोटी video call पर reproduction environment खुद देखना चाहूँगा। अभी मेरी तरफ़ से यह reproduce नहीं हो रहा है