QR Code Generator

Demo Source Code

Introduction

The project is created with VueJS2, Vue Router, VueX, and QRtag API to generate QR code image. This web app has three pages, welcome page, config page where user can choose how they want their QR code to be(url, size, etc), then the result page. (Note: the api is very weird and cannot recognize some urls, if you want to try it out, use the url for youtube.)

Spotlight

1. I really like the fade-in-fade-out animation I added when switching pages. The feature is implemented using Vue Animation which I think it is a fantastic tool.

2. I found this cool button hover effect on codepen, even though it is not my original work. It still took me a while refactoring it to make it compatible with my project.

Lessons Learned

The architecture of the project is very simple and it is clearly not complicated enough to use State Mange System like VueX. Practicing is the key take-away, and it make me learning Redux easier than I thought. In my opinion, I like Redux better than VueX, sure it looks like VueX has simpler syntax, but I found Redux has a more consistent work flow and easier for me to understand.

Go Back