This app is for a code academy project.

It will demonstrate the use of both frontend and backend technologies.

The app uses flask to retrieve information from a mongoDB database and display that information using D3.js, DC.js and Crossfilter.js.
This allows app data to be filtered and interactive.

• Python
  • Python is a hugely popular general-purpose, high-level programming language, used in web and game development and scientific projects.
• PyCharm
  • PyCharm is a professional Integrated Development Environment (IDE) made by JetBrains, specifically for using with Python. It offers several features that are not available in other, simpler editors like IDLE.
• Bower
  • Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.
• Bootstrap
  • Bootstrap is a open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
• Jquery
  • Jquery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
• MongoDB
  • MongoDB is an open source database that uses a document-oriented data model. Instead of using tables and rows as in relational databases, MongoDB is built on an architecture of collections and documents. Documents comprise sets of key-value pairs and are the basic unit of data in MongoDB. Collections contain sets of documents and function as the equivalent of relational database tables.
• Flask
  • Flask is a web framework which allows you to create a website to display pages, save data, and many other things. More accurately, it is a micro-framework, because it is a small program which glues together other modules.
• D3.js
  • D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.
• DC.js
  • DC.js is a javascript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter's demo). It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive and therefore provide instant feedback to user interaction.
• Crossfilter.js
  • Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. Crossfilter supports extremely fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records; we built it to power analytics for Square Register, allowing merchants to slice and dice their payment history fluidly.
• Font-Awesome
  • Font Awesome is a full suite of pictographic icons that can be easily customised for websites.
• Heroku
  • Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Functionality:

• Checked all the links worked on all pages.
• Tested forms on all pages.
• Validated HTML/CSS using W3C.
• Checked all queries were executing correctly from database.
• Made sure there was compatibility with different browser platforms. This project was tested on; Safari, Chrome, Firefox, Opera, and MS Edge.
• Tested responsiveness and compatibility on mobile devices, IOS and Android.

• Flask py file - This was kept and modified as needed.
• CSV file - Upload this file to my database unchanged. This file can be downloaded from donorschoose.org.
• graph.js - This file was modified in order to link to my flask py file.
• These files were kept and unchanged: Crossfilter.js, d3.js, dc.js, intro.js, jquery.min.js, keen.min.js, queue.js, dc.css, and introjs.cs.

• This project was uploaded and deployed on Heroku.