JosephLai241 · JosephLai241 · Jan 21, 2024 · Jul 22, 2023 · Jul 22, 2023 · Jul 22, 2023
diff --git a/.env b/.env
@@ -1 +1 @@
-API_VERSION=1.0.0
+API_VERSION=1.1.0
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -46,6 +46,9 @@ jobs:
     needs: [changes, set-up-scp]
     if: ${{ needs.changes.outputs.frontend == 'true' }}
 
+    env:
+      LEAFLET_ACCESS_TOKEN: ${{ secrets.LEAFLET_ACCESS_TOKEN }}
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml
@@ -24,6 +24,9 @@ jobs:
   clippy:
     runs-on: ubuntu-latest
 
+    env:
+      LEAFLET_ACCESS_TOKEN: ${{ secrets.LEAFLET_ACCESS_TOKEN }}
+
     steps:
       - uses: actions/checkout@v4
 

diff --git a/README.md b/README.md
@@ -15,27 +15,61 @@
 [![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/JosephLai241/stacc/prettier.yml?logo=prettier&label=Prettier)](https://github.com/JosephLai241/stacc/actions/workflows/prettier.yml)
 [![Docker Image Version (latest semver)](https://img.shields.io/docker/v/jlai241/stacc-api?logo=docker&label=Docker%20version)](https://hub.docker.com/repository/docker/jlai241/stacc-api/general)
 
+# 👉👉👉 [josephlai.dev][josephlai.dev] 👈👈👈
+
 # Table of Contents
 
 - [What Is This?](#what-is-this)
+- [Where Does the Violence Data Come From?](#where-does-the-violence-data-come-from)
 - [The Stack](#the-stack)
 
 # What Is This?
 
-This is my full-stack portfolio site written entirely in Rust to prove the haters wrong -- Rust _is_ production ready.
+This is my full-stack portfolio site written entirely in Rust to prove the haters wrong -- Rust _is_ production ready. This is both a place to blog about computer science and a form of artistic expression.
+
+![crt tv gif][crt tv gif]
+
+I implemented a retro, CRT TV theme. The background GIF changes on each page refresh and a static GIF loads between each GIF change, simulating flipping through TV channels. All GIFs are miscellaneous screen captures from many different animes -- some are mellow, while others are packed with action. There are many more GIFs I would have liked to include in the rotation, but I have restricted the GIFs to anime to keep consistent with a single theme. This list of GIFs will continue to grow over the years as I find more GIFs that suit the aesthetics of the site. Enjoy cycling through the GIFs!
+
+The site consists of many little easter eggs, including but not limited to:
+
+- A dynamic GIF background that changes on each page refresh.
+- 404 page stories about a digital nomad getting lost, generated by ChatGPT.
+- [Click around and find out]
+
+# Where Does the Violence Data Come From?
+
+My site pulls data from the City of Chicago's Socrata API. Here are links to the documentation:
+
+- [Violence Reduction - Shotspotter Alerts][violence reduction - shotspotter alerts]
+- [Violence Reduction - Victims of Homicides and Non-Fatal Shootings][violence reduction - victims of homicides and non-fatal shootings]
 
-I thought it would be cool to implement a dynamic background for the site. A new background GIF is loaded each time you refresh the homepage. This list of GIFs will continue to grow over the years as I find more GIFs that embody the right vibes. Enjoy cycling through the GIFs!
+The City of Chicago's Uniform Crime Reporting (UCR) codes and descriptions may be found [at this page][city of chicago ucr codes].
 
 # The Stack
 
 This project uses the following stack:
 
-|          |                                                                                                                           |
-| -------- | ------------------------------------------------------------------------------------------------------------------------- |
-| Frontend | [`Yew`][yew]                                                                                                              |
-| Backend  | [`Actix Web`][actix web]                                                                                                  |
-| Database | [![MongoDB Badge](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white)][mongodb] |
+### Frontend
+
+[`Yew`][yew]
+
+### API
+
+[`Actix Web`][actix web]
+
+[![docker badge](https://img.shields.io/badge/docker-2ca5e0?style=for-the-badge&logo=docker&logocolor=white)][docker]
+
+### Database
+
+[![MongoDB Badge](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white)][mongodb]
 
-[yew]: https://yew.rs/
 [actix web]: https://actix.rs/
+[city of chicago ucr codes]: https://gis.chicagopolice.org/pages/crime_details
+[crt tv gif]: https://i.imgur.com/8F4N34p.gif
+[docker]: https://www.docker.com/
+[josephlai.dev]: https://josephlai.dev/
 [mongodb]: https://www.mongodb.com/
+[violence reduction - shotspotter alerts]: https://dev.socrata.com/foundry/data.cityofchicago.org/3h7q-7mdb
+[violence reduction - victims of homicides and non-fatal shootings]: https://dev.socrata.com/foundry/data.cityofchicago.org/gumc-mgzr
+[yew]: https://yew.rs/
diff --git a/api/Cargo.toml b/api/Cargo.toml
@@ -2,7 +2,7 @@
 authors = ["Joseph Lai"]
 edition = "2021"
 name = "api"
-version = "1.0.0"
+version = "1.1.0"
 
 [[bin]]
 name = "api"
@@ -23,5 +23,6 @@ mongodb = "2.5.0"
 rand = "0.8.5"
 reqwest = { version = "0.11.18", features = ["json"] }
 serde = { version = "1.0.163", features = ["derive"] }
+serde_json = "1.0.111"
 thiserror = "1.0.40"
 tokio = { version = "1.28.2", features = ["full"] }
diff --git a/api/src/errors.rs b/api/src/errors.rs
@@ -13,6 +13,10 @@ use crate::models::data::Response;
 /// Contains all error variants for errors that may be raised by Actix Web endpoints.
 #[derive(Debug, Display, derive_more::Error)]
 pub enum StaccResponseError {
+    /// Something fucked up when pinging the Chicago map APIs.
+    #[display(fmt = "Chicago API error: {error}")]
+    ChicagoAPIError { error: String },
+
     /// A generic error variant for MongoDB.
     #[display(fmt = "MongoDB error: {error}")]
     MongoDBError { error: String },
@@ -34,6 +38,9 @@ impl ResponseError for StaccResponseError {
 
     fn status_code(&self) -> StatusCode {
         match *self {
+            StaccResponseError::ChicagoAPIError { .. } => {
+                StatusCode::from_u16(500).unwrap_or(StatusCode::BAD_REQUEST)
+            }
             StaccResponseError::MongoDBError { .. } => {
                 StatusCode::from_u16(500).unwrap_or(StatusCode::BAD_REQUEST)
             }
@@ -57,4 +64,8 @@ pub enum StaccError {
     /// Something fucked up while making a request with `reqwest`.
     #[error("Reqwest error: {0}")]
     Reqwest(#[from] reqwest::Error),
+
+    /// Something fucked up with `serde_json`.
+    #[error("Serde JSON error: {0}")]
+    SerdeJSONError(#[from] serde_json::Error),
 }
diff --git a/api/src/main.rs b/api/src/main.rs
@@ -1,4 +1,5 @@
 //! The API for the `stacc`.
+#![allow(clippy::enum_variant_names)]
 
 use std::env;
 
@@ -49,6 +50,7 @@ async fn main() {
                 .app_data(mongo.clone())
                 .service(
                     web::scope("api")
+                        .service(routes::misc::chiraq)
                         .service(routes::misc::get_background_gif)
                         .service(routes::misc::story)
                         .service(

diff --git a/api/src/models/data.rs b/api/src/models/data.rs
@@ -1,6 +1,7 @@
 //! Contains models for miscellaneous data.
 
 use serde::{Deserialize, Serialize};
+use serde_json::Value;
 
 /// Contains the Imgur link to the background GIF.
 #[derive(Debug, Deserialize, Serialize)]
@@ -9,6 +10,15 @@ pub struct BackgroundGIF {
     pub link: String,
 }
 
+/// Contains JSON data returned from Chicago map-related APIs.
+#[derive(Debug, Deserialize, Serialize)]
+pub struct ChicagoMapData {
+    /// Data returned from the Shotspotter Alert API endpoint.
+    pub shotspotter_data: Value,
+    /// Data returned from the Victims of Homicides and Non-Fatal Shootings API endpoint.
+    pub violence_data: Value,
+}
+
 /// Contains the story for the 404 page.
 #[derive(Debug, Deserialize, Serialize)]
 pub struct Story {

diff --git a/api/src/routes/misc.rs b/api/src/routes/misc.rs
@@ -18,7 +18,7 @@ use crate::{
     errors::StaccResponseError,
     middleware,
     models::data::{BackgroundGIF, Story},
-    utils::{environment::EnvironmentVariables, mongo::Mongo},
+    utils::{chicago::get_vhnfs_shotspotter_data, environment::EnvironmentVariables, mongo::Mongo},
 };
 
 lazy_static! {
@@ -28,6 +28,11 @@ lazy_static! {
     static ref FALLBACK_GIF: &'static str = "https://imgur.com/FgJDNsx.gif";
     /// The default fallback story if selecting a random story from MongoDB fails.
     static ref FALLBACK_STORY: &'static str = "If you don’t like the road you’re walking, pave another one. Except for this one.";
+
+    /// The API endpoint for the ShotSpotter Alerts data.
+    static ref SHOTSPOTTER_ENDPOINT: &'static str = "https://data.cityofchicago.org/resource/3h7q-7mdb.json";
+    /// The API endpoint for the Victims of Homicides and Non-Fatal Shootings data.
+    static ref VHNFS_ENDPOINT: &'static str = "https://data.cityofchicago.org/resource/gumc-mgzr.json";
 }
 
 /// Create a cookie that stores the background GIF link. Returns `Some(Cookie)` if able to retrieve
@@ -98,6 +103,24 @@ pub async fn get_background_gif(
     }
 }
 
+/// Get the data that will be plotted on the Chicago map on the `violence` page.
+#[get("/chiraq")]
+pub async fn chiraq(
+    mongo: Data<Mongo>,
+    request: HttpRequest,
+) -> Result<HttpResponse, StaccResponseError> {
+    if let Err(error) = middleware::log_visitor_data(&mongo, &request).await {
+        error!("{}", error);
+    }
+
+    get_vhnfs_shotspotter_data()
+        .await
+        .map(|chicago_map_data| HttpResponse::Ok().json(chicago_map_data))
+        .map_err(|error| StaccResponseError::ChicagoAPIError {
+            error: error.to_string(),
+        })
+}
+
 /// Get a 404 page story by choosing a random story stored in the stories collection.
 #[get("/story")]
 pub async fn story(

diff --git a/api/src/utils/checks.rs b/api/src/utils/checks.rs
@@ -23,6 +23,7 @@ lazy_static! {
         "STACC_POSTS_COLLECTION_NAME",
         "STACC_STORIES_COLLECTION_NAME",
         "STACC_VISITORS_COLLECTION_NAME",
+        "SOCRATA_APP_TOKEN"
     ];
 }
 

diff --git a/api/src/utils/chicago.rs b/api/src/utils/chicago.rs
@@ -0,0 +1,54 @@
+//! Contains miscellaneous utilities for Chicago-related functionality.
+
+use lazy_static::lazy_static;
+use reqwest::Client;
+use serde_json::Value;
+
+use crate::{errors::StaccError, models::data::ChicagoMapData};
+
+use super::environment::EnvironmentVariables;
+
+lazy_static! {
+    /// A `reqwest` `Client` that is reused for Chicago API requests.
+    static ref REQUEST_CLIENT: Client = Client::new();
+    /// The API endpoint for the ShotSpotter Alerts data.
+    static ref SHOTSPOTTER_ENDPOINT: &'static str = "https://data.cityofchicago.org/resource/3h7q-7mdb.json";
+    /// The API endpoint for the Victims of Homicides and Non-Fatal Shootings data.
+    static ref VHNFS_ENDPOINT: &'static str = "https://data.cityofchicago.org/resource/gumc-mgzr.json";
+}
+
+/// Get data for Victims of Homicides and Non-Fatal Shootings and Shotspotter Alert data from the
+/// Chicago APIs.
+pub async fn get_vhnfs_shotspotter_data() -> Result<ChicagoMapData, StaccError> {
+    let violence_data: Value = serde_json::from_str(
+        &REQUEST_CLIENT
+            .get(VHNFS_ENDPOINT.to_string())
+            .header(
+                "X-App-Token",
+                EnvironmentVariables::SocrataAppToken.env_var()?,
+            )
+            .send()
+            .await?
+            .text()
+            .await?,
+    )?;
+    let shotspotter_data: Value = serde_json::from_str(
+        &REQUEST_CLIENT
+            .get(SHOTSPOTTER_ENDPOINT.to_string())
+            .header(
+                "X-App-Token",
+                EnvironmentVariables::SocrataAppToken.env_var()?,
+            )
+            .send()
+            .await?
+            .text()
+            .await?,
+    )?;
+
+    let chicago_map_data = ChicagoMapData {
+        shotspotter_data,
+        violence_data,
+    };
+
+    Ok(chicago_map_data)
+}
diff --git a/api/src/utils/environment.rs b/api/src/utils/environment.rs
@@ -12,6 +12,8 @@ pub enum EnvironmentVariables {
     MongoDBURI,
     /// The MongoDB user.
     MongoDBUser,
+    /// The Socrata app token for Chicago map-related data.
+    SocrataAppToken,
     /// The port number the API runs on.
     StaccAPIPortNumber,
     /// The name of the collection that contains all backgrounds.
@@ -35,6 +37,7 @@ impl EnvironmentVariables {
             Self::MongoDBPassword => Ok(env::var("MONGO_PASSWORD")?),
             Self::MongoDBURI => Ok(env::var("MONGO_URI")?),
             Self::MongoDBUser => Ok(env::var("MONGO_USER")?),
+            Self::SocrataAppToken => Ok(env::var("SOCRATA_APP_TOKEN")?),
             Self::StaccAPIPortNumber => Ok(env::var("STACC_API_PORT_NUMBER")?),
             Self::StaccBackgroundsCollectionName => {
                 Ok(env::var("STACC_BACKGROUNDS_COLLECTION_NAME")?)

diff --git a/api/src/utils/mod.rs b/api/src/utils/mod.rs
@@ -1,5 +1,6 @@
 //! Contains miscellaneous utilities for `stacc`.
 
 pub mod checks;
+pub mod chicago;
 pub mod environment;
 pub mod mongo;
diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml
@@ -2,7 +2,7 @@
 authors = ["Joseph Lai"]
 edition = "2021"
 name = "frontend"
-version = "1.0.1"
+version = "1.1.0"
 
 [dependencies]
 chrono = "0.4.24"
@@ -12,14 +12,29 @@ gloo-console = "0.2.3"
 gloo-net = { version = "0.2.6", features = ["http"] }
 gloo-timers = { version = "0.2.6", features = ["futures"] }
 gloo-utils = "0.1.6"
+hex = "0.4.3"
 js-sys = "0.3.63"
 lazy_static = "1.4.0"
+leaflet = "0.4.0"
 pulldown-cmark = "0.9.3"
 serde = { version = "1.0.163", features = ["derive"] }
+serde_json = "1.0.111"
+sha2 = "0.10.8"
 thiserror = "1.0.40"
 wasm-bindgen = "0.2.86"
 wasm-bindgen-futures = "0.4.36"
 wasm-cookies = "0.1.0"
-web-sys = { version = "0.3.63", features = ["CssStyleDeclaration", "Document", "HtmlElement", "MutationObserver", "MutationObserverInit", "Node"] }
+web-sys = { version = "0.3.63", features = [
+  "CssStyleDeclaration",
+  "Document",
+  "HtmlElement",
+  "HtmlInputElement",
+  "HtmlTableCellElement",
+  "HtmlTableElement",
+  "HtmlTableRowElement",
+  "MutationObserver",
+  "MutationObserverInit",
+  "Node",
+] }
 yew = { version = "0.20.0", features = ["csr"] }
 yew-router = "0.17.0"
diff --git a/frontend/index.html b/frontend/index.html
@@ -51,6 +51,19 @@
       rel="stylesheet"
     />
 
+    <!-- Add Leaflet CDN. -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
+    <script
+      src="https://unpkg.com/[email protected]/dist/leaflet.js"
+      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+      crossorigin=""
+    ></script>
+
     <!-- Load the anime GIF of someone typing nonsense into a computer. -->
     <link
       data-trunk