Trainer Supply Co.

Project Description

This project started as a deliberate attempt to work with React and TypeScript in a real, full-featured application rather than a tutorial, something with enough surface area to force meaningful decisions about component architecture, state management, and data flow. I wanted to simulate an E-commerce storefront as if users were trainers in the Pokémon world. It's a full-stack Pokémon-themed storefront and Pokédex built on PokeAPI, with Firebase handling authentication, real-time data, and order persistence.

The app has three main areas. The Pokédex lets users browse all 151 Generation 1 Pokémon with search, multi-type filtering via a custom accessible combobox, and a detail view with stats radar chart, evolution chain, and Pokémon cry playback. The shop pulls item data from PokeAPI by category, renders product cards with sorting and filtering, and supports a full cart and checkout flow. I have future plans to add an expedition hub to tie the two together, showing the user's inventory, trainer profile, and bag contents pulled from Firebase in real time.

Authentication and user data

Firebase Auth handles both Google sign-in and email/password. I've set it up so that when a new user authenticates for the first time, the app automatically generates a fake Pokémon-world trainer address for them and writes it to their Firebase profile. The checkout form reads this profile on mount and pre-populates the address fields.

Cart and checkout architecture

The cart is managed through a React context with a reducer, persisted to localStorage so it survives page refreshes. A dedicated cart page handles the empty state with upsell suggestions, and the CartDrawer acts as a lightweight summary that links through to it. The checkout page redirects to the cart if the user's cart is empty.

TypeScript and component typing

The project is fully typed in TypeScript. Shared types for PokeAPI responses, cart entries, orders, and Pokémon list items live in a central types.ts file and are imported across components. Every component that accepts props has an explicit interface.