https://github.com/guillaumebriday/todolist-frontend-vuejs

Front-end application for Todolist Web application built with Laravel and Vue.js
https://github.com/guillaumebriday/todolist-frontend-vuejs

axios docker docker-compose hmr laravel-echo lazy-loading momentjs netlify spa tailwindcss vue-router vuejs vuex webpack webpack-dev-server

Last synced: about 2 months ago
JSON representation

Front-end application for Todolist Web application built with Laravel and Vue.js

• Host: GitHub
• URL: https://github.com/guillaumebriday/todolist-frontend-vuejs
• Owner: guillaumebriday
• License: mit
• Created: 2017-12-20T23:46:44.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-01-24T22:21:55.000Z (over 3 years ago)
• Last Synced: 2024-07-05T14:53:26.096Z (2 months ago)
• Topics: axios, docker, docker-compose, hmr, laravel-echo, lazy-loading, momentjs, netlify, spa, tailwindcss, vue-router, vuejs, vuex, webpack, webpack-dev-server
• Language: JavaScript
• Homepage: https://todolist.guillaumebriday.fr
• Size: 2.1 MB
• Stars: 142
• Watchers: 5
• Forks: 25
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Todolist-frontend Application

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/guillaumebriday)

![](https://github.com/guillaumebriday/todolist-frontend-vuejs/workflows/Lint/badge.svg)

[![Netlify Status](https://api.netlify.com/api/v1/badges/68286221-cb5f-4960-834f-0ae250395090/deploy-status)](https://app.netlify.com/sites/todolist-frontend-vuejs/deploys)

> Frontend for https://github.com/guillaumebriday/todolist-backend-laravel app, built for a serie of articles on my [blog](https://guillaumebriday.fr/).

> If you want to see this project with [Nuxt.js](https://nuxtjs.org/) I created the same application available here: [todolist-frontend-nuxt](https://github.com/guillaumebriday/todolist-frontend-nuxt).

The purpose of this repository is to consume API, provide by [a Laravel Application](https://github.com/guillaumebriday/todolist-backend-laravel), with the [Vue.js](https://vuejs.org) JavaScript front-end framework.

![Screenshot](https://raw.githubusercontent.com/guillaumebriday/todolist-frontend-vuejs/master/screenshot.png)

## Some of the tools used in this project

- [Vue.js](https://vuejs.org)

- [vue-router with Lazy Loading Routes](https://router.vuejs.org/en/)

- [vue-test-utils](https://github.com/vuejs/vue-test-utils)

- [vuex](https://github.com/vuejs/vuex)

- [axios](https://github.com/axios/axios)

- [moment.js](https://github.com/moment/moment/)

- [Laravel Echo](https://github.com/laravel/echo)

- [Webpack](https://webpack.js.org/)

- [webpack-dev-server](https://github.com/webpack/webpack-dev-server)

- [Tailwind CSS](https://github.com/tailwindcss/tailwindcss)

## Installation

Development environment requirements :

- [Docker](https://www.docker.com)

- [Docker Compose](https://docs.docker.com/compose/install/)

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 :

```bash

$ 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 :

```bash

$ docker-compose run --rm node yarn lint

```

Running tests :

```bash

$ 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/](https://pusher.com/).

## Deploy in production

This application is hosted on [Netlify](https://www.netlify.com/) and available on [https://todolist.guillaumebriday.me/](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](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](http://opensource.org/licenses/MIT) license.