Tools

#Front end On the front end side, we developed our website using HTML and CSS. We used Bootstrap and Jquery as libraries to make our front end more appealing. With Bootstrap, we were able to set up a grid-like structure for our web pages and design for mobile devices as well as desktops. The background picture of our splash page was taken by Kirsten in Colorado, and edited in Photoshop for transparency. The carousel, card templates, tables and navigation bar was implemented with Bootstrap. We used fonts from Google Fonts on the splash page and throughout the website. To make the tables sortable and use pagination, we used DataTables, which uses JQuery and CSS with Bootstrap from this helpful tutorial (https://datatables.net/examples/styling/bootstrap.html). To actually fill in the data, we are using Flask routing systems through init.py and each of our 8 main HTML files- the four table pages for our pillars and a template page for each pillar. ####List of front end languages/tools/frameworks

• Bootstrap
• jQuery
• Google Fonts
• Google Maps
• CSS
• javaScript
• Angular

#Back end We wrote our back end in Python by utilizing the Flask framework. Flask allows us to route URL addresses to specific HTML templates. Flask also allows for simple passing of objects between the front end and the back end. We use SQLAlchemy as an Object Relational Model interface for our Postgesql database. This means we can view rows as objects and the columns of the rows as object attributes. Our old SQL statements are now method calls on objects, such that we do not ever explicitly write a SQL statement. So we retrieve the data through SQLAlchemy and then populate HTML template pages by passing in the objects that are returned from our select statements. ####List of back end languages/tools/frameworks

• Flask
• SQlAlchemy
• Amazon Web Services
• PostgreSQL
• Python

#Embedding media services On our previous phase, all media files were downloaded and liked to relatively in our file structure. For this phase, we store URLS to photos in our models, and then we embed those links into the src pieces of the HTML. Because of this, all the photos on the website are stored in our database and will be linked automatically, no manual work involved. In fact, the only manual work we had to do was because the photo links on Wikipedia are not in a consistent format, so for those that did not fit the mold, we had to build those URLs.

#Slack We used Slack as our primary method of communication. To coordinate our meeting times, we set up a channel which we called Meetings. This is where everyone posted the times that they'd be able to get together and work on the project. It also allowed us to share pictures, files and other media when necessary. Slack consumed a lot of battery life from all of our phones with constant notifications because we integrated it with our GitHub Repo. We also had a channel for brainstorming ideas that was useful in addition to the general, meetings, and GitHub channels. It's a very useful tool for any team that needs to collaborate effectively.

#GitHub GitHub uses git for version control. It is where we uploaded all of our files and where you are reading this right now. It allows you to collaborate remotely by sharing a pool of files which is called a repository. You can then download those files by cloning the repository to your machine and then edit them individually. Then, add your changes to the repository with a commit and push the changes, which will now be reflected when anybody clones the repository. If something goes wrong during the development process, for example, you encounter a bug that you can not fix, then it "conveniently" allows you to revert to a previous point in the repository's history when your project was still functioning. You can also create issues which will allow you to identify things that you and your team still need to fix, add or improve. Though we initially did not utilize the issues tracker, the project continued to grow in tasks that it became a good to-do list to make sure all the developers on our team knew what needed to be done.