Todolist: A simple and powerful to-do list app with Tailwind CSS
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 :
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.
Download details:
Author: guillaumebriday
Source: https://github.com/guillaumebriday/todolist-frontend-vuejs
License: MIT license
