herbal care

Inspiration

The idea behind Herbal Care arose from witnessing how disconnected consumers and small-scale farmers often feel. We wanted a seamless bridge to bring fresh produce—fruits, vegetables, herbal remedies—straight from farm to table, with a native mobile experience. Combining my passion for natural health with the need for a flexible, low-barrier platform inspired a React Native frontend and a Flask backend that anyone can self-host.

What it does

Cross-platform consumer & vendor apps (iOS/Android):
- Customer: browse produce, add to cart, search items, manage profile & orders, checkout via Stripe.
- Vendor/Admin: upload, edit, and delete listings; track inventory; view orders.
Self-hosted backend: built in Flask, configurable via a .env (SECRET_KEY, DB_URI, EMAIL, PASSWORD, STRIPE_PUBLIC, STRIPE_PRIVATE, ENDPOINT_SECRET).
Client configuration: in client/app/tabs/explorer, simply input your Flask server URL (ENDPOINT) to connect.
Live slideshow home screen: a full-screen, image-driven welcome screen to showcase your farm’s bounty.

How we built it

React Native + Expo: for rapid, cross-platform UI development; leveraged react-native-webview for embedded vendor storefronts.
Flask REST API: user management, product CRUD, Stripe checkout endpoints; environment-driven configuration for secrets and DB.
Environment config:

Backend: .env holds SECRET_KEY, database URI, email/pw, Stripe keys, webhook secret.
Frontend: single ENDPOINT constant (or later via @env) points at your hosted API.
1. Stripe integration: secure payment flows, webhooks for order confirmation.
2. State management: React’s Context + hooks for cart, user session, and real-time vendor updates.

Challenges we ran into

Mobile WebView quirks: embedding the shopping site via react-native-webview needed careful handling of originWhitelist and loading states.
Responsive full-screen slideshow: ensuring 5K×3K images scale and caption text remains legible on small phones required dynamic font sizing and adjustsFontSizeToFit.
Hosting flexibility: making both web and native clients point at any self-hosted backend meant abstracting URLs early and building a simple explorer tab.
Stripe webhooks in Flask: testing local webhook delivery needed ngrok or similar tunneling to surface events to a dev machine.

Accomplishments that we’re proud of

Truly self-hostable: users or organizations spin up the Flask API locally or on any server, then point mobile apps to it without code changes.
Dual-role apps: one codebase supports both customers and vendors with contextual UIs and capabilities.
Polished UX: full-screen, animated slideshows; cart & checkout flows; intuitive vendor dashboard.
Hackathon-ready: a complete end-to-end solution in under two weeks, ready for demo.

What we learned

The power—and pitfalls—of environment-based configuration in mobile apps (no process.env in RN!).
How to balance native performance with web-viewed content across platforms.
Best practices in Stripe integration on a custom Flask stack.
Techniques for responsive design in React Native, especially for large background images and overlaid text.

What’s next for Herbal Care

Full .env support in the React Native client via react-native-dotenv, replacing hardcoded endpoints.
Push notifications for order updates (vendors and customers).
Analytics dashboard for vendors: sales, stock levels, customer demographics.
In-app chat between customers and vendors for custom orders or consultations.
AR-based produce previews, letting customers “try on” fruits or herbs in their environment before purchase.