MetalsSim — Live Metals Price Tracker

A production-quality React Native CLI mobile app that displays live (mock) prices for Gold, Silver, Platinum, and Palladium. Built as a fintech-grade feature prototype with professional dark UI and real-world error handling.

---

📱 App Overview

Key Features

• Mock API with simulated 1–2 second network delay
• 10–15% random error rate to test error handling UI
• Skeleton shimmer loaders (not spinners)
• Pull-to-refresh on the home screen
• Dark blue/teal background with gold accent design language
• Fully typed with TypeScript

---

🛠 Tech Stack

No heavy state libraries (Redux, MobX) are used. State is managed via React's built-in useState and useEffect.

---

📂 Folder Structure

src/
  App.tsx                  # App entry (NavigationContainer)
  components/
    index.ts               # Barrel exports
    MetalCard.tsx           # Metal price card with gold accent
    PriceLoader.tsx         # Animated skeleton/shimmer loader
    ErrorView.tsx           # Error display with retry button
  screens/
    index.ts               # Barrel exports
    HomeScreen.tsx          # Dashboard with 4 metal cards
    DetailScreen.tsx        # Detailed metal price view
  navigation/
    index.ts               # Barrel exports
    AppNavigator.tsx        # Stack navigator with typed params
  services/
    index.ts               # Barrel exports
    metalsApi.ts            # Mock API with simulated delay & errors
  constants/
    index.ts               # Barrel exports
    theme.ts                # Design tokens (colors, spacing, etc.)

---

🚀 Setup & Run Instructions

Prerequisites

• Node.js ≥ 18
• React Native CLI environment set up (guide)
• Android Studio (for Android) or Xcode (for iOS)

Install

npm install

Run on Android

npx react-native run-android

Run on iOS

cd ios && pod install && cd ..
npx react-native run-ios

---

💡 Approach Summary

1. Architecture — Clean separation of concerns: constants → services → components → screens → navigation. No over-engineering, no unnecessary abstraction layers.

2. Mock API — metalsApi.ts generates realistic price data with small random variance around base prices. Network delay (1–2s) and random errors (10–15%) simulate production conditions.

3. UI Design — Dark fintech theme (#0A1628 background, #D4A843 gold accent) with consistent spacing, rounded cards, and high-contrast typography. Cards use a gold left-border accent for visual hierarchy.

4. Loading States — Custom PriceLoader component uses React Native's Animated API for smooth shimmer/skeleton placeholders instead of generic spinners.

5. Error Handling — Dedicated ErrorView component with retry capability. Errors are handled gracefully at both screen level, showing contextual messages.

6. Navigation — Type-safe stack navigator using RootStackParamList. Detail screen receives metal name as route param and fetches fresh data.

---

🧗 Challenges Faced

• Skeleton loaders without third-party libs — Built a custom shimmer animation using the Animated API with opacity looping, keeping the dependency footprint minimal.
• Realistic mock data — Designed the API service to generate varying but realistic prices around known base values, making the demo feel authentic.
• Error state testing — The random error injection (10–15%) required careful UX design to ensure the retry flow is smooth and non-disruptive.

---

🔮 Future Improvements

• Real API integration — Connect to a live metals pricing API (e.g., Metals-API or GoldAPI).
• Price change indicators — Show up/down arrows and percentage change vs. previous close.
• Price history charts — Add sparkline or full chart using react-native-svg.
• Push notifications — Alert users when prices cross configurable thresholds.
• Caching layer — Cache last-known prices for offline viewing.
• Accessibility — Improve screen reader support and dynamic font sizing.

---

⚠️ Non-Goals (Out of Scope)

These features are explicitly not part of this assignment:

• Payment / Buy flow
• GST calculation
• Coupons / Discounts
• SIP logic
• Authentication
• Backend server

---

📄 License

This project is for internship evaluation purposes.