{"id":13417076,"url":"https://github.com/Drumpy/vrttv-boilerplate","last_synced_at":"2025-03-15T01:32:55.677Z","repository":{"id":47899218,"uuid":"516214105","full_name":"Drumpy/vrttv-boilerplate","owner":"Drumpy","description":"Avoid setting up a project from scratch. Start using VRTTV 🎉","archived":false,"fork":false,"pushed_at":"2022-07-28T22:21:34.000Z","size":1543,"stargazers_count":43,"open_issues_count":1,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-07-31T22:37:48.528Z","etag":null,"topics":["boilerplate","boilerplate-front-end","boilerplate-template","react","tailwindcss"],"latest_commit_sha":null,"homepage":"https://vrttv-boilerplate.vercel.app/","language":"TypeScript","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/Drumpy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-21T03:41:53.000Z","updated_at":"2024-04-28T15:30:43.000Z","dependencies_parsed_at":"2022-08-23T08:02:07.250Z","dependency_job_id":null,"html_url":"https://github.com/Drumpy/vrttv-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drumpy%2Fvrttv-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drumpy%2Fvrttv-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drumpy%2Fvrttv-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drumpy%2Fvrttv-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Drumpy","download_url":"https://codeload.github.com/Drumpy/vrttv-boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243671639,"owners_count":20328658,"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":["boilerplate","boilerplate-front-end","boilerplate-template","react","tailwindcss"],"created_at":"2024-07-30T22:00:32.238Z","updated_at":"2025-03-15T01:32:50.608Z","avatar_url":"https://github.com/Drumpy.png","language":"TypeScript","funding_links":[],"categories":["Get Started"],"sub_categories":["Templates"],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\u003c!--\n*** I'm using markdown \"reference style\" links for readability.\n*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).\n*** See the bottom of this document for the declaration of the reference variables\n*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Drumpy/vrttv-boilerplate/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/Drumpy/vrttv-boilerplate.svg?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/Drumpy/vrttv-boilerplate/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/Drumpy/vrttv-boilerplate.svg?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg src=\"https://i.ibb.co/mqPXzct/VRTTV-Banner.png\" alt=\"VRTTV Banner\"\u003e\n  \u003c/a\u003e\n\n  \u003ch2 align=\"center\"\u003eVRTTV Boilerplate\u003c/h2\u003e\n  \u003cp align=\"center\"\u003e\n    Avoid setting up a project from scratch. Start using VRTTV 🎉\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://vrttv-boilerplate.vercel.app/\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/Drumpy/vrttv-boilerplate/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/Drumpy/vrttv-boilerplate/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n# 🤔 What’s this?\n\nAre you tired of always creating the same structure from scratch for your projects? Me too. 🥱\n\nThis is my _go-to_ when I start a new project on front-end development.\n\nIf you found it useful somehow, I would be grateful if you could leave a star in the project's GitHub repository 💚\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n# 🔮 What’s inside?\n\n- ⚡ [Vite](https://vitejs.dev/) - Next generation frontend tooling.\n  - 📦 [Imagemin](https://github.com/vbenjs/vite-plugin-imagemin) - Plugin for compressing image assets.\n  - 📦 [Vite Plugin HTML](https://github.com/vbenjs/vite-plugin-html) - Plugin for processing HTML with minify.\n- 🌟 [React](https://reactjs.org/) - A JavaScript library for building user interfaces.\n- 🔀 [React Router](https://reactrouter.com/docs/en/v6/getting-started/overview) - Declarative routing for React apps at any scale.\n- 💜 [TypeScript](https://www.typescriptlang.org/) - A superset of JavaScript.\n- 🎨 [Tailwind](https://tailwindcss.com/) - A utility-first CSS framework.\n- ⚙️ [Babel](https://babeljs.io/) with [preset-env](https://babeljs.io/docs/en/babel-preset-env) - The compiler for next generation JavaScript.\n- 💅 [Prettier](https://prettier.io/) - Opinionated Code Formatter.\n- 🔍 [ESLint](https://eslint.org/) - Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.\n  - 📦 [Simple Import Sort](https://github.com/lydell/eslint-plugin-simple-import-sort/) - Easy autofixable import sorting.\n  - 📦 [Import Plugin](https://github.com/benmosher/eslint-plugin-import/) - Rules that help validate proper imports.\n  - 📦 [Tailwind Plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/) - Plugin for Tailwind CSS usage.\n  - And a few other ES2015+ related rules.\n- 🐶 [Husky](https://github.com/typicode/husky) - Git hooks made easy.\n  - 🪝 commit-msg\n  - 🪝 pre-commit\n- 🚫 [Lint Staged](https://github.com/okonet/lint-staged) - Run linters on git staged files.\n- ✍️ [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) with 🎉 [Gitmoji](https://gitmoji.dev/) - A specification for adding human and machine readable meaning to commit messages.\n- 🚦 [GitHub Actions](https://github.com/features/actions) - Automate your workflow on GitHub.\n- 🔺 [Vercel](https://vercel.com/) - Deploy your application on Vercel.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n# 🚀 Getting Started\n\nThese are the necessary steps to use 💯 of the potential of this boilerplate.\n\n## 🚨 Prerequisites\n\nYou need this technologies :\n\n- [Node 16\u003e=](https://nodejs.org/en/)\n- [Git](https://git-scm.com/downloads/)\n- [Vercel Account](https://vercel.com/signup)\n- [Vercel CLI](https://vercel.com/cli)\n- [Gitmoji CLI](https://github.com/carloscuesta/gitmoji-cli#install)\n\n## 💻 Run Locally\n\n1. Option 1: Generate a new repository with this template\n\n- [Use this template](https://github.com/Drumpy/vrttv-boilerplate/generate)\n\n1. Option 2: Copy just the project scaffolding.\n\n```bash\nnpx --yes degit Drumpy/vrttv-boilerplate your-folder-name\n```\n\n1. Option 3: Clone the entire repository.\n\n```bash\ngit clone https://github.com/Drumpy/vrttv-boilerplate\n```\n\n2. Go to the project directory.\n\n```bash\ncd vrttv-boilerplate\n```\n\n3. Install dependencies.\n\n```bash\nnpm install\n```\n\n4. Start the server.\n\n```bash\nnpm run dev\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## ⚙️ Setup GitHub Actions\n\n1. Run Vercel CLI in your project folder. After completed, a folder **.vercel** is created in your root directory.\n\n```bash\nvercel --confirm\n```\n\n2. Go to actions secrets in your GitHub Repository.\n\n```bash\nhttps://github.com/your-username/your-repo-name/settings/secrets/actions/new\n```\n\n3. Add this three tokens.\n\n```bash\n# Generate this in https://vercel.com/account/tokens\nVERCEL_TOKEN\n```\n\n```bash\n# It is located in 'project.json' inside the '.vercel' folder\nORG_ID\n```\n\n```bash\n# It is located in 'project.json' inside the '.vercel' folder\nPROJECT_ID\n```\n\n### 💡 **Tip!**\n\nYou can skip GitHub Action execution by adding **[skip ci]** to your commit message.\n\n```bash\nstyle: change the colors of the theme [skip ci]\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🐕‍🦺 Setup Husky\n\n1. Run Husky command.\n\n```bash\nnpx --yes husky install\n```\n\n2. Use Gitmoji CLI to commit changes.\n\n```bash\ngitmoji -c\n```\n\n3. Write your commits following the rules of [Conventional Commit](https://github.com/Drumpy/vrttv-boilerplate#-conventional-commit-rules). Examples:\n\n```bash\nfeat: added navbar component\n```\n\n```bash\nfix(navbar): fixed all the broken links\n```\n\n### 👇 Creating a commit as an example\n\n\u003cimg src=\"https://i.ibb.co/1dBhQ51/Windows-Terminal-wmp-Pxe1-Q3u.gif\"/\u003e\n\n### 📜 Conventional Commit Rules\n\nUse this table as a reference when writing commits. Husky will be in charge of checking that the rules will be followed.\n\n| Commit Type | Title                    | Description                                                                                                 | Emoji |\n| ----------- | ------------------------ | ----------------------------------------------------------------------------------------------------------- | :---: |\n| `feat`      | Features                 | A new feature                                                                                               |  ✨   |\n| `fix`       | Bug Fixes                | A bug fix                                                                                                   |  🐛   |\n| `docs`      | Documentation            | Documentation only changes                                                                                  |  📝   |\n| `style`     | Styles                   | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)      |  🎨   |\n| `refactor`  | Code Refactoring         | A code change that neither fixes a bug nor adds a feature                                                   |  ♻️   |\n| `perf`      | Performance Improvements | A code change that improves performance                                                                     |  ⚡   |\n| `test`      | Tests                    | Adding missing tests or correcting existing tests                                                           |  ✅   |\n| `build`     | Builds                   | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)         |  🚨   |\n| `ci`        | Continuous Integrations  | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) |  👷   |\n| `chore`     | Chores                   | Other changes that don't modify src or test files                                                           |  ➕   |\n| `revert`    | Reverts                  | Reverts a previous commit                                                                                   |  ⏪   |\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GitHhub Actions Pipeline --\u003e\n\n# ♾️ GitHub Actions Deployment Pipeline\n\n- 🛑 Cancel Previous Redundant Builds\n- 📝 Assign PR to creator\n- 💅🏼 Linting\n- 🔗 Deploy to Vercel\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTACT --\u003e\n\n# 📧 Contact\n\nDiego Do Santos - ddosantos@hotmail.com\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[contributors-shield]: https://img.shields.io/github/contributors/Drumpy/vite-boilerplate.svg?style=for-the-badge\n[contributors-url]: https://github.com/Drumpy/vrttv-boilerplate/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/Drumpy/vrttv-boilerplate.svg?style=for-the-badge\n[product-screenshot]: https://i.ibb.co/zf7gjMR/Card-Outline.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDrumpy%2Fvrttv-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDrumpy%2Fvrttv-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDrumpy%2Fvrttv-boilerplate/lists"}