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!
- Product Owner: Dylan Kuang
- Scrum Master: Muhammad Naqvi
- Development Team Members: Bo Sanders, Chris Lardizabal
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.
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).
User data and saved places are managed in a MySQL database called scenic
.
![Schema design]
(http://i.imgur.com/lag3WRs.png)
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.
- Node 0.10.x
- MySQL 5.7.11
- Google Places API key
- Google Plus API key
From within the root directory:
npm install -g nodemon webpack
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.
- Set up your droplet with raw Ubuntu
apt
is the package manager on Ubuntu (it's likebrew
, 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
, checkserver/db/db.js
for correct credentials - Ensure that the credentials in
db.js
match those exported inserver/config
files
-
Merge the production branch of the repo with the master branch
-
Log in to the Digital Ocean droplet using:
ssh [email protected]
(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 theconfig
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
See CONTRIBUTING.md for contribution guidelines.