updated readme, added colors to map, misc cleanup, new screenshot

README.md

@@ -1,10 +1,8 @@
 # DataMade Code Challenge: React Map
 
----
+![2026 DataMade Code Challenge](https://github.com/datamade/code-challenge-v2/blob/main/map/static/images/2026-datamade-code-challenge.jpg)
 
-Welcome to the DataMade code challenge! 👋
-
-https://github.com/user-attachments/assets/39702bb2-0a72-45a0-91bf-2d48d990fbce
+Welcome to the 2026 DataMade code challenge! 👋
 
 ## Overview
 
@@ -16,18 +14,6 @@
 
 We’ll be evaluating whether the code works, as well as its quality. Before submitting, make sure that your code does what you expect it to do, that it’s clean and neat enough to meet your standards, and that you’ve provided us some instructions on how to run it.
 
-_Note: If you would prefer to keep your code challenge private, please share access with the following members of DataMade on GitHub:_
-
-| Member    | GitHub Account                   |
-| --------- | -------------------------------- |
-| Hannah    | https://github.com/hancush       |
-| Derek     | https://github.com/derekeder     |
-| Monkruman | https://github.com/antidipyramid |
-| Xavier    | https://github.com/xmedr         |
-| Hayley    | https://github.com/haowens       |
-
-Keep in mind that you cannot create a private fork of a public repository on GitHub, so you’ll need to [follow these instructions](https://gist.github.com/0xjac/85097472043b697ab57ba1b1c7530274) to create a private copy of the repo.
-
 ## Installation
 
 Development requires a local installation of [Docker](https://docs.docker.com/get-started/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/). These are the only two system-level dependencies you should need.
@@ -82,3 +68,15 @@
 ### Step 5: Submit your work
 
 To submit your work, create a feature branch for your code, commit your changes, push your commits up to your fork, and open up a pull request against main. Finally, drop a link to your pull request in your application.
+
+_Note: If you would prefer to keep your code challenge private, please share access with the following members of DataMade on GitHub:_
+
+| Member    | GitHub Account                   |
+| --------- | -------------------------------- |
+| Hannah    | https://github.com/hancush       |
+| Derek     | https://github.com/derekeder     |
+| Monkruman | https://github.com/antidipyramid |
+| Xavier    | https://github.com/xmedr         |
+| Hayley    | https://github.com/haowens       |
+
+Keep in mind that you cannot create a private fork of a public repository on GitHub, so you’ll need to [follow these instructions](https://gist.github.com/0xjac/85097472043b697ab57ba1b1c7530274) to create a private copy of the repo.

docker-compose.yml

@@ -35,8 +35,6 @@ services:
       DJANGO_MANAGEPY_MIGRATE: "on"
       DJANGO_DEBUG: "True"
       PGPASSWORD: postgres
-    env_file:
-      - .env
     entrypoint: /app/docker-entrypoint.sh
     command: python manage.py runserver 0.0.0.0:8000
 
@@ -55,7 +53,7 @@ services:
     volumes:
       - map-db-data:/var/lib/postgresql
     ports:
-      - 32001:5432
+      - 5432:5432
 
 volumes:
   map-db-data:

map/static/js/RestaurantPermitMap.js

@@ -1,4 +1,4 @@
 import React, { useEffect, useState } from "react"
 
 import { MapContainer, TileLayer, GeoJSON } from "react-leaflet"
 
@@ -37,6 +37,8 @@
 }
 
 export default function RestaurantPermitMap() {
+  const colors = ["#eff3ff", "#bdd7e7", "#6baed6", "#2171b5"]
+
   const [currentYearData, setCurrentYearData] = useState([])
   const [year, setYear] = useState(2026)
 
@@ -59,17 +61,32 @@
       .then((data) => setCurrentYearData(data))
   }, [currentUrl])
 
+  function getColor(pcntPermits) {
+    if (pcntPermits > .5)
+      return colors[3]
+    else if (pcntPermits > .2)
+      return colors [2]
+    else if (pcntPermits >= .01)
+      return colors [1]
+    else
+      return colors[0]
+  }
+
   function setAreaInteraction(feature, layer) {
     const thisAreaData = communityAreaDict[feature.properties.community],
       numPermits = thisAreaData.num_permits,
       pcntPermits = numPermits / maxNumPermits
     layer.setStyle({
-      fillOpacity: pcntPermits,
+      color: "#000000",
+      weight: 1,
+      fillOpacity: 0.7,
+      fillColor: getColor(pcntPermits)
     })
     layer.on("mouseover", () => {
       layer.bindPopup(`
-        <h3>${feature.properties.community}</h3>
-        <p>Restaurant permits issued during ${year}: ${thisAreaData.num_permits}</p>
+        <strong>${feature.properties.community}</strong><br />
+        Year: ${year}<br />
+        Restaurant permits: ${thisAreaData.num_permits}
       `)
       layer.openPopup()
     })
@@ -89,11 +106,10 @@
         id="restaurant-map"
         center={[41.88, -87.62]}
         zoom={10}
-        scrollWheelZoom={false}
       >
         <TileLayer
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png"
         />
         {currentYearData.length > 0 ? (
           <GeoJSON

map/templates/base.html

@@ -10,38 +10,35 @@
     />
 
     <title>
-      Home | DataMade Code Challenge
+      Home | 2026 DataMade Code Challenge
     </title>
 
-    <meta content="TK" name="description" />
+    <meta content="A map that displays Chicago's community areas, shaded depending on how many new restaurant permits were issued in a given year" name="description" />
     <meta
-      content="DataMade Code Challenge"
+      content="2026 DataMade Code Challenge"
       name="author"
     />
-    <meta property="og:site_name" content="DataMade Code Challenge" />
+    <meta property="og:site_name" content="2026 DataMade Code Challenge" />
 
     <!-- Facebook metadata -->
     <meta property="og:type" content="website" />
     <meta
       property="og:title"
-      content="Home | DataMade Code Challenge"
+      content="2026 DataMade Code Challenge"
     />
-    <meta property="og:description" content="TK" />
+    <meta property="og:description" content="A map that displays Chicago's community areas, shaded depending on how many new restaurant permits were issued in a given year" />
     <meta property="og:url" content="TK" />
 
     <!-- Twitter metadata -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="DataMade Code Challenge" />
-    <meta name="twitter:creator" content="TK" />
+    <meta name="twitter:site" content="2-26 DataMade Code Challenge" />
+    <meta name="twitter:creator" content="DataMade" />
     <meta
       name="twitter:title"
-      content="Home | DataMade Code Challenge"
+      content="2026 DataMade Code Challenge"
     />
     <meta name="twitter:url" content="TK" />
-    <meta name="twitter:description" content="TK" />
-
-    <meta property="og:image" content="{% static 'images/' %}" />
-    <meta name="twitter:image" content="{% static 'images/' %}" />
+    <meta name="twitter:description" content="A map that displays Chicago's community areas, shaded depending on how many new restaurant permits were issued in a given year" />
 
     <!-- Override this block to add extra meta tags -->
     {% block extra_meta %}{% endblock %}
@@ -75,70 +72,21 @@
       class="navbar navbar-expand-lg bg-light"
     >
       <div class="container-fluid">
-        <a class="navbar-brand" href="/"
-        >DataMade Code Challenge</a
-          >
-
-          <button
-            class="navbar-toggler"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#navbarSupportedContent"
-            aria-controls="navbarSupportedContent"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-          >
-            <span class="navbar-toggler-icon"></span>
-          </button>
-
-          <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav">
-              {% include 'map/partials/nav.html' %}
-            </ul>
-          </div>
+        <a class="navbar-brand" href="/" >2026 DataMade Code Challenge</a>
         </div>
       </nav>
 
       <main>{% block body %}{% endblock %}</main>
 
-      <footer class="bg-dark text-light">
-        <div class="container-fluid py-4">
-          <div class="row">
-            <!-- Site Name -->
-            <div class="col-md">
-              <p class="h4">
-                DataMade Code Challenge
-              </p>
-            </div>
-          </div>
-
-          <hr class="py-2" style="border-color: gray" />
-
-          <div class="row">
-            <div class="col">
-              <p>
-                Built by
-                <a href="https://datamade.us" target="_blank" class="text-light"
-                >DataMade</a
-                  >
-                </p>
-              </div>
-            </div>
-          </div>
-        </footer>
-
-        <!-- Load external scripts -->
-        <script src="{% static 'js/lib/fontawesome.min.js' %}"></script>
-
-        <!-- Load Bootstrap styles and JavaScript -->
-        {% load render_bundle from webpack_loader %}
-        {% render_bundle 'bootstrap' js %}
-
-        <!-- Load extra external scripts -->
-        {% block extra_js %}{% endblock %}
-
+      <!-- Load external scripts -->
+      <script src="{% static 'js/lib/fontawesome.min.js' %}"></script>
 
+      <!-- Load Bootstrap styles and JavaScript -->
+      {% load render_bundle from webpack_loader %}
+      {% render_bundle 'bootstrap' js %}
 
+      <!-- Load extra external scripts -->
+      {% block extra_js %}{% endblock %}
 
       </body>
     </html>

map/templates/map/home_page.html

@@ -4,11 +4,6 @@
 
 {% block body %}
   <div class="container-fluid">
-    <div class="row">
-      <div class="col-sm-10 offset-sm-1">
-        <h1>DataMade Code Challenge</h1>
-      </div>
-    </div>
     <div class="row">
       <div class="col-sm-10 offset-sm-1">
         <div id="map"></div>