Day Resellers: B2B Product Sourcing & Inventory Management
Full-stack B2B reseller platform with React + shadcn/ui, Drizzle ORM, PostgreSQL, Passport authentication, web scraping, and real-time inventory management.
Project Overview
The Challenge
Resellers manually tracked inventory across 10+ supplier websites, spending hours copying product data and pricing into spreadsheets.
Pricing strategies required constant monitoring of supplier changes, leading to missed margins or uncompetitive offers.
No centralized platform to manage user permissions for teams sourcing from different suppliers.
Supplier website structures changed frequently, breaking manual data collection workflows.
Architected a comprehensive B2B reseller management platform enabling businesses to source products from multiple suppliers, manage inventory, and automate pricing strategies. Built with modern TypeScript stack featuring React 18, shadcn/ui components, and Drizzle ORM for type-safe database operations.
Implemented sophisticated web scraping engine using Puppeteer and Playwright to automatically extract product data from supplier websites, normalize pricing, and update inventory in real-time. Integrated TanStack Query for optimized data fetching and caching.
Developed secure multi-user authentication system with Passport.js and session management using PostgreSQL storage (connect-pg-simple). Deployed on Replit with Neon PostgreSQL for scalable cloud database hosting.
Technical Architecture
Frontend: React 18 with shadcn/ui design system, providing 30+ accessible Radix UI components styled with Tailwind CSS.
State Management: TanStack Query handles server state with automatic caching, background refetching, and optimistic updates for inventory changes.
Database Layer: Drizzle ORM provides fully type-safe database queries, migrations, and schema validation with Zod integration.
Scraping Engine: Dual scraper architecture using Puppeteer (Chromium) and Playwright (WebKit) for robust data extraction from diverse supplier websites.
Authentication: Passport.js local strategy with PostgreSQL session storage (connect-pg-simple) for scalable multi-user access control.
Key Challenges & Solutions
Web Scraping Reliability Across Suppliers
Built dual scraper system using both Puppeteer and Playwright, with fallback logic and dynamic selector detection. Implemented headless browser pooling to handle rate limiting and CAPTCHAs.
Type-Safe Database Operations with Drizzle
Migrated from traditional ORM to Drizzle for compile-time type safety. Integrated drizzle-zod for automatic runtime validation, catching schema mismatches before hitting production.
Real-Time Inventory Updates
Implemented TanStack Query with WebSocket integration for live inventory sync. Used optimistic updates to provide instant UI feedback while background scraping validates actual stock levels.
shadcn/ui Component Architecture
Leveraged shadcn/ui's copy-paste philosophy with 30+ Radix primitives, ensuring full customization while maintaining accessibility (ARIA standards). Integrated Framer Motion for smooth transitions.
Impact & Results
Reduced manual data entry from 4+ hours/day to 10 minutes (automated scraping)
Increased profit margins by 15% through real-time competitive pricing analysis
Enabled 20+ team members to collaborate securely with PostgreSQL session management
shadcn/ui design system reduced UI development time by 60%
Key Features
- shadcn/ui component library (30+ Radix components)
- Drizzle ORM with TypeScript type safety
- Puppeteer/Playwright web scraping
- TanStack Query data management
- Passport.js authentication
- PostgreSQL with Neon hosting
- React Hook Form + Zod validation
- Recharts analytics dashboards
- Real-time inventory sync
- Drag-and-drop UI (@dnd-kit)
- Responsive Tailwind CSS design
- Express.js REST API
Technologies Used
Project Details
Client
B2B Reseller Marketplace - Freelance
Timeline
2024
Role
Full-Stack TypeScript Developer
© 2026 Firas Jday. All rights reserved.