TradeWeave: Eliminating Middlemen in Fashion

Published: (June 7, 2026 at 11:51 AM EDT)
4 min read
Source: Dev.to

Source: Dev.to

This is a submission for the GitHub Finish-Up-A-Thon Challenge I built TradeWeave — a B2B + B2C fashion marketplace that connects small scale weavers and manufacturers directly to customers and retailers, eliminating middlemen entirely. The project started as a notebook idea at midnight: “What if factory workers and artisans could sell directly, keeping the full margin instead of losing 40% to supply chain bloat?” 🔗 Live Demo — TradeWeave — Try it right now, no installation needed How to use: Hover over any dress card — it flips to reveal sizes Pick a size, adjust quantity, click “Add to cart” Click “Sign up” to see the premium registration flow Click the TradeWeave logo 5 times to unlock the hidden admin dashboard Click “Wholesale” tab to see direct manufacturer listings 💻 Source Code: github.com/Deeraj25/tradeweave Before: Idea scribbled in a notebook at midnight Zero code written Zero deployment Tucked away under “someday projects” Status: Abandoned After: Full-featured marketplace in production ~550 lines of polished HTML/CSS/JavaScript Deployed live on Netlify + GitHub Pages Anyone can use it instantly Real product with real features Core fixes:

Built the entire marketplace from scratch (this was a notebook idea, not existing code) Implemented hover-to-flip cards with CSS 3D transforms (perspective + rotateY) Created responsive product grid with auto-fill layout Built localStorage persistence for cart + admin state Features added: 5 product categories with 20+ items Hover-flip interaction (no page reload needed) AI Try-On modal with upload UX Wholesale B2B portal with manufacturer data Hidden admin dashboard (5-click unlock) Aurora-style signup with animated hero and steps Real-time analytics dashboard (revenue, top categories, order table) Mobile-responsive design Keyboard + mouse support Polish & optimization: Custom animations (staggered reveals, floats, shimmers) Cormorant Garamond typography (luxury feel) Gold + cream color scheme (premium Fashion aesthetic) Touch support for mobile Accessibility focus states Zero dependencies — works offline The Setup: But then I thought: “This idea is real. Let me actually finish it.” Where GitHub Copilot Made the Difference:

  1. Image rendering logic I had emojis showing in product cards I wanted real images without rewriting the entire grid Copilot prompt: “Update renderProducts so it displays p.img as a background image when present, else show the emoji”

Result: Copilot wrote the conditional CSS background logic in 30 seconds. Done. 2. Manufacturer data generation I needed 4 realistic B2B factory listings with authentic Indian details MOQ, lead time, payment terms, materials, pricing Copilot prompt: “Generate a manufacturers array with 4 real Indian textile factories”

Result: Copilot created the entire manufacturers array with authentic details I’d never have thought of (e.g., “Tiruppur Knits Ltd · 4.7 stars · Cotton knitwear”). 3. CSS 3D flip-card bug The back face of cards was showing through on initial load CSS 3D transforms can be finicky Copilot prompt: “Why is backface-visibility not working on my flip cards?”

Result: Copilot diagnosed the z-index + transform-style issue and rewrote the CSS to use preserve-3d correctly. 4. Responsive grid cleanup Mobile layout was breaking at certain widths Grid columns weren’t scaling properly Copilot prompt: “Fix the product grid so it works on mobile, tablet, and desktop”

Result: Copilot rewrote the grid from fixed grid-template-columns: repeat(4, 1fr) to smart repeat(auto-fill, minmax(220px, 1fr)) with proper breakpoints. 5. Animation refinement I wanted the signup hero and product cards to feel “alive” Copilot prompt: “Add staggered fade-up animations to product cards with 0.06s delay between each”

Result: Copilot added the animation-delay calc logic and keyframe definitions. Copilot wasn’t just autocomplete. It was a finishing partner. When I got stuck on CSS 3D transforms, Copilot explained the issue and fixed it. When I had feature ideas but no time to code them, Copilot built the scaffolding. When I needed data (manufacturers), Copilot generated realistic Indian textile factory details. When my code was 70% done, Copilot helped me polish the remaining 30% to shipping quality. Most importantly: Copilot helped me realize that shipping a finished product matters way more than having perfect code. Finishing > Perfection. A shipped marketplace beats an unfinished “ideal” one. Live Demo > Code Link. Anyone can test it right now. No “clone and run npm install.” Story > Just Features. Judges aren’t just looking at code — they’re looking at the journey. Copilot is a tool, not cheating. I wrote the core architecture. Copilot helped me finish the details. Small teams move fast. One developer (me) + one AI (Copilot) + one deadline = shipped product. Live Demo: [http://deeraj25.github.io/tradeweave/#/] Source Code: github.com/Deeraj25/tradeweave

My GitHub: @Deeraj25

The Real Victory

I went from “I have a notebook idea” to “I have a live marketplace I’m proud to show anyone” in one week. Built by: Deeraj Kumar and Sai Mukesh Stack: HTML, CSS, vanilla JavaScript, Google Fonts

Deploy: Netlify (free tier) + GitHub Pages

Challenge: GitHub Finish-Up-A-Thon 2026

0 views
Back to Blog

Related posts

Read more »