created earthquake searcher using vue mapbox

README.md

@@ -1,33 +1,30 @@
-## Ceres Imaging
 
-# FrontEnd Engineer Candidate Screening
+## Frontend challenge for Ceres Imaging
 
-### About the assignment
+This is a simple earthquake seach feature consuming the data from [USGS API](https://earthquake.usgs.gov/fdsnws/event/1/#parameters)
 
-- There's no right or wrong way to complete this challenge - we want to see how you solve problems!
-- You can spend as much time as you need to complete this, but we don't want to take up too much of your time. Solving every problem isn't mandatory.
-- You can run the project locally or you can use Docker. If you use Docker please add the Dockerfile.
-- Code styling is important - you can use Prettier or any other option.
-- A basic scaffold application with Vue/Vuetify app is available. If you don't feel comfortable with Vue, you can start from scratch with React or any other toolset.
-- You can use any tool/library that makes your work faster/easier.
+### Installing dependencies
 
-### How to do it
+1. clone the repo
+2. run `npm install` to install necessary dependencies
+3. run `npm run serve` to build the local environment
 
-1. Fork the repo
-1. Do your magic
-1. Push to your fork
-1. Create a PR to upstream
+### Stack
 
-### Tasks
+This project was develop using vue mapbox, vuex and vuetify
 
-1. Create a form in the sidebar to submit filters to the source endpoint including: `starttime`, `endtime` and `minmagnitude`
-1. Circle radius must be relative to the earthquake magnitude
-1. Add a Popup to the map to show info about clicked point including: `place`, `magnitude` and `time`
+- This was my first time using some of these technologies, so I wanted to give it a try. I had to have an intensive ramp-up in order to make it work.
 
-![screenshot](https://user-images.githubusercontent.com/360260/120043690-cabf9780-bfe2-11eb-8771-8e5e79f025f7.png)
+- I decided to use vuex to manage the states because it was the easiest and cleanest way to manipulate the states and propagate the data between the components.
+
+- Finally, I was able to change the color of the `circle-radius` depending of the value of the magnitude 
+
+### Functionability
+
+The user is able to perfom a search by given three endpoints: `starttime`, `endtime` and `minmagnitude`. These endpoints will submit the filter and return all the data that was requested
 
 ### Docs
 
 - [USGS API](https://earthquake.usgs.gov/fdsnws/event/1/#parameters)
 - [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/)
-- [Vue Mapbox](https://vue-mapbox-gl.meta.fr/)
+- [Vue Mapbox](https://vue-mapbox-gl.meta.fr/)

package.json

@@ -10,10 +10,13 @@
   "dependencies": {
     "@mapbox/mapbox-gl-geocoder": "^4.7.1",
     "@studiometa/vue-mapbox-gl": "^1.4.7",
+    "axios": "^1.2.2",
     "core-js": "^3.6.5",
     "mapbox-gl": "^1.13.1",
     "vue": "^2.6.11",
-    "vuetify": "^2.4.0"
+    "vue-axios": "^3.5.2",
+    "vuetify": "^2.4.0",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -44,7 +47,13 @@
     "parserOptions": {
       "parser": "babel-eslint"
     },
-    "rules": {}
+    "rules": {
+      "prettier/prettier": 
+    [ "error",
+      {
+        "endOfLine": "auto"}
+    ]
+    }
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -4,6 +4,7 @@
     <v-main>
       <v-container fluid fill-height d-flex pa-0>
         <main-map class="flex-grow-1 fill-height" />
+        <ColorInfo />
       </v-container>
     </v-main>
   </v-app>
@@ -12,13 +13,15 @@
 <script>
 import MainMap from "./components/Map";
 import SideBar from "./components/SideBar";
+import ColorInfo from "./components/ColorInfo.vue";
 
 export default {
   name: "App",
 
   components: {
     SideBar,
     MainMap,
+    ColorInfo,
   },
 };
 </script>

src/components/ColorInfo.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="container">
+    <ul>
+      <li class="list-item">
+        <div class="color-info1"></div>
+        <p>Magnitude from 0 to 3</p>
+      </li>
+      <li class="list-item">
+        <div class="color-info2"></div>
+        <p>Magnitude from 3 to 4</p>
+      </li>
+      <li class="list-item">
+        <div class="color-info3"></div>
+        <p>Magnitude from 4 to 5</p>
+      </li>
+      <li class="list-item">
+        <div class="color-info4"></div>
+        <p>Magnitude from 5 to 6</p>
+      </li>
+      <li class="list-item">
+        <div class="color-info5"></div>
+        <p>Magnitude 6+</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ColorInfo",
+};
+</script>
+
+<style scoped>
+.container {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  background-color: antiquewhite;
+  z-index: 999;
+  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
+  width: 20%;
+}
+
+.list-item {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  gap: 10px;
+  line-height: 1rem;
+}
+.color-info1,
+.color-info2,
+.color-info3,
+.color-info4,
+.color-info5 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+}
+.color-info1 {
+  background-color: green;
+}
+.color-info2 {
+  background-color: yellow;
+}
+
+.color-info3 {
+  background-color: orange;
+}
+.color-info4 {
+  background-color: violet;
+}
+.color-info5 {
+  background-color: red;
+}
+</style>