My first React App

Project2v1 from Pamela Gilmour on Vimeo.

https://virtualcharms-horoscope.herokuapp.com/

What is it?

I am venturing into tech from holistic health and part of my job is to be knowledgeable of any healing modality that I come across. Astrology is a vast and deep field with a rich history. People for millennia have accessed astrology as well as countless other divination methods to improve their lives, enhance their luck and find love. Most of the astrologers I personally follow, their work is influenced by psychology at some level (usually either professional or academically). Today, astrology is becoming more and more prominent in pop-culture, no longer confined to one page at the back of a newspaper or magazine. I am seeing more and more horoscope apps and I love them all. It’s exciting for me to see these traditionally and inherently esoteric institutions merging with technology AND this is the very crux of my own creative work.

So as I was preparing for my second project, creating a React app that accesses an API, I went searching for an API that resonated with me. I found this delightful horoscope API (http://ohmanda.com/api/horoscope/) in a google search, and got to coding my app.

My Process:

This was my second project so I incorporated my time-management lessons from my last project and first, actually looked at what my deadline was before I got emotionally invested. I created my own deadlines accordingly and wrote up a simple MVP that I thought would be achievable in the timeframe given.

Features:

My app is a simple horoscope app: It has a welcome greeting, a header so you know what you are looking at and a list of the zodiac signs in a colorful card-like layout, with an image and range of birthdates for each sign accordingly. So, in order to read your horoscope, you just click on the card of your Sun sign and VOILA! You get a horoscope message from the horoscope API! How cute!

Lessons Learned:

I was able to incorporate some basic CSS grid, with which I tried out several different layouts. I decided with a list format because it was the least awkward experience.

With my first pass of code, I made a component for each zodiac sign, but decided that was not the best use of React and so went back and refactored my code to be simpler and more dynamic. CLEAN & DRY!

Stretch Goals:
Now that I have the beginnings of a hip, bright, and colorful horoscope app, on a free weekend in the future, I will be replacing the images with those that I will have illustrated myself (https://virtualcharms.github.io/fortune-click/), optimizing load speed, thinking up more features to make the page more interactive and informative and maybe even playing with the layout more.