कोरियाई e-commerce स्किन डेवलपमेंट के लिए स्टैटिक boilerplate (HTMX + Vite + TypeScript)
(hebububu.github.io)नमस्ते, मैं e-commerce क्षेत्र में backend development कर रहा एक डेवलपर हूँ!
कोरियाई e-commerce में cafe24, Godomall & Shopby, MakeShop जैसे प्लेटफ़ॉर्म पर skin के ज़रिए front-end बनाने के मामले काफ़ी आम हैं।
लेकिन ज़्यादातर सिर्फ static serving ही उपलब्ध होने की वजह से, React जैसे SPA framework का इस्तेमाल छोटे और मझोले व्यवसायों के स्तर पर कई बार मुश्किल होता था।
कई जगह आज भी jQuery या Handlebars आधारित legacy stack इस्तेमाल हो रहे हैं, और फ़ाइल structure बिल्कुल भी व्यवस्थित न होने के कारण एक ही फ़ोल्डर में दर्जनों फ़ाइलों के साथ कोड बुरी तरह उलझा हुआ मिलता था। component reuse भी कई बार मुश्किल होता था।
इसीलिए मैंने सिर्फ HTML/JS/CSS फ़ाइलों से भी साफ़-सुथरे तरीके से व्यवस्थित e-commerce boilerplate बनाने की कोशिश की है।
इसका structure ऐसा है कि आपको सिर्फ API से जुड़ा कोड लिखकर जोड़ना है और फिर इस्तेमाल करना है!
तकनीकी स्टैक
- HTMX 2.0 — HTML fragment आधारित SPA navigation
- Vite 7 — build tool + HMR development server
- TypeScript — component-वार स्वतंत्र bundle
- Embla Carousel — parallax banner, product carousel
- शुद्ध CSS — Tailwind के बिना CSS custom property आधारित design token system
लागू किए गए पेज
- होम (banner carousel, category, product carousel, ranking, review, notice)
- product list (category sidebar, filter, grid layout)
- product detail (image gallery, option cascade, quantity control, tab, review lightbox)
- board (notice, FAQ, post detail)
- event (event list, countdown timer, detail)
- my page (member grade, order statistics, coupon/points)
- order history (date filter, order card list)
डेमो & सोर्स
- डेमो: https://hebububu.github.io/static-htmx-ecommerce/
- GitHub: https://github.com/Hebububu/static-htmx-ecommerce
आप इसे बिना किसी license के स्वतंत्र रूप से clone करके इस्तेमाल कर सकते हैं!
फ़ीडबैक या सुधार के आइडिया भी स्वागतयोग्य हैं!
अभी कोई टिप्पणी नहीं है.