Jens' Submission

Seamless, user-friendly experience with secure authentication, real-time cart management, and an intuitive green-themed UI.

Comment

HerbVerse

🌿 HerbVerse is a project developed during the HerbVerse Hackathon, aimed at creating a natural wellness e-commerce platform. Please note that the backend is currently non-functional due to known issues, but the frontend works as expected.

🌟 Inspiration

The inspiration for HerbVerse came from the growing demand for natural and sustainable wellness products. We wanted to create a platform that connects customers with herbal products while empowering vendors to showcase their offerings. The goal was to build a seamless and visually appealing e-commerce experience that promotes natural living.

💡 What it Does

HerbVerse is a modern e-commerce platform that allows:

  • 🌱 Customers to browse, search, and purchase herbal products.
  • 🌿 Vendors to manage their inventory and orders.
  • 🔄 Both roles to switch seamlessly between customer and vendor functionalities.

Key features include:

  • A green-themed UI that reflects the natural essence of the products.
  • Authentication using Clerk for secure login and registration.
  • Cart management for customers to add, update, and remove items.
  • Inventory management for vendors to add and edit products.

🛠️ How We Built It

Frontend:

  • Built with React Native and Expo for cross-platform compatibility.
  • Used Expo Router for file-based navigation.
  • Styled with Tailwind CSS (via NativeWind) for a clean and responsive UI.
  • Integrated Clerk for authentication and user management.

Backend (Non-functional):

  • Built with Node.js and Express.js.
  • Used PostgreSQL as the database, managed via docker-compose.
  • Exposed RESTful API endpoints for products, orders, and inventory.

State Management:

  • Used Context API to manage global states like the cart.

Development Tools:

  • Expo CLI for frontend development.
  • Docker for backend and database containerization.
  • ESLint for code linting and maintaining code quality.

🚧 Challenges We Ran Into

  • ⏳ Time Constraints: Balancing feature development and UI design within the hackathon timeline was challenging.
  • 🔄 Role Management: Implementing seamless role switching between customer and vendor required careful handling of user metadata.
  • 🎨 Styling Consistency: Ensuring a consistent green-themed design across all screens took extra effort.
  • 🌐 Backend Integration: Managing API calls and ensuring smooth communication between the frontend and backend was tricky at times.

🏆 Accomplishments That We're Proud Of

  • Successfully implemented a role-based system for customers and vendors.
  • Designed a visually appealing and consistent UI that reflects the theme of natural wellness.
  • Built a functional cart management system with real-time updates.
  • Integrated secure authentication using Clerk.
  • Created a scalable architecture for future enhancements.

📚 What We Learned

  • ⚛️ React Native: Improved our understanding of building cross-platform apps with Expo.
  • 🌬️ Tailwind CSS: Learned how to use NativeWind for responsive and consistent styling.
  • 🔑 Role-Based Systems: Gained experience in implementing role-based access control.
  • ⏱️ Time Management: Learned how to prioritize features and manage time effectively during a hackathon.

🚀 What's Next for HerbVerse

  • ✅ Checkout System: Implement a complete checkout flow with payment integration.
  • 📦 Order History: Allow customers and vendors to view past orders.
  • 📊 Vendor Analytics: Provide vendors with insights into their sales and inventory.
  • 🔔 Push Notifications: Notify users about new products, discounts, and order updates.
  • 🌐 Deployment: Deploy the app to production for real-world use.
Share this project:

Updates