TradeWeave: Eliminating Middlemen in Fashion

Deeraj Kumar — Sun, 07 Jun 2026 15:51:29 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

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?"

Demo

🔗 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

The Comeback Story

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

What Changed, Fixed, and Added

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

My Experience with GitHub Copilot

From Notebook Idea to Shipped Product

The Setup:
Building a fashion marketplace seemed ambitious for someone my age with limited time.

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.

The Real Win

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.

What I Learned

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.

🔗 Links

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

DEV Community: Deeraj Kumar