UrbanCart — Fashion & Electronics Store App

Overview

UrbanCart is a mobile shopping app that we designed and built as a product. It brings two very different categories, fashion and electronics, into one catalogue, so a shopper can browse clothing and gadgets in the same place and pay through a single checkout. It is aimed at general consumers who shop from their phones.

The Challenge

Mixing fashion and electronics in one app is harder than it sounds. Fashion is visual and driven by browsing, while electronics is driven by specifications and comparison, and a layout that suits one tends to fail the other. The app also needed to be quick to move around, because mobile shoppers switch between categories constantly, and it needed to help people decide by showing social proof and a way to save items at the point where they look at a product.

Who Uses It and How

A shopper looking for a jacket scrolls images and saves a few to a wishlist to think about. Another shopper needs headphones, checks ratings, compares two products and buys one. On the business side, a merchandiser adds products and prices, an operations person tracks orders and fulfilment, and support staff handle returns and payment queries.

Our Approach

We chose a single, consistent product card that carries what a shopper needs to decide at a glance. Wishlist and star ratings sit directly on the card, so a shopper can save an item or judge its reception without opening the product page. For navigation we selected bottom tabs: on a phone the thumb reaches the bottom of the screen most easily, and tabs make switching categories a single tap. We built with React Native so both iOS and Android could share one codebase, with a Node.js backend and Stripe for payments, so checkout uses an established provider instead of homemade card handling.

What We Built

The catalogue integrates both categories under the same structure, letting the shopper move between fashion and electronics quickly. Product cards show wishlist and rating information, and the bottom tab bar keeps the main sections within reach.

Architecture and Data

A Node.js service supplies catalogue data, wishlist state and order handling to the app through an API. Products have common fields, such as name, images, price and rating, plus category-specific attributes such as size and colour for clothing or technical specifications for electronics, so the app can render each appropriately from one model. Payment follows the usual Stripe pattern: the server creates a payment for the order amount, the app collects card details through Stripe's own components and Stripe returns the outcome, so raw card numbers never pass through the app's backend. The server confirms the result before marking an order paid.

Security, Privacy and Quality

Because Stripe collects the card details, the business avoids most of the burden of handling card data, though it should still follow PCI guidance and keep API secret keys only on the server. Customer accounts hold names, addresses and order history, so the API needs authentication, input validation and encrypted transport. Payment failures need a clear message and a safe retry that does not double charge. We tested navigation on small and large phones, checkout with declined cards and interrupted connections, and image loading on slow networks.

Technology

React Native gave us native-feeling screens and shared code across platforms, which suits a retail app that has to reach every kind of phone. Node.js provides the API layer in the same language, and Stripe covers payments securely.

Outcome

UrbanCart delivers a single storefront for two categories, with the browsing helpers shoppers expect built into every product card. The navigation keeps categories close at hand, the payment integration provides a trusted checkout, and further product categories can be added without redesigning the app.

Frequently asked questions

How much does it cost to build an e-commerce mobile app?

Cost drivers include the number of screens and product types, user accounts, payment and shipping integration, admin tools for products and orders, and whether you build for both platforms. Payment security and testing add effort. A discovery conversation lets us give a firm estimate.

Is Stripe safe to use in a shopping app?

Stripe is a widely used payment provider that handles card data on its own systems, so your app and server never store full card numbers when integrated correctly. You still must protect API keys and confirm payments on the server.

Should I build a shopping app with React Native or native code?

React Native suits most shopping apps because it shares code across iOS and Android and performs well for catalogues. Native code may make sense for very demanding graphics or platform-specific features.