Tipsy is a betting game for football worldcups and shows how CakePHP 3 and Vue.js can be used to create SPAs that consist of a Vue.js powered frontend and an API implementation in CakePHP 3.
- Clone the project locally or on a server.
- Install dependencies
composer install
- Configure your environment (Environment Documentation)
- Migrate the DB
chmod +x bin/cake bin/cake migrations migrate
-
Install npm packages
npm install
-
Run any of the provided Grunt tasks to create a new frontend build.
-
webpack-dev
grunt webpack-dev
Creates an unminified development build that supports Vue.js Dev tools.
-
webpack-prod
grunt webpack-prod
Creates a production ready minified and uglified build without Vue.js Dev tools support.
-
watch-vue
grunt watch-vue
Watches for changes to any files (.vue, .js, .scss, .css) in the frontend app and automatically triggers a new webpack-dev build.
-
Depending on the debug configuration of your environment the app will either load the dev build (debug = true) or the prod build (debug = false).
This app is an experiment to see how easy it is to couple Vue.js with a stateless CakePHP API.
Login Screen:
Overview:
Voting on Games:
