MarketMitra & Stockly: HerbVerse Marketplace Ecosystem

An intuitive, mobile-optimized marketplace and vendor portal for natural products,secure authentication,real-time inventory,community forums, & seamless Razorpay checkout in one full-stack ecosystem.

Comment

Inspiration

HerbVerse Hack challenged us to unite technology and nature. We saw a chance to empower eco-conscious shoppers and small-scale herbal vendors with one seamless ecosystem. Instead of rebuilding, we leveraged our responsive React web apps by wrapping them in a true mobile shell—delivering both native and web experiences in record time.

What it does

MarketMitra (Customer)

  • 🔐 Secure auth: Email + OTP signup/login, password reset
  • 🔍 Product discovery: Browse & filter by category, price, availability
  • 🛒 Shopping flow: Add to cart → checkout (address entry) → Razorpay payment → invoice email
  • 📦 Order tracking: Real-time delivery updates & retry/pay-within-30-mins logic
  • 💬 Community: Forum for user discussions

Stockly (Vendor/Admin)

  • 🔐 Same secure auth + low-stock & dead-stock alerts
  • 📊 Dashboard: Total products, orders, analytics, popular items
  • ✏️ Inventory CRUD: Add/Edit/Delete; sort by type, price, stock
  • 🚚 Order management: View by status, detail view, bulk deletes
  • 💬 Community: Forum & profile management

Mobile delivery: Wrapped each responsive React app in an Expo-powered react-native-webview (and Capacitor) to produce installable Android APKs in under a day.

How we built it

  • Core stack: React, Node.js, Express, MongoDB, Redis
  • Mobile shell: Expo + react-native-webview; Capacitor for native packaging
  • State & UI: Redux Thunk, React Router, Tailwind CSS, AOS animations, GSAP
  • Auth & security: JWT, Passport.js (Google OAuth), bcrypt, express-rate-limit, express-mongo-sanitize
  • Payments & emails: Razorpay SDK, Nodemailer
  • Dev & deploy: Nodemon, concurrently, GitHub Actions CI, Vercel (frontend), Render (backend)
// Example: WebView wrapper in Expo
import React from 'react';
import { SafeAreaView } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WebView source={{ uri: 'https://marketmitra.vercel.app' }} />
    </SafeAreaView>
  );
}

Challenges we ran into

  • ⚙️ Integrating Redis-backed OTP/session caching for reliability
  • 🔄 Keeping inventory in sync across web and mobile WebViews
  • 📂 Organizing a mono-repo with two frontends + one backend

Accomplishments we’re proud of

  • 📱 True mobile APKs via Expo & Capacitor—compliant with React Native requirement
  • 🔄 Full end-to-end checkout with retry logic and automatic stock updates
  • 🎨 Responsive, polished UI across desktop and phone without separate codebases

What we learned

  • 🚀 Rapid mobile prototyping using WebView wrappers
  • 📐 Best practices for structuring a full-stack mono-repo
  • 🤖 CI/CD flows for multi-app deployments

What’s next

  1. Offline support & push notifications in a native wrapper
  2. In-app chat between customers and vendors
  3. AI-driven demand forecasting & vendor recommendations

MarketMitra Customer Demo
Stockly Vendor Demo

Built With

  • aos
  • bcrypt-payments-&-email:-razorpay-api
  • capacitor(ionic)
  • concurrently
  • country-state-city
  • cron
  • expo.io
  • express-databases-&-caching:-mongodb
  • github
  • githubactions
  • google-oauth
  • gsap
  • javascript
  • languages-&-frameworks:-javascript
  • node-cron
  • node.js
  • nodemailer-dev-&-deployment:-nodemon
  • passport.js
  • react
  • react-modal
  • react-native
  • react-native-webview
  • react-router
  • redis-authentication-&-security:-jwt
  • render-libraries-&-tools:-redux-thunk
  • sharp
  • vercel
Share this project:

Updates

Submission history