Fake Store App

A React Native / Expo mobile app for browsing products, managing a shopping cart, signing in/up, checking out orders, and tracking order status.

Features

Browse product categories
View products by category
View product details
Sign up, sign in, update profile, and sign out
Protected tabs for products, cart, and orders
Add, increase, decrease, remove, and clear cart items
Cart badge showing total item quantity
Checkout cart into a new order
View orders by All, New, Paid, and Delivered
Pay and receive orders
New orders badge
Server-backed user, cart, and order data

Tech Stack

React Native
Expo
TypeScript
Redux Toolkit
RTK Query
React Navigation
React Native Paper
React Hook Form
Zod
AsyncStorage

Requirements

Node.js
npm
Expo CLI / Expo Go
Fake Store API Server running locally

Setup

Install dependencies:

npm install

Start the Fake Store API Server before running the app.

By default, the app expects the server to be available locally:

Android emulator: http://10.0.2.2:3000
iOS simulator: http://127.0.0.1:3000

If your server is running at a different address, set EXPO_PUBLIC_API_URL in your environment file.

Then start the app in development mode:

npx expo start

You can also run the app in production mode:

npx expo start --no-dev --minify

Run on Android:

npm run android

Run on iOS:

npm run ios

Environment Variables

The app uses EXPO_PUBLIC_API_URL for the API server URL.

Example:

EXPO_PUBLIC_API_URL=http://10.0.2.2:3000
EXPO_PUBLIC_API_TIMEOUT=5000

For Android emulator:

EXPO_PUBLIC_API_URL=http://10.0.2.2:3000

For iOS simulator:

EXPO_PUBLIC_API_URL=http://127.0.0.1:3000

If no API URL is provided, the app falls back automatically based on platform.

Project Structure

src/
  api/            RTK Query API setup, endpoints, schemas, adapters
  app/            App bootstrap and shared app hooks
  components/     Shared UI components
  config/         Environment and app configuration
  constants/      Theme constants, spacing, radius, colours
  errors/         App/API error handling helpers
  features/
    auth/         Sign in, sign up, profile, auth state
    cart/         Cart screen, cart actions, cart state helpers
    orders/       Orders screen, order cards, order actions
    products/     Categories, product list, product detail
  navigation/     Root tabs and nested stack navigators
  providers/      Global UI providers
  storage/        Local storage helpers
  store/          Redux store setup
  theme/          React Native Paper theme
  types/          Shared TypeScript models
  utils/          Shared utility functions

Main User Flow

App launches and shows the Fake Store splash screen.
User signs up or signs in.
User browses product categories.
User opens a product detail screen.
User adds items to cart.
User checks out the cart.
The cart is cleared and a new order is created.
User opens My Orders.
User pays a new order.
User receives a paid order.
User signs out.
Another user can sign in and see separate cart/order data.

Notes

Product, cart, order, and auth requests are handled through RTK Query.
Cart and order data are server-backed for authenticated users.
Local cart storage is intentionally disabled; the app uses the server cart only for the final submission requirements.
API responses are validated using Zod before being adapted into app models.
The app intentionally does not persist login after reload, matching the final demo requirement.
Development-only expired-token testing is hidden unless EXPO_PUBLIC_DEV_MODE=true.

Scripts

npm start        # Start Expo
npm run android  # Run on Android emulator
npm run ios      # Run on iOS simulator
npm run web      # Run on web
npm run lint     # Run ESLint
npm run lint:fix # Auto-fix lint issues
npm run format   # Format code with Prettier

FilesExpand file tree

README.md

Latest commit

History