Project Features - Team-Purple-Cobras/isitsafe GitHub Wiki

Application’s Concept

This web application receives an address in Chicago from the user and searches for crime incidents within a 50 meters radius and marks them on the map. It also lists all the crime incidents in the area and saves previous searches.

The Motivation

Staying safe in the city of Chicago

Design Process

  • Project initial design - wireframe
  • Setup project management and assign tasks using Trello and Google Docs
  • Setup team communication via Slack
  • Setup project repo using GitHub
  • Initial HTML and CSS - frontend
  • Work on Crime API - JS
  • Work on Google Maps API - JS
  • Work on Firebase - backend
  • Integrate code
  • Add extra features - JS
  • Improve layout and style - HTML and CSS
  • clean up code
  • Deploy to GitHub pages
  • Adding a comprehensive README file
  • Document the project using GitHub Wiki

User Experience

  1. Type in location

  2. Maps shows up Map will show data points of options user chose

  3. Click on data points for details

  4. List also shows up with all data points

  5. A list shows up with our Firebase data (Previous search by area, ...)

  • The user is only able to see results from Chicago

Technologies Used

  • HTML
  • CSS
    • Reset CSS
    • Materialize framework
    • Responsive design
    • Modals for crime list and search history
  • Firebase
    • search history
  • JS
    • Moment.js
  • Google Maps API
    • Autocomplete
    • Marker
    • Zoom in map after search
    • Map centering after search
    • Information windows by hovering
    • Geocoding-converting address to coordinates
  • Crime API
    • Limiting results to 50m radius
  • User Interface Animations
  • Command Line Interface
  • HTML and CSS validators
  • JSLint

Future Development

  • Add other APIs
  • Hide API key
  • Modal alert if address is not valid
  • Incorporate hotel, Airbnb or similar APIs
  • Highlight marker on the map when clicking on the event in the table
  • Clean up previous search spacing
  • Data validation backend - prevent spoofing
  • Restrict year on crime API - give option to user
  • When a user clicks a previous location, it automatically searches for that address
  • Additional frontend data validation besides Google
  • Custom marker images with different colors