My Web Project- MoodReactor

Screen Shot 2015-01-02 at 9.58.49 AM

Screenshot of MoodReactor @



May I introduce my web app project- Mood Reactor
The name, “Mood Reactor,” was inspired by Hack Reactor, and its mission is simple: to make you feel better/great based on your current mood.
Mood Reactor is based on HTML, CSS, Javascript, jQuery, and Twitter Bootstrap.

Bootstrap allowed me to create Mood Reactor‘s layout within reasonable time and immediate CSS support. The page will first greet you with your name (or default name). You can choose from these 6 mood categories: happy, sad, stressed, angry, bored, and need inspiration.
The Happy, Bored, and Need Inspiration buttons trigger similar events: a media source (mp3, youtube, Super Mario/Angry Bird game) will show up. Personally, I love the inspirational youtube video. You must check it out!
The Sad button utilizes InfiniGAG API to get data from 9GAG’s current hot category and shows the top 10 hottest photos for you.
The Angry button connects to a meditation website. The iframe allows you to browse the website in the frame. (Too bad there are some mini errors from the website if you check with console)
I wanted something different for the Stressed button. Once clicked, it will pop up a new window and ask for your location. Your location info will then be used to search through Yelp API to show good restaurants nearby. There is a small trick that makes each address clickable to Google Map. The Yelp API part is not ideal because it reveals the API key on the client side. I studied some Node.js, but there were some issues in oauth authentication. My Ruby understanding is very basic, otherwise I would have attempted to do this part using Ruby.
Some ideas for future features in Mood Reactor:
1. Allow user login (email registration or support Twitter, FB, G+ account login).
2. Record user’s daily mood.
3. Show user’s mood with graphs.
Do you have any suggestions? Please let me know!


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.