Dated: 15/01/2023
Link to problem statement

Was watching this video, sipping on coffee and running some experiments in the background, when my brain said:
"I haven't done a technical interview in SO LONG! Have I fallen out of touch?"

Usually these thoughts come and go, but after a look at the problem it looked interesting because FINALLY I wasn't going to be inverting another binary tree.
Why not take a crack at it, afterall what does an engineer have to do on a sunday afternoon?

    The goal of this challenge is to:
  • Have fun
  • Understand where I stand in the Junior/Mid/Senior engineer categories

Reading the challenge, it has 3 parts and the first two look super easy (and I think I've written similar components a lot of times). A bit unsure how to do part 3 but I'll figure it out when I'm there.

Part one: Creating the row component

Image of pokemon - Bulbasaur

The image link provided in the problem description wasn't working, so I pulled another image that worked from the same website. Here's the code for the above:

//Using typeof bulbasaur because at this point in the challenge //I haven&apos;t been told the exact type, maybe there could be additions, //so not using an interface or a type declaration const PokemonRow: React.FC<typeof bulbasaur> = ({ id, name, types, sprite }) => { return ( <div className="flex flex-row p-4 bg justify-between bg-emerald-600 items-center font-bold"> <div> {id} </div> <div> {name.slice(0, 1).toUpperCase() + name.slice(1, name.length)} </div> <div> { => ( <div key={type}> {type.slice(0, 1).toUpperCase() + type.slice(1, type.length) + ((types.indexOf(type) !== types.length-1) ? ',' : '')}&nbsp; </div> ))} </div> <div className="w-12 h-auto"> <img src={sprite} alt={`Image of pokemon - ${name}`} /> </div> </div> ) }

Part two: Creating the table

Image of pokemon - Bulbasaur
Image of pokemon - Charmander
Image of pokemon - Venusaur

Since we know FOR SURE what the types are, we can add an interface here and use it for the array provided in part 2.

interface PokedexCharacter { id: number, name: string, types: Array<string>, sprite: string, } const pokemonArray: Array<PokedexCharacter> = [ { id: 1, name: "Bulbasaur", types: ["grass"], sprite: "" }, { id: 2, name: "Charmander", types: ["fire"], sprite: "" }, { id: 3, name: "Pidgeot", types: ["normal", "flying"], sprite: "" }, ]

Part three: Creating a Selectable Component

The CSS above is not that good :P

const PokemonTypeSelection: React.FC<PokemonTypeSelectionProps> = (props) => { const handleChange = (e: ChangeEvent<HTMLSelectElement>) => { props.selectType(; } return ( <select className={`rounded-xl ${isDarkMode ? 'bg-gray-800' : 'bg-gray-300'} outline-none focus:outline-none w-32 p-2`} value={props.selectedType} onChange={handleChange} > { => ( <option key={type} value={type}> {type} </option> ))} </select> ) } const FilterablePokedexTable: React.FC<{ characters: Array<PokedexCharacter> }> = ({ characters }) => { const [currentType, setCurrentType] = useState<string>(); const pokemonOfType = (pokemonType: string): Array<PokedexCharacter> => { return characters.filter(char => char.types.includes(pokemonType)); } return ( <> <PokemonTypeSelection selectedType={currentType} selectType={setCurrentType} /> {currentType && <PokedexTable characters={pokemonOfType(currentType)} />} </> ) }


I thought part 3 would be more difficult but it turned out easy, hurray! :D

Doing this was fun, learned alternate ways to manage state when dealing with individual components. Good practice to write code this way IF you have a bit of time and good statefulness is important (for eg. this blogpost has HORRIBLE state vars - but works since the point is to publish it quickly)

Thanks for reading till here. I realize this was way more technical than first intended, and way more of checkpoint tracking than a blog, but it's a good starting point.