Frontend Boilerplates

Overview

This repository is a group of boilerplates including some good practises and tips that you can follow in your projects. There are different technologies separated by branches but with similar structures to write scalable applications. Some of them include JavaScript, TypeScript, Vue or React. Click on the logos to navigate through them.

Phaser - Boilerplate Features

Note: THIS IS AN ALPHA VERSION DON'T USE IN PRODUCTION :)

Most relevant technologies used in the Boilerplate:

• Phaser: Game engine for JavaScript.
• React: A JavaScript library for building user interfaces.
• Akita: Global State Management system based in RxJS.
• TypeScript: All the code uses TypeScript.
• SASS: Scss structure with good practises.
• Linting: Linting for JavaScript and SASS.
• BEM (Non strict) + BEMIT: Some conventions for CSS classes.
• Yarn: In React Project we have change NPM for Yarn.

📚 Setup and scripts

Before start download or clone the boilerplate. Install all the dependencies.

$ yarn

Run the project for local development.

$ yarn start

Build the project for a production environment.

$ yarn build

If you want to test, there are some options.

$ yarn test # (Will run unit and e2e tests)
$ yarn test:unit # (Only unit tests)
$ yarn test:e2e # (Only e2e tests)

The linting is configured with husky and will run before push, but you can run it.

$ yarn lint # (Will run scripts and styles linting)
$ yarn lint:scripts # (Only scripts lint)
$ yarn lint:styles # (Only styles lint)

🎩 Contributors

This project is possible thanks to the contributors.

Quique Fdez Guerra 📦 💻 🔧

Sabrina Pertusatti 💻

Víctor Gámez 💻

Alex Kryzhanovskyy 💻

Juan Carlos 💻

⛳️ Check all the boilerplates

• basic: Basic SPA example with SCSS and ES6.

• vue: Vuejs example with SCSS and TypeScript.

• react: React example with SCSS and TypeScript.

• phaser: Phaser example using TypeScript and React.

• ts: TypeScript example with SCSS.

• cypress: Cypress example with Cypress and TypeScript.

• nuxt: Nuxt example with SCSS and TypeScript.

• node-ts: Backend and TypeScript example with SCSS and Nodejs.