React Tarot Card app update

For the past few weeks, I have detailed my planning and early development of a React Tarot Card app.

Using React Router, I created and linked several pages. The All Cards page, shockingly, displays all of the cards in the deck. It is assembled through a collection of SingleCard components. The All Cards page is meant to focus on broader learning, so it contains a dynamic search bar for finding specific cards. When a user clicks on each card, a modal component displays the card’s details, such as its number, suit, and a variety of possible interpretations.

For the Readings page, I implemented the Fisher-Yates algorithm to shuffle and return random collections of cards. Last week, I had the page configured simply so that, on their respective button clicks, either one or three cards were randomly shuffled and rendered. These random assortments are meant to more closely imitate the actual experience of a tarot card reading, from which a message or “fortune” might be gleaned.

Users can still investigate each card on click, as the shuffling components are rendered using the same SingleCard and InfoModal components.

I did not add a ton of features this week because I was focused primarily on setting up Redux.

To unify state management, I refactored the shuffling components, dispatching those actions through the Redux store, thereby making the shuffles globally accessible. I also added a save feature, so a user can revisit their selected readings.

The Readings page is now designed so a user can click to shuffle and render three cards, a reading, and they can choose to save that reading with a click.

I decided to remove the single card shuffle for now. For future iterations, I tentatively set up a single card reading page that a user might route to on a button click. I do not feel that keeping two different shuffles on the same page is a good design, though.

My biggest annoyances this week revolved around retrieving and rendering my shuffles and saved data from the Redux store.

Because the cards are large JSON objects saved in initial state as empty arrays, getting to the deeply nested data, particularly the saved data, proved tricky and involved mapping many layers down. I am investigating better ways to flatten the objects for more elegant data retrieval. For now, though, the maps on maps on maps have allowed me to again reuse my SingleCard and InfoModal components for rendering.

My last major task accomplished on the app this week was beginning to configure Google Firebase and Firestore. I previously added these features for authentication and storage to a mock ecommerce site I built, but it’s no small chore to get up and running.

Luckily, there’s a wealth of documentation regarding the setup of all things Google. Next week, I will continue to link Firebase to my app, allowing me to create and save users, who will be able to sign up via email and password or through their Google accounts. Users will be able to actually save their “saved” readings through Firestore’s cloud database storage. On top of that, I intend to add a feature for users to add notes to their saved readings.