Fortune Cookie

React App

screenshots of website displayed on multiple devices

The Project

Toolkit

  • HTML5 /
  • CSS3 /
  • SASS /
  • Gulp /
  • REST API /
  • AXIOS /
  • React

The Process

For my first React App I wanted to keep the scope simple. I decided to create a clean app that would display a new 'fortune' with every click. I started with a simple idea and a rough wire-frame to give me an idea of what the layout would look like. Because I was working by myself I did not need to go through as many formal steps during the initial phase of brainstorming, however by creating lists and mapping out what I needed, I felt much more organized and was able to prioritize tasks more efficiently.

The Design

Colours

Fonts

Heading Font: Raleway (Bold 700)

Body Font: Raleway (Regular 400)

The Development

I was presently surprised how much I loved working with React. The components made my code really easy to follow. The most difficult aspect was gaining familiarity with ternary operators.

The Result

Overall I was able to accomplish my goal of creating a minimal and colorful react app. It was an amazing way for me to learn more about React and gain familiarity with the various tools needed. In the future, I would like to add an animation of the fortune cookie breaking to display the fortune. I would also like to add a backface-visibility to display the lotto numbers and a lesson, similarly to an authentic fortune.