Transformers Tracker: A Mobile App for Collectors

Overview
Transformers Tracker is a cross-platform mobile app designed for collectors of Transformers action figures to manage and organize their collections. Built with React Native, this app helps users keep track of which figures they own, which ones they’re looking for, and new releases they might want to add.

Whether you’re a casual fan or a serious collector, Transformers Tracker brings order and accessibility to your collection.

Core Features

• Collection Management:
  Users can browse figures, mark which ones they own, and view their personalized collection at any time.

• Search & Filter Tools:
  The search tab allows users to find figures by name, series, or release wave, making it easy to locate a specific figure or explore what’s missing from their collection.

• Dynamic Details View:
  Each figure has its own details page with images, release info, and optional database links for extended data (e.g., series, wave, year, and accessories).

• Ad Integration (Monetization):
  The app uses react-native-google-mobile-ads to display ads in a lightweight, unobtrusive way that helps support ongoing development.

• Customizable Display Options:
  Users can configure how many columns appear in their home and list views, giving them control over layout density.
  On Android, this is handled with radio buttons; on iOS, users get a native picker interface for smoother experience.

• Theming and Accessibility:
  The app supports dark mode and system-based theming, creating a comfortable viewing experience across devices and lighting conditions.

Technology Stack

• Frontend Framework: React Native (with Expo)

• Backend & Database: Firebase Firestore

• Design & Styling: CSS-in-JS via React Native Stylesheets

• Ad Integration: Google AdMob (via react-native-google-mobile-ads)

• Build Tools: Xcode (iOS), Gradle (Android), Expo CLI

• APIs & Cloud: Firebase SDK for real-time database and storage operations

Development Process

The app was designed with a clean, modular structure, separating UI, data fetching, and business logic.
The Firestore interactions are isolated in a dedicated firestore.js module, keeping the main components focused purely on rendering and user interaction.

The project followed a mobile-first and iterative design approach, starting with Android builds before adapting the interface for iOS. As a cross-platform project, special attention was given to handling platform-specific differences, such as menu behavior and native component rendering.

Challenges & Lessons Learned

• Ad Integration: iOS required extra setup with AdMob, including App Store configuration and testing with approved ad unit IDs.

• Theming Consistency: Managing dark and light themes across Android and iOS highlighted the importance of using system appearance APIs and keeping a consistent design language.

• App Signing: Configuring Android signing keys and iOS certificates helped solidify knowledge of release pipelines for both platforms.

These challenges were valuable learning experiences in full mobile app lifecycle management.

Usefulness & Impact

For collectors, keeping track of hundreds of action figures can be challenging. Transformers Tracker solves that by centralizing collection data into one, easy-to-use mobile app.
It’s useful for:

• Organizing personal collections

• Preventing duplicate purchases

• Discovering missing or rare figures

• Tracking new releases

Beyond its practical use, this app demonstrates solid understanding of cross-platform development, database integration, and user-centered design.

Future Plans

• Enable cloud sync via user authentication

• Add barcode scanning for quick figure identification

• Include wishlist tracking and release notifications

• Expand to cover other collectible lines

Conclusion

Transformers Tracker blends React Native performance, Firebase scalability, and modern mobile UX principles to create a powerful tool for collectors. It’s both a functional product and a strong showcase of end-to-end mobile development.