Full-Stack / React Native Developer
4 Weeks
Overview
PawMart is a cross-platform mobile marketplace for discovering and purchasing pet products, built with React Native and Expo. The application provides a complete shopping journey spanning onboarding, authentication, product discovery, product details, cart management, checkout, and order tracking.
The application is structured around a modular React Native architecture, separating navigation, reusable UI components, application state, screens, and API communication. The backend exposes RESTful APIs for users, products, carts, and orders, with MongoDB providing persistent application data.
The project focuses on creating a consistent shopping experience across mobile platforms while keeping the application architecture flexible enough to support additional product categories and marketplace functionality.
Key Features
- Multi-step user onboarding
- User registration and authentication
- Product discovery and category browsing
- Product search and filtering
- Detailed product pages
- Add to cart and quantity management
- Persistent shopping cart
- Checkout workflow
- Order placement and order history
- Profile and account management
- Five-section bottom-tab navigation
- Responsive React Native UI
- REST API integration with Axios
Challenges & Solutions
Managing a Multi-Screen Shopping Flow
The application contains several interconnected flows, including authentication, product browsing, cart management, and checkout. Navigation was separated into logical stacks and tab-based sections, allowing authentication screens and the main application experience to remain independent while preserving navigation state throughout the shopping journey.
Synchronizing Cart State
Keeping cart quantities and totals synchronized across product, cart, and checkout screens was an important state-management challenge. Cart-related state is centralized so that changes made from one screen are immediately reflected throughout the shopping flow rather than maintaining separate copies of cart data.
Designing a Consistent Mobile Architecture
As the number of screens increased, keeping UI logic maintainable became increasingly important. Reusable components were extracted for common elements such as product cards, buttons, inputs, headers, and navigation elements. Screen-specific logic remains inside individual screens while shared functionality is organized into dedicated context and utility modules.
API & Loading States
The application communicates with backend services for product and user-related operations. Axios is used as the API communication layer, with loading, success, and error states handled at the screen/component level to provide feedback during asynchronous operations.