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

1. App launches and shows the Fake Store splash screen.
2. User signs up or signs in.
3. User browses product categories.
4. User opens a product detail screen.
5. User adds items to cart.
6. User checks out the cart.
7. The cart is cleared and a new order is created.
8. User opens My Orders.
9. User pays a new order.
10. User receives a paid order.
11. User signs out.
12. 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