Deck Royale

A Single Page Application using Vue that generates random Clash Royale decks using the Clash Royale API.

You can check the server used to deploy this app on Heroku here.

⚠️ UPDATE: Getting an "Oooooops" error page? Try using http:// instead of https:// when accessing the application.

In this project we used

• NodeJS
• npm
• Vue
• Bootstrap
• Clash Royale API

Requirements

• NodeJs

Build Setup

# Install dependencies
> npm install

# Serve with hot reload at localhost:8080
> npm run dev

# Build for production with minification
> npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

About the Project Files

src\domain\clash\ClashServices.js - Where we are requesting the Clash Royale API for data and returning JSON objects.

src\components - Where we saved all the templates.

src\components\shared - Where we saved all the templates that are used in multiple places.

src\assets - Where we saved our CSS, JS and static images.

src\routes - Where we manage our application Routes (which template is used in which path).

src\main.js - Where we import the modules that our application uses, and configure them(the modules).

package.json - Has all the info needed by Node about the project.

Modules Used

Vue Resource

We used the Vue Resource module so we could consume the Clash Royale API that follows the REST pattern.

Vue Router

We used the Vue Router module so we could define the application routes, making it easy to bing the content with the url path.

Boostrap

We used the Bootstrap v3.3.7 module to style our application.

Consuming API

In this project we are consuming the data from the Clash Royale API.

---

This content is not affiliated with, endorsed, sponsored, or specifically approved by Supercell and Supercell is not responsible for it. For more information see Supercell’s Fan Content Policy.