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.
- Frontend/Client: React.js, MUI, CSS
- API: Leaflet
- Backend/Server: Neo4j, Node.js
- 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)
- Must be
> 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
- 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>
- Database neo4j
- additional resources [here]
- Map Library Leaflet original.JS
- MapQuest Developer here
- Docker install info here:
- 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
- Mexico Peace index 2022
- 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