Herbverse

HerbVerse

What is it?

HerbVerse is a mobile e-commerce app I created to bring herbal products to customers through a smooth shopping experience. The app supports two roles:

• Customers can:

  • Browse a catalog of herbal items
  • Search and filter products
  • Add to cart and place orders
  • Track order history
  • Manage their profile

• Vendors can:

  • Access a dashboard to manage inventory (add/update/activate/deactivate items)
  • View and update order statuses

Both customer and vendor features are part of the same app.

How I Built It

This was my first project using React Native, and I built it solo from scratch. Here’s what I used:

• React Native with Expo
• Firebase:
  • Firestore – For storing items, users, carts, and orders
  • Auth – For customer and vendor login/signup
• Zustand – For managing global state across the app
• Expo Router – For navigation using file-based routing
• Custom UI Components – I built reusable components and added animations using react-native-reanimated

Challenges I Faced

• Learning React Native: Coming from a Flutter background, React Native’s concepts, lifecycle, and tooling were all new to me.
• Handling State: Managing shared state between two user roles (customer and vendor) using Zustand was tricky, especially for syncing real-time updates like carts and orders.

What I'm Proud Of

• Complete E-commerce Flow: Built everything from product browsing to placing and tracking orders.
• Vendor Dashboard: Vendors can easily manage products and orders directly within the app.
• Real-time Features: Cart and order statuses update in real-time using Firestore and Zustand.
• Clean Codebase: I kept the project modular with reusable components and well-structured state management.
• Nice UI: Added animations, badges, and consistent design to make the app feel modern and smooth.

What I Learned

• React Native: Gained a solid understanding of its component model, styling, and navigation.
• TypeScript & Modern JS: Improved my JavaScript skills.
• Zustand: Learned how to manage async actions, derived state, and store subscriptions.
• Firebase Integration: Got hands-on with Firestore data modeling, rules, and real-time listeners in a mobile context.

Built With

• expo.io
• firebase
• react-native