A Data Visualization Tool for Shoppers
- Product Owner: Christina Holland
- Scrum Master: Michael Cheng
- Development Team Members: Jeff Peoples, Vinaya Gopisetti
This app is built with React.js on the front-end and Node.js/Express on the back-end. There are several major parts of this app:
-
Front-end: React.js - React allows each part of the UI to be broken into modular components. These components can be inserted into other components easily to maintain an organized separation of concerns. The various components for the React front-end are found in the
client
folder. -
Back-end: Node.js/Express Framework - The Express framework provides middleware to make working with Node much simpler.
-
Database: MySql (Bookshelf ORM) - MySql, a relational database, is used to store user and review data. The schema and models for our MySql database can be found in
server/db
. -
APIs: The two primary APIs used in this app are the Walmart and Best Buy APIs. The Amazon API is also incorporated into this app, but unfortunately, Amazon does not return reviews directly, so we cannot utilize its review data for our D3 visualization.
-
D3 - D3 is used to visualize the data retrieved from API requests.
-
Browserify - Browserify is used to allow the
require
statement to be used on browser code. It recursively analyzes all therequire
calls in the app and builds a bundle that is served up to the browser in a single<script>
tag. It is standard practice to use something like Browserify (or Webpack) with React.js. -
Grunt - Grunt is used to run the server (
nodemon
) andbrowserify
at the same time, so that whenever a React file is changed, browserify will automatically compile it. Therefore, usegrunt serve
for development.
- Node 0.10.x
- MySql
From within the root directory:
sudo npm install -g bower
npm install
bower install
To set up the MySql database:
mysql.server start
mysql -u root < server/db/schema.sql
schema.sql
will build the necessary database for the app.
To start the app, simply use
grunt serve
from the root directory.
View the project roadmap here
See CONTRIBUTING.md for contribution guidelines.