Todolist-frontend Application

Frontend for https://github.com/guillaumebriday/todolist-backend-laravel app, built for a serie of articles on my blog.

If you want to see this project with Nuxt.js I created the same application available here: todolist-frontend-nuxt.

The purpose of this repository is to consume API, provide by a Laravel Application, with the Vue.js JavaScript front-end framework.

Some of the tools used in this project

• Vue.js
• vue-router with Lazy Loading Routes
• vue-test-utils
• vuex
• axios
• moment.js
• Laravel Echo
• Webpack
• webpack-dev-server
• Tailwind CSS

Installation

Development environment requirements :

• Docker
• Docker Compose

Setting up your development environment on your local machine :

$ git clone https://github.com/guillaumebriday/todolist-frontend-vuejs.git
$ cd todolist-frontend-vuejs
$ cp .env.example .env
$ docker-compose run --rm node yarn
$ docker-compose run --service-ports --rm node yarn hot

Useful commands

Building the app :

$ docker-compose run --rm node yarn dev

# Or

$ docker-compose run --rm node yarn watch

# Or

$ docker-compose run --rm node yarn production

Running ESLint :

$ docker-compose run --rm node yarn lint

Running tests :

$ docker-compose run --rm node yarn test

Broadcasting & WebSockets

Before using WebSockets, you need to set the PUSHER_APP_KEY key in your .env file.

You could generate a key on https://pusher.com/.

Deploy in production

This application is hosted on Netlify and available on https://todolist.guillaumebriday.me/.

More details

More details are available on my blog post : https://guillaumebriday.fr/laravel-vuejs-faire-une-todo-list-partie-1-presentation-et-objectifs (French).

Contributing

Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.

License

This project is released under the MIT license.