templates/report/tools.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SWEatshop.tech</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<link rel="stylesheet" href="/static/css/styles.processed.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
</head>
<body class="gradient-bgr">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse-opacity">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/index.html"><img alt="Brand" src="/static/img/sweatshop-logo.png" style="width: 200px;"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/companies.html">Companies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/people.html">People</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/investors.html">Investors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/schools.html">Schools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/visualization.html">Visualization</a>
</li>
</ul>
</div>
</nav>
<div style="color: white; font-family: Open Sans; min-height: 85vh;">
<br/>
<div class="card text-center" style="background-color: #333; width:500px; max-width: 95%;" >
<div class="card-block">
<h4 class="card-title">Report Menu</h4>
<p class="card-text"><br/>
<a href="../report" style="color:white;">Report</a><br/>
<a href="introduction.html" style="color:white;">Introduction</a><br/>
<a href="design.html" style="color:white;">Design</a><br/>
<a href="tools.html" style="color:white;">Tools</a><br/>
<a href="hosting.html" style="color:white;">Hosting</a><br/>
</p>
</div>
</div>
<br/>
<br/>
<h1 style="color: white;"><b>Technology Stack</b></h1><br />
<div class="member-group">
<h3 style="color: white;">Front-End</h3>
<div class="member">
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">
<img class="logo--image" src="../static/img/html.png" alt="HTML Logo">
</a>
<div class="member-info">
<member-name> HTML 5 <br /><br /></member-name>
<member-body> HTML 5 is the 5th version of HTML. We use HTML with Bootstrap and ReactJS to design and organize the components on the front-end of the web application. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">
<img class="logo--image" src="../static/img/css.png" alt="CSS Logo">
</a>
<div class="member-info">
<member-name> CSS 3 <br /><br /></member-name>
<member-body> CSS 3 is the 3rd version of CSS. We use CSS with Bootstrap included to style the web application in a more visually engaging manner. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="http://getbootstrap.com/">
<img class="logo--image" src="../static/img/bootstrap.png" alt="Bootstrap Logo">
</a>
<div class="member-info">
<member-name> Bootstrap <br /><br /></member-name>
<member-body> Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML and CSS based design templates. Bootstrap was utilized to create the homepage carousel as well as display our data in a grid like manner. Bootstrap is used throughout the wesbite to add styling, design the layout, and add components.<br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="https://facebook.github.io/react/">
<img class="logo--image" src="../static/img/react-logo.png" alt="React Logo">
</a>
<div class="member-info">
<member-name> ReactJS <br /><br /></member-name>
<member-body> ReactJS is an open-source JavaScript framework for building user interfaces. We use ReactJS to render certain page elements such as the hover carousel on the home page. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="http://isotope.metafizzy.co/">
<img class="logo--image" src="../static/img/isotope.png" alt="Isotope Logo">
</a>
<div class="member-info">
<member-name> Isotope <br /><br /></member-name>
<member-body> Isotope is an open source package that we utilized in order to create the grid like interface. It sets the spacing of the elements to work as a grid. Additionally, it can add sorting and filtering functionality using jQuery. </member-body>
</div>
</div>
<h3 style="color: white;">Back-End</h3>
<div class="member">
<a href="https://aws.amazon.com/rds/">
<img class="profile--image" src="https://static.site24x7.com/images/amazon-rds.png" alt="AWS RDS Logo">
</a>
<div class="member-info">
<member-name> AWS RDS <br /><br /></member-name>
<member-body> AWS RDS hosts relational databases. We use RDS to host our PostgreSQL database and access this database using Flask-SQLAlchemy.<br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="https://www.sqlalchemy.org/">
<img class="logo--image" src="../static/img/sqla.png" alt="SQLAlchemy Logo">
</a>
<div class="member-info">
<member-name> SQL Alchemy <br /><br /></member-name>
<member-body> SQLAlchemy is an open source SQL toolkit and object-relational mapper (ORM) for the python language. We utilize SQLAlchemy in order to connected the front-end with our PostgreSQL database. SQLAlchemy is essentially used to create models, retrieve data from our database, and populate our HTML pages. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="https://www.postgresql.org/">
<img class="logo--image" src="../static/img/psql.png" alt="PostgreSQL Logo">
</a>
<div class="member-info">
<member-name> PostgreSQL <br /><br /></member-name>
<member-body> PostgreSQL is an object-relational database. We utilize PostgreSQL to create, read, and modify the database. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="https://docs.python.org/2/">
<img class="logo--image" src="../static/img/python.png" alt="Python Logo">
</a>
<div class="member-info">
<member-name> Python <br /><br /></member-name>
<member-body> Python is an interpreted, object-oriented, high-level programming language with dynamic semantics. We leverage Python for the backend of the web application by using Flask and SQLAlchemy to connect the frontend and database to our backend. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="http://flask.pocoo.org/">
<img class="logo--image" src="../static/img/flask.png" alt="Flask Logo">
</a>
<div class="member-info">
<member-name> Flask <br /><br /></member-name>
<member-body> Flask is a micro web framework written in Python. It allows us to connect our HTML templates to specific routes for our URL address. <br /><br /></member-body>
</div>
</div>
<h3 styel="color: white;">Embedded-Media Tools</h3>
<div class="member">
<a href="https://developers.google.com/maps/">
<img class="logo--image landscape" src="../static/img/googlemaps.png" alt="Google Maps Logo">
</a>
<div class="member-info">
<member-name>Google Maps API<br /><br /></member-name>
<member-body>The Google Maps API is an application programming interface that allows developers to use Google Maps services in their applications. We utilized the Google Maps API in order to embed the location of our models (companies, people, investors, and schools) in their instance pages in the form of an interactive map. </member-body>
</div>
</div>
<div class="member">
<a href="https://clearbit.com/logo">
<img class="logo--image landscape" src="../static/img/clearbit.png" alt="Clearbit Logo">
</a>
<div class="member-info">
<member-name>ClearBit API<br /><br /></member-name>
<member-body>The ClearBit API allowed us to scrape the web for our school's logos since they weren't provided in the 2013 SQL dump from Crunchbase.</member-body>
</div>
</div>
<div class="member">
<a href="http://ip-api.com/">
<img class="logo--image landscape" src="../static/img/ip-api.png" alt="IP-API Logo">
</a>
<div class="member-info">
<member-name>IP Geolocation API<br /><br /></member-name>
<member-body>IP API allows us to obtain location information from URLs. We utilize it to fill some of the fields in our database in models that do not have a location but do have a URL.</member-body>
</div>
</div>
<h3 style="color: white;">Hosting Tools</h3>
<div class="member">
<a href="https://aws.amazon.com/ec2/">
<img class="logo--image landscape" src="../static/img/awsec2.png" alt="AWS EC2 Logo">
</a>
<div class="member-info">
<member-name> AWS EC2 <br /><br /></member-name>
<member-body> Elastic Compute Cloud is a web service that provides computing capacity from Amazon's cloud. We use it create a virtual machine that contains our files for this site. Accessing our website points you to the Public IP and Public DNS of this EC2 instance. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="https://aws.amazon.com/elasticbeanstalk/">
<img class="logo--image" src="../static/img/awseb.png" alt="AWS Elastic Beanstalk Logo">
</a>
<div class="member-info">
<member-name> AWS Elastic Beanstalk <br /><br /></member-name>
<member-body> Elastic Beanstalk is used to deploy our web application developed in Python on an Apache server. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="https://www.namecheap.com/">
<img class="logo--image" src="../static/img/namecheap.png" alt="Namecheap Logo">
</a>
<div class="member-info">
<member-name> Namecheap <br /><br /></member-name>
<member-body> Vendor from which we obtained the sweatshop.tech domain. We then set the IP and DNS to point to our AWS EC2 instance. <br /><br /></member-body>
</div>
</div>
<h3 style="color: white;">Other</h3>
<div class="member">
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">
<img class="logo--image" src="../static/img/github.png" alt="Javascript Logo">
</a>
<div class="member-info">
<member-name> Github <br /><br /></member-name>
<member-body> Github is a web-based Git (version control repository) that we utilize to maintain the source code, track issues/features, and assign issues/features to each of the team members. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="https://www.slack.com/">
<img class="logo--image" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Slack_Icon.png" alt="Slack Logo">
</a>
<div class="member-info">
<member-name> Slack <br /><br /></member-name>
<member-body> Slack is one of the communication tools utilzed by the team members. There are several channels (chatrooms) such as #frontend, #backend, and #db to discuss the different portions of the web application. Slack is also connected to the Github repository and to our Trello board to frequently and easily monitor progress. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="https://www.trello.com/">
<img class="logo--image" src="../static/img/trello.png" alt="Trello Logo">
</a>
<div class="member-info">
<member-name> Trello <br /><br /></member-name>
<member-body> A project management application utilized to list and separate all necessary tasks for the web application. It provides a way to assign tasks and track progress. Trello is connected to our Slack channels. <br /><br /></member-body>
</div>
</div>
<div class="member">
<a href="https://apiary.io/">
<img class="logo--image" src="../static/img/apiary.png" alt="Apiary Logo">
</a>
<div class="member-info">
<member-name> Apiary <br /><br /></member-name>
<member-body> Apiary is a Github tool that allows us to document our API easily and efficiently and be connected to our Github to provide further documentation for our web application. <br /><br /></member-body>
</div>
</div>
</div>
<br/>
</div>
<div class="outro">
© SWEatshop 2017
</div>
</body>
</html>