Welcome page
sign in page
sign up page with role type selection
CUSTOMER dashboard
CUSTMER product browse and search
PRODUCT preview
Cart
CUSTOMER checkout page
CUSTOMER shipping/delivery types
CUSTOMER payment/purchase page
CUSTOMER profile management page
profile edit
VENDOR dashboard page
VENDOR wallet withdrawal
VENDOR products managent
PRODUCT TRACKING
Tracking status
Product Order status

GreenCart: A Dual-Role Mobile Commerce Solution

Inspiration

The inspiration for GreenCart came from observing the provided mockup image and some templates. Too often, vendors and customers are forced to use separate applications, creating disconnected experiences and unnecessary complexity. I wanted to build a unified platform where both sides of the marketplace could interact seamlessly within a single application. Drawing inspiration from established marketplaces but aiming to simplify the experience, GreenCart emerged as a solution that brings together buyers and sellers in an intuitive, accessible mobile environment.

What it Does

GreenCart serves both customers and vendors through a role-based interface determined by the account type you create:

For Customers

Browse a comprehensive catalog of products with detailed views and specifications
Add products to cart and manage quantities
Complete purchases through a streamlined checkout process
Track order status from processing to delivery
Manage personal profile, saved addresses, and payment methods

For Vendors

Dashboard overview of sales, earnings, and key metrics
Comprehensive product management (add, edit, remove listings)
Process and fulfill customer orders
Track earnings and withdraw funds to external accounts
Manage business profile and store settings

The dual-interface approach ensures that each user type gets exactly the tools they need without unnecessary complexity.

How I Built It

I built GreenCart using a modern React Native stack with Expo as the foundation. The architectural decisions included:

File-based routing with Expo Router for intuitive navigation management
TypeScript for type safety and better developer experience
React Context API for state management, handling authentication and cart functionality
Formik and Yup for form handling and validation
Component-driven design with reusable UI elements

The project structure separates concerns effectively with dedicated directories for components, contexts, utilities, and screen groups. I used route groups in Expo Router to create distinct navigation experiences for authentication flows, customer interfaces, and vendor dashboards. This approach allowed for clean role-based navigation while maintaining code organization.

For styling, I implemented a consistent design system with centralized color definitions and typography using Google Fonts. The UI components were designed for flexibility and reuse across different sections of the application.

Challenges I Ran Into

Development wasn’t without its hurdles. Some notable challenges included:

Dependency inconsistency – Managing package versions and ensuring compatibility across the React Native ecosystem required careful attention and occasional compromises.
Expo Go compatibility issues – I initially installed the latest version of Expo Go from the Play Store, but it repeatedly failed to run the application. After troubleshooting, I discovered that my project used SDK 52, while the latest Expo Go supported SDK 53. Downgrading resolved the issue but highlighted the importance of version alignment.
Component reusability limitations – While I aimed for maximum reuse, certain UI elements needed specific behaviors or appearances depending on context. This forced me to create custom variations of components rather than relying on a single implementation with props, increasing the complexity of the component library.
Navigation state preservation – Maintaining user state across different sections of the app while preventing unauthorized access to role-specific screens required careful planning of the navigation architecture.

Accomplishments I’m Proud Of

Despite the challenges, GreenCart has reached several significant milestones:

Complete authentication flow with role-based access controls that elegantly direct users to appropriate interfaces based on account type
Fully functional shopping experience from browsing and product previews to cart management and checkout processes
Payment method management allowing users to add, edit, and remove saved payment options for faster checkout
Comprehensive vendor tools for product management and inventory control
Financial tracking and withdrawal system giving vendors visibility into their earnings and the ability to transfer funds

These accomplishments represent not just technical implementations but complete user journeys that deliver genuine value to both sides of the marketplace.

What I Learned

This project reinforced several important lessons:

The importance of thorough dependency planning before starting development cannot be overstated. Beginning with a solid foundation of compatible packages saves countless hours of troubleshooting later.
Designing truly reusable components requires forward thinking about all potential use cases. What works in one context may need modification in another, so building with flexibility in mind is essential.
Handling multi-role applications demands careful consideration of navigation patterns and access controls from the earliest design phases.

What’s Next for GreenCart

While GreenCart already delivers a solid experience, I have several enhancements planned:

Enhanced order tracking with real-time updates and detailed status information for each purchased item
Improved data synchronization between components, particularly making saved addresses automatically available during checkout
Backend implementation to replace mock data with real API integration, including user authentication, product databases, and order processing
Push notifications for order updates, promotions, and vendor alerts
Analytics dashboard for vendors to gain insights into sales patterns and customer behavior
Expanded payment options including digital wallets and alternative payment methods

Green Cart