Vue Map Challenge (challenge-vue-map)

A map built with VueJS

Table of Contents

• Technologies
• Previews
• Development
  • Setup local
  • Start development
  • Folder structure
  • Customize configuration
• Deployment
  • Build production
  • Deploy to firebase
• Contribution

Technologies

• VueJS v3 SPA with Quasar v2
• Google Maps API
• Github Actions for deployment to Firebase Hosting

Previews

A demo website can be accessed at https://vue-map-0921.web.app (Tested with Chrome on laptop and phone)

Here are some screenshots

Hubs are displayed in list and map	Select hubs by clicking them on map / list	Detect user location to sort hubs by distances

Development

Setup local

• Please run this command to install required dependencies

  yarn
  

• Create an .env in your project folder (beside .env.example) with your Google API key (with Maps JS, Geocoder permissions)

  GOOGLE_API_KEY=<api-key>
  

Start development

This command will start a quasar development server, which will also watch your file changes to live-reload

yarn start

You can preview your changes at http://localhost:8080

Folder structure

Here is basic structure of source folder, which I regrouped some components from quasar's default boilerplate for ease of maintenance in a modular way:

src
 |- assets  // App assets
 |- config
     |- router    // Routes & router config
     |- store     // Store config
     |- index.ts  // Some other static config
 |- hubs    // Components for hub list & map
 |- lib     // Libraries
     |- errors    // Error pages
     |- layouts
     |- ...
 |- services      // Error pages
 |- ...

Customize configuration

See Configuring quasar.conf.js.

Deployment

Build production

For a production-ready build of the application, please use this command:

yarn build

Deploy to firebase

There is a Github Actions pipeline defined in .github folder for manually one-click deployment to Firebase Hosting

Contribution

All contributions are welcomed. Feel free to clone this project, make changes that your feel necessary and pull request anytime you want.

🍻 Cheers.