├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── pattern-bg.png
    │   └── tailwind.css
    ├── components
    │   └── IPInfo.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── views
    │   └── HomeView.vue
├── tailwind.config.js
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | not ie 11
5 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: '@babel/eslint-parser'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tracking-app
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tracking-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^1.1.3",
12 |     "core-js": "^3.8.3",
13 |     "leaflet": "^1.9.2",
14 |     "tailwind": "^4.0.0",
15 |     "vue": "^3.2.13",
16 |     "vue-router": "^4.0.3"
17 |   },
18 |   "devDependencies": {
19 |     "@babel/core": "^7.12.16",
20 |     "@babel/eslint-parser": "^7.12.16",
21 |     "@vue/cli-plugin-babel": "~5.0.0",
22 |     "@vue/cli-plugin-eslint": "~5.0.0",
23 |     "@vue/cli-plugin-router": "~5.0.0",
24 |     "@vue/cli-service": "~5.0.0",
25 |     "autoprefixer": "^10.4.13",
26 |     "eslint": "^7.32.0",
27 |     "eslint-plugin-vue": "^8.0.3",
28 |     "postcss": "^8.4.19",
29 |     "sass": "^1.32.7",
30 |     "sass-loader": "^12.0.0",
31 |     "tailwindcss": "^3.2.4",
32 |     "vue-cli-plugin-tailwind": "~3.0.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {
4 |       config: './tailwind.config.js'
5 |     },
6 |     autoprefixer: {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neto112/tracking-app/7ea766be90600b11486ceb627b86319f66fc93bd/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
11 |       integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
12 |       crossorigin=""
13 |     />
14 |     <link
15 |       rel="stylesheet"
16 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
17 |       integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
18 |       crossorigin="anonymous"
19 |       referrerpolicy="no-referrer"
20 |     />
21 |     <title><%= htmlWebpackPlugin.options.title %></title>
22 |   </head>
23 |   <body>
24 |     <noscript>
25 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
26 |     </noscript>
27 |     <div id="app"></div>
28 |     <!-- built files will be auto injected -->
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <router-view />
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/assets/pattern-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neto112/tracking-app/7ea766be90600b11486ceb627b86319f66fc93bd/src/assets/pattern-bg.png


--------------------------------------------------------------------------------
/src/assets/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | 
3 | @tailwind components;
4 | 
5 | @tailwind utilities;
6 | 


--------------------------------------------------------------------------------
/src/components/IPInfo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="
 4 |       absolute
 5 |       -bottom-64
 6 |       lg:-bottom-20
 7 |       flex flex-col
 8 |       lg:flex-row
 9 |       bg-white
10 |       gap-y-4 gap-x-12
11 |       px-8
12 |       pt-8
13 |       pb-12
14 |       rounded-md
15 |     "
16 |   >
17 |     <div class="flex flex-col">
18 |       <h3 class="text-xs mb-2 uppercase">IP Address</h3>
19 |       <span class="text-2xl">{{ ipInfo.address }}</span>
20 |     </div>
21 |     <div class="flex flex-col">
22 |       <h3 class="text-xs mb-2 uppercase">Location</h3>
23 |       <span class="text-2xl">{{ ipInfo.state }}</span>
24 |     </div>
25 |     <div class="flex flex-col">
26 |       <h3 class="text-xs mb-2 uppercase">Timezone</h3>
27 |       <span class="text-2xl">UTC {{ ipInfo.timezone }}</span>
28 |     </div>
29 |     <div class="flex flex-col">
30 |       <h3 class="text-xs mb-2 uppercase">Isp</h3>
31 |       <span class="text-2xl capitalize">{{ ipInfo.isp }}</span>
32 |     </div>
33 |   </div>
34 | </template>
35 | 
36 | <script>
37 | export default {
38 |   props: ["ipInfo"],
39 | };
40 | </script>
41 | 
42 | <style>
43 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import './assets/tailwind.css'
5 | 
6 | createApp(App).use(router).mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import HomeView from '../views/HomeView.vue'
 3 | 
 4 | const routes = [
 5 |   {
 6 |     path: '/',
 7 |     name: 'home',
 8 |     component: HomeView,
 9 |     meta: {
10 |       title: "IP Address Tracker"
11 |     }
12 |   },
13 | ]
14 | 
15 | const router = createRouter({
16 |   history: createWebHistory(process.env.BASE_URL),
17 |   routes
18 | })
19 | 
20 | router.beforeEach((to, from, next) => {
21 |   document.title = `${to.meta.title}`;
22 |   next()
23 | });
24 | 
25 | export default router
26 | 


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-col h-screen max-h-screen">
 3 |     <div
 4 |       class="z-20 flex justify-center relative bg-hero-pattern bg-cover px-4 pt-8 pb-32"
 5 |     >
 6 |       <div class="w-full max-w-screen-sm">
 7 |         <h1 class="text-white text-center text-3xl pb-4">IP Address Tracker</h1>
 8 |         <div class="flex">
 9 |           <input
10 |           v-model="queryIp" 
11 |           type="text" 
12 |           class="flex-1 py-3 px-2 rounded-tl-md rounded-bl-md focus:outline-none"
13 |           placeholder="Search for any IP address or leave empty to get your ip info"
14 |           />
15 |           <i @click="getIpInfo" class="cursor-pointer 
16 |           bg-black 
17 |           text-white 
18 |           px-4 
19 |           rounded-tr-md 
20 |           rounded-br-md
21 |           flex
22 |           items-center 
23 |           fas fa-chevron-right">
24 |           </i>
25 |         </div>
26 |       </div>
27 |       <IPInfo v-if="ipInfo" v-bind:ipInfo="ipInfo" />
28 |     </div>
29 |     <div id="mapid" class="h-full z-10"></div>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | import IPInfo from "../components/IPInfo.vue";
35 | import leaflet from "leaflet";
36 | import { onMounted, ref } from 'vue'
37 | import axios from 'axios'
38 | export default {
39 |  name: "HomeView",
40 |  components: { IPInfo },
41 |  setup() {
42 |   let mymap;
43 |   const queryIp = ref("");
44 |   const ipInfo = ref(null);
45 |   onMounted(() => {
46 |     mymap = leaflet.map("mapid").setView([42.5145, -83.0147], 9);
47 |     leaflet
48 |       .tileLayer(
49 |         "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmV0bzExMiIsImEiOiJjbGFlZGwxaWMwbXBxM3Nxa2J5YWF4NnVyIn0._9CPdnTkXyo_nVTKJBp_VA",
50 |         {
51 |           attribution:
52 |             'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
53 |           maxZoom: 18,
54 |           id: "mapbox/streets-v11",
55 |           tileSize: 512,
56 |           zoomOffset: -1,
57 |           accessToken:
58 |             "pk.eyJ1IjoibmV0bzExMiIsImEiOiJjbGFlZGwxaWMwbXBxM3Nxa2J5YWF4NnVyIn0._9CPdnTkXyo_nVTKJBp_VA",
59 |         }
60 |       )
61 |       .addTo(mymap);
62 |   })
63 |   
64 |   const getIpInfo = async () => {
65 |     try {
66 |       const data = await axios.get(`
67 |       https://geo.ipify.org/api/v2/country,city?apiKey=at_M4yvQdtCvpLPOJZV6UZvY4CNrkRfN&ipAddress=${queryIp.value}`
68 |       );
69 |     const result = data.data;
70 |     ipInfo.value={
71 |       address: result.ip,
72 |       state: result.location.region,
73 |       timezone: result.location.timezone,
74 |       isp: result.isp,
75 |       lat: result.location.lat,
76 |       lng: result.location.lng,
77 |     };
78 |     leaflet.marker([ipInfo.value.lat, ipInfo.value.lng]).addTo(mymap);
79 |         mymap.setView([ipInfo.value.lat, ipInfo.value.lng], 13);
80 |     }
81 |     catch(err) {
82 |       alert(err.message)
83 |     }
84 |   }
85 |   
86 |   return { queryIp, ipInfo, getIpInfo }
87 |  }
88 | 
89 | }
90 | </script>
91 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 4 |   theme: {
 5 |     extend: {
 6 |       backgroundImage: (theme) => ({
 7 |         "hero-pattern": "url('pattern-bg.png')",
 8 |       }),
 9 |     },
10 |   },
11 |   plugins: [],
12 | }
13 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------