DEV Community

Deeraj Kumar
Deeraj Kumar

Posted on

TradeWeave: Eliminating Middlemen in Fashion

#githubchallenge #devchallenge #webdev

GitHub “Finish-Up-A-Thon” Challenge Submission

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:

  1. Hover over any dress card — it flips to reveal sizes
  2. Pick a size, adjust quantity, click "Add to cart"
  3. Click "Sign up" to see the premium registration flow
  4. Click the TradeWeave logo 5 times to unlock the hidden admin dashboard
  5. 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:
I'm 17, just finished my schooling. I'm heading to university for my higher studies. 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

  1. Finishing > Perfection. A shipped marketplace beats an unfinished "ideal" one.
  2. Live Demo > Code Link. Anyone can test it right now. No "clone and run npm install."
  3. Story > Just Features. Judges aren't just looking at code — they're looking at the journey.
  4. Copilot is a tool, not cheating. I wrote the core architecture. Copilot helped me finish the details.
  5. Small teams move fast. One developer (me) + one AI (Copilot) + one deadline = shipped product.

🔗 Links

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

Top comments (0)