Enter the Enneagram

I just finished Phase 2 of Flatiron School’s software engineering program. In this phase, we learned React with a chapter on client-side routing and a lesson on hooks (which was awesome). After wracking my brain for a week or so trying to come up with an app to showcase my React skills, I dreamt that I made a personality quiz following the Enneagram personality type indicator. Though I certainly wouldn’t want to recreate everything I do in my dreams (flying, hunting zombies, etc.) I decided to make an exception.

At my last job, one of my responsibilities was management and curation of over 150 workshops a year at a well-known retreat center in the Pacific Northwest. The Enneagram was a workshop we offered. One day I got around to taking the test and realized that some of the things that I always beat myself up for are, according to the Enneagram, just natural parts of my personality. That alone freed me from some guilt I had been harboring as a leader and professional. As I looked further into the Enneagram, I found it to be the most revealing personality classification model I’d encountered. At that time, there were no free quizzes online. While there are now several, there are none that follow the Enneagram Institute’s shortened test (72 questions instead of the 144 question Riso-Hudson Enneagram Type Indicator (RHETI), which costs $12 to take). Enter my Enneagram app.

This app introduces the Enneagram on the home page and offers instructions on the second page. The third page is a container component that holds state for the quiz (which is hosted on a local server), a counter for rendering the questions by pairs, the results of the quiz and a toggle variable for ending the quiz when all questions have been answered. The container page also pushes the raw results data up to the app component which then passes them down to the results page.

The results page then calculates a score from the props passed down from the app component, saves them to state and renders them in bar chart form. It provides a text description of each personality type with links to longer descriptions on the Enneagram Institute’s website. It also allows users to save their results to the local server.

Challenges:

While I really enjoyed the process of building a React app from scratch, I encountered a few unexpected challenges:

1. First, I spent a lot of time trying to work out an error that occurred when I would process the raw results into useable data. In converting the data, I created an object from an array. In order to kill the process, I used a ternary statement based on data mapped from the original array. To finally get it working, I used the Array.from() method to convert initial results data back into an array after the new object had been put into state.
2. It also took a fair bit of time to realize that because the container component and results component were siblings, I needed to pass the initial data up to a parent component. Making the transition was simple once I realized the problem.
3. I used the Chartjs-2 library to render the data in a bar chart form. The ease of use for Chartjs-2, created by MIT, was mitigated by the fact that I could not find documentation on how to customize the chart. I found plenty of data on it’s predecessor, Chartjs, but none of that code worked on Chartjs-2. Eventually, I modified the data around it to fit the default format.
4. Finally, I wanted to use bootstrap for styling but didn’t have time to learn it well enough to replace the .css, which I used to arrive at the MVP (minimum viable product). That said, I enjoyed having another crack at .css and learned quite a bit. I also enjoyed working out a horizontally aligned navbar and coding a component that automatically scrolls the window to the top after a page transition.

I enjoyed creating this app and realized that a really challenging theme for me is working with data inside nested objects efficiently. That will come with time.

Once the app is posted online, I’ll share the link here. I hope that you’ll take the test and start a journey of self-discovery using my app!