Inspiration
HerbVerse was inspired by the growing demand for accessible, trustworthy herbal wellness products. With the rise of natural health trends, I wanted to create a platform that connects wellness-focused customers with trusted vendors, making it easy to discover and purchase high-quality herbs and herbal products.
What it does
HerbVerse is a mobile marketplace app built with React.js, designed to: Allow users to browse and search for herbal products. View detailed product information, including descriptions, prices, and images. Add items to their cart and proceed to checkout. Enjoy a seamless experience with intuitive navigation and responsive design.
How we built it
The app was developed entirely during the HerbVerse Hackathon using React.js. Key steps included: Planning & Design: Created wireframes and mockups for screens like Home, Product Detail, Cart, Orders, and Profile. Used modern UI components from react-native-paper for a clean, consistent look. Development: Implemented core features such as: Search functionality with AI-style suggestions. Bottom tab navigation for easy access to key screens. Reusable components like ProductCard and SearchBar. Deployment: Deployed the app using Expo for testing and Vercel for live hosting. Ensured cross-platform compatibility (iOS/Android). Testing: Conducted thorough testing on both iOS and Android emulators/simulators. Fixed bugs related to responsiveness and performance.
Challenges we ran into
During development, we faced several challenges: Performance Optimization: Ensuring smooth transitions and fast loading times for product lists. Responsive Design: Making sure the app looked great on all screen sizes. AI Integration: Simulating AI-powered search suggestions without relying on external APIs. Folder Permissions: Initially struggled with folder permissions in Firebase Studio, which required restructuring the project.
Accomplishments that we're proud of
We’re particularly proud of: Building a fully functional herbal marketplace in just a few days. Implementing an intuitive user flow with bottom navigation and reusable components. Adding AI-style search suggestions to enhance the browsing experience. Successfully deploying the app using Expo and Vercel.
What we learned
Through this hackathon, I learned: How to build scalable React.js apps with modern UI libraries. Techniques for optimizing performance and responsiveness. The importance of planning and prototyping before coding. How to deploy React.js apps using tools like Expo and Vercel.
What's next for HerbVerse
Future plans for HerbVerse include: Adding real-time notifications for order updates. Integrating payment gateways for secure transactions. Expanding the vendor dashboard with more analytics and reporting tools. Exploring AR integration for plant previews.
Log in or sign up for Devpost to join the conversation.