An OMDb demo powered by Vue CLI 3.x

The README generated by Vue CLI was moved to README-CLI.md

§ Online demo

Click here.

§ Features

• Basics: Vue + Vuex + Vue Router + Axios
• UI lib: Bulma + Font Awesome 5, Fully Responsive & Mobile First!
• Eliminate unused styles by PurgeCSS
• Auto polyfill (browser compatibility list) powered by Polyfill.io
• Save query parameters in the URL (inspired by LinkedIn Jobs)

$ Quick Start

$ git clone https://github.com/kenberkeley/omdb-vue.git
$ cd omdb-vue/

# Install dependencies
$ npm i

# Run!
$ npm run serve

Then open http://localhost:8080

$ Project Structure

Only src/ will be elaborated below

src/
├── assets/
├── components/
├── constants/ # All global scope keys (e.g. URL query params, storage) should go here to avoid name collisions
├── pages/
│   └── index/
│       ├── comps/ # Used by index page only
│       └── index.vue
├── router/
├── store/
├── utils/
├── App.vue
└── main.js

Reference:

• Folder-by-type or Folder-by-feature (Stack Exchange)
• How to better organize your React applications? (Medium)

§ Deployment

# Compile for production
$ npm run build
# npm run build -- --report # generate report.html to analyze bundle content

# Publish to Github Pages (https://bit.ly/2YeUyzG)
$ npm run deploy

Check out Deployment (Vue CLI Doc) for more information.

§ TODO

• Testings (Unit & E2E)
• OMDb API request limit (temporary solution: replace VUE_APP_OMDB_API_KEY in .env with the new one)