Version 1.1

Minor fixes and README written

Deploy

Fix vulnerabilities

Cleanup

README.md

@@ -1,2 +1,32 @@
 # safePostcode
 
+![Safe Postcode](.github/screenshot.png)
+
+Safe Postcode is a demonstration of an API integration designed by [@pedsm](https://github.com/pedsm) and [@jonathanballs](https://github.com/jonathanballs) with the intention of making teaching the concept of APIs to programming students.
+
+Safe postcode uses 2 publicaly avaliable APIs in order to fetch crimes reported around a certain area.
+
+1. [Postcodes.io](https://postcodes.io/) a postcode api for the UK
+2. [UK Police API](https://data.police.uk/) the UK police open api
+
+## How it works
+
+Safe postcode uses `postcodes.io` in order to fetch the latitude and longitude of a particular postcode
+
+``` bash
+http https://postcodes.io/postcodes/SW1A%201AA
+```
+
+Then uses the result to create a query to the UK police api
+
+```bash
+http https://data.police.uk/api/crimes-at-location\?lat\=51.501009\&lng\=-0.141588
+```
+
+This is an intresting way of teaching begginers about what APIs can do in a way that generates something relatable.
+
+## Built with
+
+- [React.js](https://reactjs.org/) - Frontend framework
+- [Next.js](https://nextjs.org/) - Server side rendering for React.js
+- [Zeit Now](https://zeit.co/now) - Serverless deployment service

components/crime.js

@@ -1,24 +1,24 @@
 import React from 'react'
 
 export default class Crime extends React.Component {
-    cleanDashCase(dashCase) {
-        const s = dashCase.split('-').join(' ')
-        return s[0].toUpperCase() + s.slice(1)
-    }
+  cleanDashCase(dashCase) {
+    const s = dashCase.split('-').join(' ')
+    return s[0].toUpperCase() + s.slice(1)
+  }
 
-    render() {
-        const { crime } = this.props
-        return (
-            <article className="media">
-                <div className="media-content">
-                    <div className="content">
-                        <p><strong>{this.cleanDashCase(crime.category)}</strong></p>
-                        <p>{crime.location.street.name} <br />
-                            {crime.outcome_status == null ? "🔎 No outcome avaliable" : "🧐" + crime.outcome_status.category}
-                        </p>
-                    </div>
-                </div>
-            </article>
-        )
-    }
+  render() {
+    const { crime } = this.props
+    return (
+      <article className="media">
+        <div className="media-content">
+          <div className="content">
+            <p><strong>{this.cleanDashCase(crime.category)}</strong></p>
+            <p>{crime.location.street.name} <br />
+              {crime.outcome_status == null ? "🔎 No outcome avaliable" : "🧐" + crime.outcome_status.category}
+            </p>
+          </div>
+        </div>
+      </article>
+    )
+  }
 }

components/stats.js

@@ -1,21 +1,22 @@
-import React, {Fragment} from 'react'
+import React, { Fragment } from 'react'
 
 export default class Level extends React.Component {
-    render() {
-        const { crimes, postcode } = this.props
-        return (
-            <nav className="level">
-                <p className="level-item has-text-centered">
-                    {(() => {
-                        if (crimes.length == 0 && postcode == '') {
-                            return 'Please enter your postcode'
-                        } else if (crimes.length == 0) {
-                            return (<>No records found for <strong>{postcode.toUpperCase()}</strong></>)
-                        }
-                        return (<><strong>{crimes.length}</strong> records found for <strong>{postcode.toUpperCase()}</strong></>)
-                    })()}
-                </p>
-            </nav>
-        )
-    }
+  render() {
+    const { crimes
+      , postcode } = this.props
+    return (
+      <nav className="level">
+        <p className="level-item has-text-centered">
+          {(() => {
+            if (crimes.length == 0 && postcode == '') {
+              return 'Please enter your postcode'
+            } else if (crimes.length == 0) {
+              return (<span>No records found for <strong>{postcode.toUpperCase()}</strong></span>)
+            }
+            return (<span><strong>{crimes.length}</strong>&nbsp;records found for <strong>{postcode.toUpperCase()}</strong></span>)
+          })()}
+        </p>
+      </nav>
+    )
+  }
 }