Safer Drives Mexico

Description

Safer Drives Mexico is a mapping or routing application meant to allow users to avoid high risk zones traveling within and through Mexico. The objective is to allow users to avoid high risk social behavior that would endanger the individual traveling through Mexico.

• Client side (frontend) utilizes React.js & react-router-dom in combination with Material MUI create themes to provide cohesive structure.
• Leaflet map for visualizing low risk route in the desired geographical region.
• Scrapes -twitter/facebook/etc/generic - in order to determine high risk zones based on key phrases in (database types) using (insert tool here).
• User's enter their start and end destination, travel method and the application provides a route that includes risk weighted routing options.

Technology Stack

• Frontend/Client: React.js, MUI, CSS
• API: Leaflet
• Backend/Server: Neo4j, Node.js

Run Code (Environment)

Front-End Helpful Hints

• confirm that config is appropriate:

> node -v
> npm -v
> git --version

• Initial package.json & install dependenies(localhost:3000):
  • Must be cd'd into frontend/client for install
  • MUI, react-router-dom, etc... (see resources)

> npx create-react-app <project name>
> cd <project name>
> npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
> npm install --save react-router-dom
> npm install react-leaflet leaflet

• Test front-end once pages are generated (ctrl-c to exit):

> npm run start

Docker Helpful Hints

• generate a dockerfile (see resources)
• build and run docker

> cd <project name>
> docker build -t <app name> .
> docker run -p 3000:3000 app

• close docker by entering a new terminal

> docker ps

 - idenfity the Container ID

> docker stop <container_id>
> docker rn <container_id>

Resources:

• Database neo4j
  • additional resources [here]
• Map Library Leaflet original.JS
  • github library here
  • React Leaflet here npm install react-leaflet
  • MapTiler here (optional)
• MapQuest Developer here
• Docker install info here:
  • Dockerizing info here and here
  • docker image base here
  • current version v2.18.1

style:

• Material UI CORE React UI LIBRARY great for standardizing projects
  • MUI Core installation here & here
  • MUI template pages here
  • MUI Theme here
  • React Box here & Grid here
  • Material Tab and Tab info here
  • Material Icon Info & Import links here

  npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
  

  • MUI Palette here
  • MUI Alert here
  • MUI with CSS Modules style library here
  • Additional fun in grid-template-columns here

additional info:

• Mexico Peace index 2022

helpful hint:

• CSS modules to allow styles to be treated like objects.
• Leaflet React styling must be done with traditional CSS sheets
  • leaflet map has its own classes assigned that cannot be seen in React
  • Additional styling source here
  • When failure to execute in the vs code USE THE COMMAND LINE.
  • Always double check DOCKER is running prior to deplpyment & look for started