• Stars
    star
    372
  • Rank 114,858 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Collection of Boilerplates with ES6, Vue, React, Nuxt, TypeScript, SCSS, Nodejs. Using good practices and file structures to inspire your real projects.


Frontend Boilerplates

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.

JavaScript Boilerplate Vue Boilerplate React Boilerplate TypeScript Boilerplate Phaser Boilerplate Cypress Boilerplate Nuxt Boilerplate Node and TS Boilerplate

GitHub license GitHub stars GitHub forks Open in CodeSandbox Sponsor Sponsor Build Status GitHub issues Update Status

Basic SPA - Boilerplate Features

These are the most relevant technologies that this boilerplate includes, all of them are configured to inspire your project and are showing examples of what you can do with them.

  • JavaScript: Written in vanilla JavaScript.
  • PostCSS: Be ready for the next CSS features.
  • Bootstrap: Build fast and responsive sites easily.
  • Autoprefixer: Automatically add vendor prefixes to these Styles.
  • Webpack: Automation of tasks and compilation of the project.
  • Babel: Transpiler to different versions of EcmaScript.
  • Browserlist: To configure which browsers will support.
  • Jest: Framework for testing.
  • ESLint: Linting for Scripts.
  • StyleLint: Linting for Styles.
  • Prettier: Formatter for Scripts and Styles.
  • EditorConfig: Formatter for files in general.
  • Husky: Used for attaching to git hooks and run scripts.

🥑 Demo (In progress)

Once you download the project you will find a complete demo of how it works, including (each boilerplate could include different examples):

📚 Setup and scripts

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

$ npm install

Run the project for local development.

$ npm start

Build the project for a production environment.

$ npm run build

Test your code.

$ npm test

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

$ npm run lint # (Will run scripts and styles linting with autofix)
$ npm run lint:scripts # (Will run ESLint)
$ npm run lint:styles # (Will run Stylelint)
$ npm run lint:editor # (Will run ECLint)

🎩 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 using JavaScript.

  • vue: Vuejs example using TypeScript.

  • react: React example using React and TypeScript.

  • phaser: Phaser example using TypeScript and React.

  • ts: TypeScript example using TypeScript.

  • cypress: Cypress example using Cypress and TypeScript.

  • nuxt: Nuxt example using Nuxt and TypeScript.

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

Thanks to everyone who contributed:

Contributors


Made with 🍕 by Quique Fdez Guerra

More Repositories

1

papanasi

🥯Papanasi is the Frontend UI library to use cross Frameworks. A set of components to use in Angular, Preact, Qwik, React, Solid, Svelte, Vue and Web Components
TypeScript
551
star
2

Cordova-Multiplatform-Template

Cordova template for native look in HTML5 Apps with Ionic an Angular
JavaScript
190
star
3

inversify-props

Wrapper of Inversify to inject your dependencies in the components, made with TypeScript and compatible with Vue, React and other component libraries.
TypeScript
81
star
4

Segoe-mdl2-assets-css

Unnoficial Windows 10 Segoe MDL2 Asset to CSS
CSS
23
star
5

jQuery_HandlebarsJS

jQuery plugin for use Handlebarsjs
JavaScript
21
star
6

radial.js

JavaScript library for radial menus
JavaScript
20
star
7

inversify-hooks

Wrapper of inversify-props to inject your dependencies in the components, made with TypeScript using hooks.
TypeScript
18
star
8

ScreenshotToCodeSandbox

Simply convert a screenshot image to Code Sandbox project
SCSS
15
star
9

FooCards-Nuxt

Example of a Scalable Nuxt Project with the boilerplate https://github.com/CKGrafico/Frontend-Boilerplates/tree/nuxt-dev
TypeScript
13
star
10

remote-teams

🔭 A list of websites and blog posts to help your teams in the Remote Work world.
12
star
11

jQuery-Hammer-CustomSwipe

Custom Swipe with jQuery and HammerJS
JavaScript
7
star
12

lazy-analytics

Package that helps to add Google Analytics, Adobe Analytics, Facebook Pixel, Twitter Pixel and Linkedin Pixel to your website.
TypeScript
6
star
13

Why-TypeScript

Slides, code samples and demos of "Why TypeScript" conference, all on the same project.
CSS
6
star
14

Angular-Radial-Progress

An Angular directive to have a progress bar with animation and SVG
HTML
5
star
15

Show_Loading_jQuery

Plugin para ver un loading mediante jquery
JavaScript
4
star
16

Vue-TypeScript-Demo

Demo of: Empowering Vue with TypeScript, Inversify, Vuex and some other super tools.
JavaScript
4
star
17

verb-tenses

English verb tenses table for desktop and mobile
HTML
3
star
18

Angular1.5-Sample-Project

One more example, why not?
JavaScript
3
star
19

Ejemplo_plugin_reagrupar_jQuery

Ejemplo de la charla sobre el plugin de jQuery para reagrupar elementos
JavaScript
3
star
20

talentforyourevent

¡Find talent for your next event!
Vue
3
star
21

WookMark_Example

JavaScript
3
star
22

Twitter-filter-tampermonkey

Script for twitter you can filter words or accounts with this filter using tampermonkey
JavaScript
3
star
23

HTML5-Windows8-Template

Windows8 HTML5 base project with Gulp SASS Handlebars etc
JavaScript
2
star
24

Social_sharing_Example

Ejemplo de compartir enlaces externos jQuery
2
star
25

Angular2-Environment-Server-Example

Example repository of how to get environments variables of your server (ex: Azure) from your Angular App with a simple backend
TypeScript
2
star
26

WinJS-Fluid-Template

Repo de Fluid WinJS http://visualstudiogallery.msdn.microsoft.com/88008001-cb17-4245-9486-2d210546c94e
JavaScript
2
star
27

WinjsMVR

MVR Library for work with WinJS and Windows 8
JavaScript
2
star
28

CKGrafico

Hello my friend, I'm Quique Fdez Guerra 👋
2
star
29

Bilbostack.Web

F#
1
star
30

Node-SPA-Boilerplate

A Boilerplate to work with Node and SPAs
JavaScript
1
star
31

Pebble-HelloWorld

HelloWorld for Pebble specially thanks to @cloudpebble and @KatharineBerry
C
1
star
32

Flight-time-exercices

Some exercices that I do to practise, most of them during my flights without internet
JavaScript
1
star
33

vscode-icomoon

VSCode extension to preview icomoon icons in style files
TypeScript
1
star
34

SASS-Responsive-Custom-Grid

Grid template with custom responsive classes
1
star
35

Net-SpaMetadata

Middleware to modify Metadata information in Net core SPA pages
C#
1
star
36

jQuery-LoadWhenScroll

It's simple plugin for load content when you scroll, it's diferent than other plugins because it's very simple and only 2-3Kb
JavaScript
1
star
37

WinjsTools

Helper for Winjs
JavaScript
1
star
38

WinJS-Languages

Helper for use languages in WinJS
JavaScript
1
star