/personality-quiz

Primary LanguageJavaScript

Hero's Journey Personality Quiz

We were inspired by Joseph Campbell's framework of the Hero's Journey & the 16 Personalities UI to make a personality quiz. We saw this project as an opportunity to learn and experiment with new technology and challenged ourselves to explore Next JS and CSS Tailwind.

Authors

Installation

Install with npm

  git clone https://github.com/srai98i/personality-quiz.git
  cd quiz-app

Deployed Link

Visit our deployed version here: https://personality-quiz.vercel.app/

Functionality

  • Algorithm to calculate personalised answer based on user inputs
  • Description of user's current stage on the Hero's Journey

Project Management

  • We used Trello to structure our ticket backlog, moving tickets from 'In Progress' to 'Done', adjusting the size of the tickets along the way.
  • We also used Trello to record details from our standups and retrospective.
  • Standups occurred before each session started to define what the plan for the day was, what we hoped to achieve and potential challenges we could face.
  • Each session ended with a retrospective, detailing what went well, what didn't go to plan and what we could do to improve the next session.
  • We implemented a strategy of rotating scrum masters so everyone had experience with leading the team.
  • We mob programmed to come up with solutions to difficult problems together.
  • If anyone opened a pull request, we practiced code reviews.

Challenges and How We Resolved Them

  • Learning Next JS After learning React for just two weeks, we wanted to explore different frameworks. We researched into Next JS and Gatsby but eventually decided to proceed with Next JS because we were aware of its growth in popularity in the industry and we wanted to become familiar with it. The flexibility Next JS provides in terms of rendering pages interested us and we wanted to explore that more. It was challenging learning a new framework with just basic knowledge of React but following the documentation and tutorial provided on the Next JS site helped us learn the concept of pages and pre rendering.

  • Learning CSS Tailwind (bc of lack of vanilla CSS knowledge) (converting vanilla CSS to tailwind) Since we used Next JS, we also thought it would be benefitial to use CSS Tailwind as many developers recommend using them together. The main challenges we faced were:

  1. Knowing exactly what CSS we wanted to apply
  2. Converting vanilla CSS syntax into Tailwind style props
  3. Getting used to inline styling

We overcame this challenge by relying on the CSS Tailwind docs and the table of style props provided by Tailwind. We also used this opportunity to improve our basic CSS knowledge and we now feel more confident styling pages from this experience.

  • Building forms Instead of using a UI library to build the form, we challenged ourselves to build a form from scratch. This was a challenge that required us to refer back to HTML attributes. After mob programming and knowledge exchange, we eventually built the form. We learnt that it is more complicated than we initially thought and appreciated the help and ease that a UI library provides in this case.

  • Making our own algorithm to determine value of answers user provides There were a lot of ways to calculate a final answer from the inputs provided by the user. After discussing and planning the logic, we used the .reduce() method to find the most occuring answer.

Lessons Learnt

  • We were able to become familiar with Next JS and CSS Tailwind because of this project. Learning React helped us learn this framework and use it with more confidence than we initially expected.

  • Using CSS Tailwind helped us deepen our knowledge of CSS. We found the process of thinking about the vanilla CSS solution and then translating it into CSS Tailwind syntax very helpful in understanding CSS principles better.

  • We attempted to build a form from scratch but this project has helped us understand the ease and value of using libraries such as Formik.

  • Following Agile principles to manage this project allowed us to stay on task and organised. The structure of standups and retrospectives where all members of the team were allowed to raise their viewpoints and speak honestly about the progress and direction helped us improve every session. We were always open to the idea of trying a different solution if need be. This open attitude ensured that every session was productive.

Next Steps

Upcoming features include:

  • User profiles
  • Utilising pages to provide detailed explanations of each Hero's Journey stage