top of page

USA SPENDING USING API

Fetched API from USASpending via Python in PyCharm and input the data into a functional table. Utilizing Dash Bootstrap for table design and a CSS front end, the app was successfully deployed to Heroku.

​

GitHub Repository

Overview

Project:

  • Role:   Software Engineer Intern

  • Project Scale:   Two Weeks

  • Stakeholders:   Spire Law

​

Tools used:

  • Pycharm

  • Heroku

  • Dash 

  • Dash Bootstrap CSS

  • Python

  • Json

Introduction

Problem:

Need to have better access to the data on how US Government agencies spend their money. 

​

Goal:

Use API from USA Spending website and display information into a readable table. Have a Fetch button that will fetch and refresh data when clicked.

Approach

Step 1 - Create a Heroku App:

​

  • Open a Heroku account.

  • Attach Python build package since that is the code to be used.

  • Create a Procfile

  • Create a requirements.txt folder

  • Deploy simple output of "Hello World" to ensure connection. 

  • Adjust Dynos to '1' since the app is small and simple.

​

​​

​

Step 2 - Install packages needed in Pycharm:

​

  • Dash

  • Dash-bootstrap-components

  • Pandas

​​

​

​

Deploy basic app to check in with Spire Law and confirm basic concepts:

​

  • Front page does not show data table.

  • Data table is presented after clicking a button.

  • Fetch button is present to fetch data from API

  • json is used to put data from API into a readable table.

  • Table is responsive (sort and pagination).

​

​

​

After initial approval, move on to designing the app:

​

  • Change App theme to Dash Bootstrap CSS MORPH.

  • Change font to "Times New Roman".

  • Modify table design and layout.

  • Add color and depth to app.​​​

​

Final Project

Final design deployed on Heroku with all standards met.

USATitle.png

Deploy App:

​

App launches to a descriptive title page with a fetch button. 

App_first.png

Fetch Button:

​

Fetch button is present on left side of the page above the table to fetch and refresh data.

Fetch.png

Fetch Data:

Once fetch button is clicked, data table appears on page with descriptive title still in place.

Data_App.png

Data Table:

​

Data is aligned on the left with alternating colors for better visibility. Header is in bold with a darker background. Table is sortable with every column.

Table.png

Pagination:

​

Lower right pagination allows you to intuitively go to each page, or jump to the end or beginning. 

Pagination.png

Project Reflections

Reflecting on this project, it marked my first experience working with PyCharm, which turned out to be an invaluable learning opportunity. The abundance of resources available for new learners made the transition to this IDE smooth and enjoyable. Navigating through PyCharm's features and capabilities allowed me to enhance my coding efficiency and deepen my understanding of Python development.

​

​

The process of fetching data from the USASpending.gov API was straightforward, thanks to the well-documented and user-friendly nature of the website. This made it easy to integrate the data into my project and focus more on the analytical and design aspects.

​​

​

One of the most exciting challenges was transforming the app from a basic grayscale data table into something more visually engaging. This aspect of the project allowed me to delve into the design side of coding, experimenting with different ways to present data in a more compelling and user-friendly manner. This creative exploration not only improved the app's aesthetics but also reinforced the importance of user experience in data-driven applications.

Calculator
bottom of page