{"id":13554325,"url":"https://github.com/CKGrafico/Frontend-Boilerplates","last_synced_at":"2025-04-03T06:31:33.690Z","repository":{"id":16065447,"uuid":"78850218","full_name":"CKGrafico/Frontend-Boilerplates","owner":"CKGrafico","description":"Collection of Boilerplates with ES6, Vue, React, Nuxt, TypeScript, SCSS, Nodejs. Using good practices and file structures to inspire your real projects.","archived":false,"fork":false,"pushed_at":"2023-10-03T17:45:43.000Z","size":17888,"stargazers_count":378,"open_issues_count":16,"forks_count":76,"subscribers_count":14,"default_branch":"basic","last_synced_at":"2025-03-29T15:06:18.656Z","etag":null,"topics":["bem","boilerplate","cypress","frontend","nuxt","react","scss","typescript","vue","webpack"],"latest_commit_sha":null,"homepage":"https://boilerplates.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CKGrafico.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["ckgrafico"]}},"created_at":"2017-01-13T13:09:39.000Z","updated_at":"2025-03-01T19:02:49.000Z","dependencies_parsed_at":"2024-01-14T17:05:54.504Z","dependency_job_id":"d0b92465-7d60-43b7-8059-8b5ea96af99c","html_url":"https://github.com/CKGrafico/Frontend-Boilerplates","commit_stats":null,"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2FFrontend-Boilerplates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2FFrontend-Boilerplates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2FFrontend-Boilerplates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2FFrontend-Boilerplates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CKGrafico","download_url":"https://codeload.github.com/CKGrafico/Frontend-Boilerplates/tar.gz/refs/heads/basic","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246948040,"owners_count":20859366,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem","boilerplate","cypress","frontend","nuxt","react","scss","typescript","vue","webpack"],"created_at":"2024-08-01T12:02:45.026Z","updated_at":"2025-04-03T06:31:30.291Z","avatar_url":"https://github.com/CKGrafico.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ckgrafico","https://github.com/sponsors/CKGrafico"],"categories":["JavaScript","frontend"],"sub_categories":[],"readme":"\u003ca id=\"logos\" class=\"anchor\" aria-hidden=\"true\" href=\"#logos\"\u003e\u003c/a\u003e\u003cbr/\u003e\n\n\u003ch1 align=\"center\"\u003e\n  \u003cp align=\"center\"\u003eFrontend Boilerplates\u003c/p\u003e\n  \u003ca href=\"https://boilerplates.js.org\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/logo/logo.png\"  width=\"150\" alt=\"Boilerplates\"\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n### 🔍 Overview\n\nThis 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](https://github.com/CKGrafico/Frontend-Boilerplates/tree/basic#logos), [TypeScript](https://github.com/CKGrafico/Frontend-Boilerplates/tree/ts#logos), [Vue](https://github.com/CKGrafico/Frontend-Boilerplates/tree/vue#logos) or [React](https://github.com/CKGrafico/Frontend-Boilerplates/tree/react#logos). **Click on the logos** to navigate through them.\n\n\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/tree/basic#logos\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/spa.png\" alt=\"JavaScript Boilerplate\" width=\"150\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/tree/vue#logos\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/vue-d.png\" alt=\"Vue Boilerplate\" width=\"150\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/tree/react#logos\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/react-d.png\" alt=\"React Boilerplate\" width=\"150\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/tree/ts#logos\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/ts-d.png\" alt=\"TypeScript Boilerplate\" width=\"150\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/tree/phaser#logos\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/phaser-d.png\" alt=\"Phaser Boilerplate\" width=\"150\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/tree/cypress#logos\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/cypress-d.png\" alt=\"Cypress Boilerplate\" width=\"150\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/tree/nuxt#logos\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/nuxt-d.png\" alt=\"Nuxt Boilerplate\" width=\"150\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/tree/node-ts#logos\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/nodets-d.png\" alt=\"Node and TS Boilerplate\" width=\"150\"\u003e\u003c/a\u003e\n\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/blob/basic/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/CKGrafico/Frontend-Boilerplates.svg?logo=creative%20commons\u0026color=8FBFA9\u0026logoColor=FFFFFF\" alt=\"GitHub license\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/network\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/CKGrafico/Frontend-Boilerplates.svg?logo=verizon\u0026color=4D8C6F\" alt=\"GitHub stars\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/network\"\u003e\u003cimg src=\"https://img.shields.io/github/forks/CKGrafico/Frontend-Boilerplates.svg?logo=github\u0026color=38A3A5\" alt=\"GitHub forks\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/github/CKGrafico/Frontend-Boilerplates/tree/basic\"\u003e\u003cimg src=\"https://img.shields.io/badge/CodeSandbox-template?logo=codesandbox\u0026color=0971f1\" alt=\"Open in CodeSandbox\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/CKGrafico\"\u003e\u003cimg src=\"https://img.shields.io/badge/Tweet-project?logo=twitter\u0026color=00acee\u0026logoColor=FFFFFF\" alt=\"Sponsor\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/sponsors/CKGrafico\"\u003e\u003cimg src=\"https://img.shields.io/badge/Support-project?logo=ko-fi\u0026color=ea4aaa\u0026logoColor=FFFFFF\" alt=\"Sponsor\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/CKGrafico/Frontend-Boilerplates\"\u003e\u003cimg src=\"https://travis-ci.org/CKGrafico/Frontend-Boilerplates.svg?logo=travis\u0026branch=basic\" alt=\"Build Status\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/CKGrafico/Frontend-Boilerplates.svg?logo=codeigniter\u0026logoColor=FFFFFF\" alt=\"GitHub issues\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/releases\"\u003e\u003cimg src=\"https://img.shields.io/badge/Update%20status-Frequently-009C7C?logo=git\u0026logoColor=FFFFFF\" alt=\"Update Status\" /\u003e\u003c/a\u003e\n\n\u003c/p\u003e\n\n### \u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/spa.png\" align=\"left\" width=\"35\" title=\"Boilerplate\" /\u003e Basic SPA - Boilerplate Features\n\nThese 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.\n\n- **JavaScript:** Written in vanilla JavaScript.\n- **PostCSS:** Be ready for the next CSS features.\n- **Bootstrap:** Build fast and responsive sites easily.\n- **Autoprefixer:** Automatically add vendor prefixes to these Styles.\n- **Webpack:** Automation of tasks and compilation of the project.\n- **Babel:** Transpiler to different versions of EcmaScript.\n- **Browserlist:** To configure which browsers will support.\n- **Jest:** Framework for testing.\n- **ESLint:** Linting for Scripts.\n- **StyleLint:** Linting for Styles.\n- **Prettier:** Formatter for Scripts and Styles.\n- **EditorConfig:** Formatter for files in general.\n- **Husky:** Used for attaching to git hooks and run scripts.\n\n### 🥑 Demo (In progress)\n\nOnce you download the project you will find a complete demo of how it works, including (each boilerplate could include different examples):\n\n- **Page:** Example of how to create a page.\n- **File structure:** Project structure [following \"feature\" convention](https://medium.com/@CKGrafico/taking-decisions-to-structure-big-projects-with-hooks-stores-services-and-more-a703c7874480).\n- **Styles structure:** Structure, mixins and variables using [non-strict BEM](https://medium.com/@CKGrafico/choosing-how-to-structure-our-css-components-7af3c7ea4f27).\n- **File names:** File names structure [using \"type name\" convention](https://medium.com/@CKGrafico/taking-decisions-to-structure-big-projects-with-hooks-stores-services-and-more-a703c7874480).\n\n### 📚 Setup and scripts\n\n\u003e Before start [download](https://github.com/CKGrafico/Frontend-Boilerplates/archive/basic.zip) or clone the boilerplate.\n\u003e **Install** all the dependencies.\n\n```shell\n$ npm install\n```\n\n**Run** the project for local development.\n\n```shell\n$ npm start\n```\n\n**Build** the project for a production environment.\n\n```shell\n$ npm run build\n```\n\n**Test** your code.\n\n```shell\n$ npm test\n```\n\nThe **linting** is configured with [**husky**](https://github.com/typicode/husky) and will run before commit, but you can run it.\n\n```shell\n$ npm run lint # (Will run scripts and styles linting with autofix)\n$ npm run lint:scripts # (Will run ESLint)\n$ npm run lint:styles # (Will run Stylelint)\n$ npm run lint:editor # (Will run ECLint)\n```\n\n### 🎩 Contributors\n\nThis project is possible thanks to the contributors.\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://CKgrafico.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/2048511?v=4\" width=\"150px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eQuique Fdez Guerra\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#platform-ckgrafico\" title=\"Packaging/porting to new platform\"\u003e📦\u003c/a\u003e \u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/commits?author=ckgrafico\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#tool-ckgrafico\" title=\"Tools\"\u003e🔧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/spertusatti\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/25738279?v=4\" width=\"150px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSabrina Pertusatti\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/commits?author=spertusatti\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/victor-gamez/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/14943217?v=4\" width=\"150px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVíctor Gámez\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/commits?author=VGamezz19\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://kryzh.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/2675648?v=4\" width=\"150px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlex Kryzhanovskyy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/commits?author=AlexKryzh\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/jcarloslr10\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/15978818?v=4\" width=\"150px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJuan Carlos\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/CKGrafico/Frontend-Boilerplates/commits?author=jcarloslr10\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n### ⛳️ Check all the boilerplates\n\n- **[basic:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/basic#logos)** **Basic SPA** example using JavaScript. \u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/spa.png\" align=\"right\" width=\"35\" title=\"SPA\"\u003e\n\n- **[vue:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/vue#logos)** **Vuejs** example using TypeScript. \u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/vue.png\" align=\"right\" width=\"35\" title=\"Vue\"\u003e\n\n- **[react:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/react#logos)** **React** example using React and TypeScript. \u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/react.png\" align=\"right\" width=\"35\" title=\"React\"\u003e\n\n- **[phaser:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/phaser#logos)** **Phaser** example using TypeScript and React. \u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/phaser.png\" align=\"right\" width=\"35\" title=\"Phaser\"\u003e\n\n- **[ts:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/ts#logos)** **TypeScript** example using TypeScript. \u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/ts.png\" align=\"right\" width=\"35\" title=\"TypeScript\"\u003e\n\n- **[cypress:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/cypress#logos)** **Cypress** example using Cypress and TypeScript. \u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/cypress.png\" align=\"right\" width=\"35\" title=\"Cypress\"\u003e\n\n- **[nuxt:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/nuxt#logos)** **Nuxt** example using Nuxt and TypeScript. \u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/nuxt.png\" align=\"right\" width=\"35\" title=\"Nuxt\"\u003e\n\n- **[node-ts:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/node-ts#logos)** **Backend and TypeScript** example with SCSS and Nodejs. \u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/Frontend-Boilerplates/docs/resources/techs/nodets.png\" align=\"right\" width=\"35\" title=\"Node with TypeScript\"\u003e\n- \n### Thanks to everyone who contributed:\n[![Contributors](https://contrib.rocks/image?repo=ckgrafico/frontend-boilerplates)](https://github.com/CKGrafico/frontend-boilerplates/graphs/contributors)\n\n---\nMade with 🍕 by [Quique Fdez Guerra](https://twitter.com/ckgrafico)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCKGrafico%2FFrontend-Boilerplates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCKGrafico%2FFrontend-Boilerplates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCKGrafico%2FFrontend-Boilerplates/lists"}