ScenicNinja

ScenicNinja uses your current location to find great views nearby. It utilizes the Google Places API to find parks and restaurants within 10km of your location that have reviews matching keywords like "panoramic" and "beautiful view". Anyone can use the service, but you'll need to sign-in with a Google account to save your favorite locations. Enjoy!

Screenshot

Team

Product Owner: Joel Aguero
Scrum Master: Andrew Ho
Development Team Members: Reina Mei, Laura Curley

Overview
Usage
Requirements
Development
1. Installing Dependencies
Team
Contributing

Overview

Tech Stack

Webpack

Webpack bundles dependencies into one file, so that all dependencies can be loaded into the DOM with a single <script> tag. Webpack starts with an entry file (App.js) and traverses the project’s dependencies based on the import and export statements in the code. It uses a webpack.config.js file in the root directory to define which loaders are required for compilation and the destination of the output file.

React and Redux

On the client side, the state of the app is maintained in a Redux store. When a user interacts with the app (e.g. when the ♥ is clicked, for example), an action is triggered, which tells the reducers how the state should update in response (e.g. add the place to the list of saved places). For more information, review the Redux documentation and watch Getting Started with Redux. On the server side, we render the index page by initializing the Redux store (which determines the initial state of the app, including logged-in user data).

Schema

User data and saved places are managed in a MySQL database called scenic. ![Schema design] (http://i.imgur.com/lag3WRs.png)

Usage

You'll need API keys for Google Places and for Google Plus. Add these to the config files in /server/config, following the format of the example files. Remove .example from the filename. Ensure all dependencies are installed. Start a MySQL server by running mysql.server start. Then, from within the root directory:

npm install
webpack
npm start

Visit localhost:4568 in the browser.

Requirements

Node 0.10.x
MySQL 5.7.11
Google Places API key
Google Plus API key

Development

Installing Dependencies

From within the root directory:

npm install -g nodemon webpack

Running Locally

To compile client-side code, run:

webpack --watch

webpack --watch will recompile a bundle.js file when any client-side JS files have changed, streamlining the development workflow.

In a separate shell, start the server by running:

npm install
npm run dev

Visit localhost:4568 in the browser.

Deployment

Initial Setup on Digital Ocean

Set up your droplet with raw Ubuntu
apt is the package manager on Ubuntu (it's like brew, but for Ubuntu)
Do an apt update: sudo apt-get update
Install MySql: sudo apt-get install mysql-server
Enter a secure password when prompted and note it down as it will be added to server/config/mysqlsetup.js later
Follow the below instructions for deploying new changes manually
If you get ERRCONN, check server/db/db.js for correct credentials
Ensure that the credentials in db.js match those exported in server/config files

Deploying New Changes

Merge the production branch of the repo with the master branch
Log in to the Digital Ocean droplet using: ssh root@xxx.xxx.xxx.x (get your droplet IP Address from Digital Ocean)
If the ssh fails three times, you'll be prompted for the password
Enter UNIX Password for your Digital Ocean droplet (if you need to reset it, go to the Access menu)
Clone down your production repo, or cd into the root directory and run the following commands:

git pull origin master
npm install
webpack
cd server
ls to see if the config directory exists, if not, create it as below
mkdir config
cd config
See if the below files are already on the server (ls). If not, add them using the following commands:

touch googleplus.js
touch googleplaces.js
touch mysqlsetup.js

Update the file googleplus.js to contain the following:

module.exports = {  
  CLIENT_ID: 'enter-your-googleplus-api-key-here',  
  CLIENT_SECRET: 'enter-your-googleplus-api-key-here'  
};

Update the file googleplaces.js to contain the following:

module.exports = 'your-googleplaces-api-key-goes-here';

Update the file mysqlsetup.js to contain the following:

module.exports = 'your-serverside-mysql-password-goes-here';

==============================

npm start
Go to xxx.xxx.xx.x:4568 to see your site live

Contributing

See CONTRIBUTING.md for contribution guidelines.

thomasingalls/holisticparallelogram