Horoscope API App with react_on_rails

logo

React on Rails integrates Facebook’s React front-end framework with Rails. React v0.14.x and greater is supported, with server rendering. Redux and React-Router are supported as well, also with server rendering, using either execJS or a Node.js server.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

latest node version
gem install rails
gem install foreman
npm install axios

Getting the application running

rails new test-react-on-rails
cd test-react-on-rails
bundle
rails generate react_on_rails:install
bundle && yarn
foreman start -f Procfile.dev

Visit http://localhost:3000/hello_world and see your React On Rails app running!

Sample of Component creation

A small code snippet of creating the Task component

Making the API request with axios

//getScope(e) {
    e.preventDefault();
    const sunsign = this.state.hscope.toLowerCase();
    axios({
      url: `http://sandipbgt.com/theastrologer/api/horoscope/${sunsign}/today`,
      responseType: 'json'
    }).then((response) => {
        if (!response.data) {
          return;
        }
        this.setState({ horoscope: response.data.horoscope });
    });
  }

GET: http://sandipbgt.com/theastrologer/api/horoscope/{sunsign}/today

Description: Returns today’s horoscope

Example: http://sandipbgt.com/theastrologer/api/horoscope/aquarius/today

Response:

{
    "date": "2015-10-20",
    "sunsign": "Aquarius"
    "horoscope": "You're a thinker by nature, but focus today on staying grounded in your body. Go for a long walk or do some yoga on your living room floor. Eat foods that are densely nutritious. Then focus on your future. It's time to take some solid steps toward a more secure life, whether that means adjusting your budget, looking for a new, better job, enrolling in classes or anything else that will improve your standing.",
    "meta": {
        "intensity": "55%",
        "keywords": "factual, permanence",
        "mood": "cultured"
    },
}

CSS styling

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Below shows the CSS for text layout.

h3, h1{
  text-shadow: 2px 2px #900;
  text-align: center;
  margin: 40px;
  color: black;
  font-size: 40pt;
  font-family: 'Eczar', serif;
}

Horoscope API

Deployment

Built With

Authors

Acknowledgments