qpmjcv/maps-app

Find city using Mapbox API

Maps App

The objective of the application is to create a React application using Mapbox. It allows us to carry out a search for places, locate ourselves in the selected place on the map, generate a line with the nearest route. As well as show us the distance in kilometers and the time in minutes it would take to reach our destination by vehicle.

Apis Used are:

• Geocoding to search places.
• Directions to generate polyline and show distance and time between two points.

Development

To get a local copy, clone it using:

git clone https://github.com/castromaciel/maps-app.git

Install dependencies:

yarn install
or
npm install 

Available Scripts

In this project, you can run the following scripts:

Script	Description
yarn build	Builds the app for production to the dist folder.
yarn deploy	Deploys the app at github pages.
yarn dev	Runs the app in the development mode.
yarn preview	Start a local web server that serves the built solution from ./dist for previewing
yarn test	Runs tests with jest.

Base Dependencies

• axios for networking.
• mapbox-gl for building web maps.
• sass for stylesheets.
• jest and react-testing-library for testing.

Folder Structure

template-vite-react-ts
├── node_modules
├── public
│   └── vite.svg
└── src
    ├── __tests__
    ├── apis
    ├── components
    ├── context
    ├── helper
    ├── hooks
    ├── interfaces
    ├── screens
    ├── index.scss
    ├── main.tsx
    ├── MapsApp.tsx
    └── vite-env.d.ts
├── .env
├── .eslintrc.json
├── .gitignore
├── .babel.config.json
├── .deploy.sh
├── index.html
├── jest.config.ts
├── jest.setup.ts
├── package.json
├── README.md
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.js
├── yarn.lock

Styleguide

For coding styling, I decided to use eslint and the eslint-airbnb configuration, with some personal modifications.

Credits

Maps-app is built and maintained by Castro Maciel

License

This project is licensed under the terms of the MIT license.