Focus

A Minimal Todo List app built on VueJS

Focus is a minimal todo list Progressive app (PWA) which I built on Vue. This is my first project of Vue so any suggestions are always welcome. The app also uses LocalStorage so that the items remain even if browser is closed.

Design

I have used Focus to showcase some design patterns that I would love too see in the future. It makes use of extensive blur effects, which gives the UI more of a frosted glass(acrylic) material rather than the card and drop shadow layouts we have always created.
Due to performance constraints, this is not natively supported very well in all browsers. I have made use of some hacks, that allow you to experience this UI design with today's web technologies. Some issues are:

• Blur does not work on IE 11 😶.
• Minor rendering issues on mobile browsers.

Development

To run the development version of the app

  git clone https://github.com/blenderskool/focus
  cd focus
  npm install
  npm run dev

To build the code for production

  npm run build