Horoscope Web App

This application returns a person's horoscope based on their sign and consists of two components. The first is a REST API made with Python, Flask-Restx, and the Beautiful Soup library that scrapes the www.horoscope.com website for horoscope data and returns it in JSON format. The second component is a front-end made using HTML/CSS and JavaScript & React that calls the REST API and outputs the horoscope to the user asynchronously.

Click here to demo API GitHub App Github
horoscope image
Stock App Image

Features and highlights

  • Back-end scrapes data from www.horoscope.com and returns the horoscope data
  • Front-end displays horoscope based on zodiac sign/animal and chosen timeframe and uses the React library
  • Horoscope data is viewable by user without the need for a database
  • Front-end is hosted on Azure App Service, while the back-end API is hosted on Digital Ocean
  • The application supports both a desktop and mobile view

Goals for project

Webscraping and APIs have been two domains that I've been curious about and wanted to dive into for a project. Python's BeautifulSoup and Flask libraries made the process easy to understand for the API portion of this project. I also wanted to further develop my front-end and JavaScript skills and used this project as an opportunity to do so. To process the API endpoints, I used JavaScript and the React library to fetch from the API and update the page with the user's horoscope asynchronously using an async function and the await keyword. This is accomplished by setting the state of the horoscope state object every time the "Show Horoscope" button is pressed with the user's horoscope data.

What I learned

While working on this project I learned: how to use the Beautiful Soup library to scrape data from the horoscope website, how to use Flask-Restx to return the horoscope data in a JSON format, and how to access the data via the API endpoints using the built-in JavaScript fetch API and the React library. While working with React, I got exposure to using the useState hook for state management and how to create functional components that returned JSX code to render to the DOM tree.