{"id":15598577,"url":"https://github.com/jofaval/vue2-template","last_synced_at":"2026-04-17T07:31:41.384Z","repository":{"id":44248366,"uuid":"512020616","full_name":"jofaval/vue2-template","owner":"jofaval","description":"Starter template for Vue 2 projects","archived":false,"fork":false,"pushed_at":"2022-07-08T20:47:26.000Z","size":168,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T12:14:08.749Z","etag":null,"topics":["cicd","e2e","github-actions","javascript","template","testing","typescript","unit-testing","vue","vue2","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jofaval.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2022-07-08T20:37:20.000Z","updated_at":"2022-07-08T20:51:55.000Z","dependencies_parsed_at":"2022-08-29T17:51:29.460Z","dependency_job_id":null,"html_url":"https://github.com/jofaval/vue2-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/jofaval/vue2-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Fvue2-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Fvue2-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Fvue2-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Fvue2-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jofaval","download_url":"https://codeload.github.com/jofaval/vue2-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Fvue2-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31919894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cicd","e2e","github-actions","javascript","template","testing","typescript","unit-testing","vue","vue2","vuejs"],"created_at":"2024-10-03T01:40:41.121Z","updated_at":"2026-04-17T07:31:41.361Z","avatar_url":"https://github.com/jofaval.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KataIX - Posts \u0026 Users with Vue2 + Typescript #\n\n![Deployment](https://github.com/jofaval/vue2-template/actions/workflows/deployment.yml/badge.svg)\u0026nbsp;![Validation](https://github.com/jofaval/vue2-template/actions/workflows/validation.yml/badge.svg)\n\nStraight from: [https://jofaval.github.io/gh-btc-vue-final/](https://jofaval.github.io/gh-btc-vue-final/)\n\n## Contents\n\n1. [🖊️ Description](#-description)\n1. [📓 Documentation](#-documentation)\n1. [💡 Objective](#-objective)\n1. [✨ Features](#-features)\n1. [🎨 Design Pattern](#-design-pattern)\n1. [📚 Tech stack](#-tech-stack)\n    1. [📱 Frontend](#-frontend)\n    1. [🧼 Clean code](#-clean-code)\n    1. [🎬 CI/CD](#-cicd)\n1. [🙌 Disclaimer!!](#-disclaimer)\n1. [⚙️ How to set it up?](#-how-to-set-it-up)\n    1. [📋 Pre-requisites](#-pre-requisites)\n    1. [🪛 Install](#-install)\n    1. [🛠️ Use](#-use)\n1. [🌐 How to deploy?](#-how-to-deploy)\n    1. [⚠️ Notice](#-notice)\n    1. [☁️ Using the CI/CD](#-using-the-cicd)\n1. [☑️ Testing](#-testing)\n    1. [🗒️ How to execute all the tests in the system?](#-how-to-execute-all-the-tests-in-the-system)\n    1. [✔️ How to create a new test bench?](#-how-to-create-a-new-test-bench)\n    1. [✔️ How to create a new test?](#-how-to-create-a-new-test)\n1. [🔖 Usage](#-usage)\n    1. [🛠️ Compiles and hot-reloads for development](#-compiles-and-hot-reloads-for-development)\n    1. [📦 Compiles and minifies for production](#-compiles-and-minifies-for-production)\n    1. [☑️ Run your unit tests](#-run-your-unit-tests)\n    1. [🖥️ Run your end-to-end tests](#-run-your-end-to-end-tests)\n    1. [✍️ Lints and fixes files](#-lints-and-fixes-files)\n    1. [🧰 Customize configuration](#-customize-configuration)\n1. [🧐 Improvements](#-improvements)\n1. [🥳 Conclusions](#-conclusions)\n1. [😁 Credits](#-credits)\n\n## 🖊️ Description\n[⬆ Back to top](#contents)\n\nIt's the final project from a Bootcamp for Frontend in Vue. The idea is to develop a fully fleshed webapp using vue and other libraries that we saw along the way. As to provide content, [jsonplaceholder](https://jsonplaceholder.typicode.com/posts) will be used.\n\n- Deployed at [https://jofaval.github.io/gh-btc-vue-final/](https://jofaval.github.io/gh-btc-vue-final/), it's responsive and also supports PWAs.\n- Managed using Github Projects (beta), [BTC Geekshubs - Frontend in Vue - 2022/06](https://github.com/users/jofaval/projects/2) using a template (\"Features\" template) with a couple of tweaks here and there.\n- There's even a wiki, if the format suits you better [https://github.com/jofaval/gh-btc-vue-final/wiki](https://github.com/jofaval/gh-btc-vue-final/wiki).\n- It's licensed using the [MIT License](./LICENSE).\n\nThe changes are registered at the [CHANGELOG](./CHANGELOG.md), even though is not minute perfect, it's an orientation of the project's progress. I'm pretty sure there's plenty of little details that I've left in the drawer.\n\n## 📓 Documentation\n[⬆ Back to top](#contents)\n\nFor the docs please refer to the `/docs` folder, or with [this link](./docs/README.md).\n\n## 💡 Objective\n[⬆ Back to top](#contents)\n\nThe main objective is to develop a webapp using vue. And also to develop a frontend project from start to finish.\n\n## ✨ Features\n[⬆ Back to top](#contents)\n\n- **Feature**\n  - Description\n\nThe improvements are touched upon later on, [🧐 Improvements](#-improvements).\n\n## 🎨 Design Pattern\n[⬆ Back to top](#contents)\n\n1. Functionality is always the first priority, there's nothing to style without features. It's not a design concept, but it's worth keeping in mind.\n2. UX goes before the UI, a simple, native, uggly button can do if it's where it's supposed to be. UX may be the most important part of a feature (visually-wise).\n3. UI goes last, it's usually a matter of browsing to get a moodboard (even mentally) of what you're looking for.\n\n## 📚 Tech stack\n[⬆ Back to top](#contents)\n\nMade with vue-cli, first install the vue/cli package:\n\n```shell\nnpm install -g @vue/cli\n# OR\nyarn global add @vue/cli\n```\n\nSo that you can later create the project, or, for our case scenario, modify it.\n\n```shell\nvue create hello-world\n```\n\n```shell\nvue add your-fav-package\n```\n\n### 📱 Frontend\n[⬆ Back to the section](#-tech-stack)\n\n- **TypeScript**\n  - The static typed version of JavaScript, good for preventing errors before execution, and easier usage (since you should always know exactly what you're working with!)\n- **vue.js**\n  - One of the most used frontend framework, gaining more and more traction by the minute and for good reasons.\n- **Vue's ecosystem**\n  - **vue-router**\n    - an intuitive approach to routing that allows and \"enforces\" for array-usage for routing.\n  - **vuex**\n    - a state management library that's being slowly replaced but pinia, still, it's a good state mangement library.\n- **bootstrap-vue**\n  - Bootstrap components and it's design pattern and implementations.\n**jest + cypress**\n  - The full package for a complete frontend testing experience, unit + e2e/integration.\n\n### 🧼 Clean code\n[⬆ Back to the section](#-tech-stack)\n\n- **eslint (airbnb) + prettier**\n  - Having a good style in the code is crucial for a scalable and maintanable codebase, and to automate the process as to avoid mistakes, it's almost a must nowadays.\n\n### 🎬 CI/CD\n[⬆ Back to the section](#-tech-stack)\n\n- **Github Actions**\n  - A free CI/CD, and easy to configure for any public github repository, it's a new trend and with tons of community contributions.\n\n## 🙌 Disclaimer!!\n[⬆ Back to top](#contents)\n\n- Github Pages doesn't retain the vue-router information on my application, only the homepage loads properly.\n- I'm no QA, the testing side of the application has a lot of room to grow and explore, of that I'm sure.\n\n## ⚙️ How to set it up?\n[⬆ Back to top](#contents)\n\nYou may want to check it out locally, if that were to be the case, this section will clarify how to do just that.\n\n### 📋 Pre-requisites\n[⬆ Back to the section](#-how-to-set-it-up)\n\n- `node.js` \u003e= 15.x.x compatibility.\n\n### 🪛 Install\n[⬆ Back to the section](#-how-to-set-it-up)\n\nIn the folder that you may want the project, execute the following command (on Git BASH if you're running a Windows).\n\nThis will clone (download) the repository locally on your device\n\n```shell\ngit clone https://github.com/jofaval/gh-btc-vue-final.git\n```\n\nThen you'll need to install the dependencies (if node.js is not installed, please do so before this step at, [node.js](https://nodejs.org/es/download/)). I'm using the version `15.14.0`, which you can find at [15.14.0](https://nodejs.org/download/release/v15.14.0/)\n\n```shell\ncd gh-btc-vue-final\nnpm install\n```\n\n### 🛠️ Use\n[⬆ Back to the section](#-how-to-set-it-up)\n\nFor the usage take a look at the [🔖 Usage](#-usage)\n\n## 🌐 How to deploy?\n[⬆ Back to top](#contents)\n\nDeployment is the process in which, the project gets ready for ✨production✨ and it's available for your target audiance.\n\n### ⚠️ Notice\n[⬆ Back to the section](#-how-to-deploy)\n\n- The `public/` folder must always be the main one to use.\n- If there's any media file that you want to add, use `src/assets/`.\n\n### ☁️ Using the CI/CD\n[⬆ Back to the section](#-how-to-deploy)\n\nMerge the changes to `main`.\n\n## ☑️ Testing\n[⬆ Back to top](#contents)\n\nAll the tests files will end in `.ts`, since we'll be using TypeScript.\n\n- Unit tests files will end in `.spec.ts`\n- End to end tests files will end in `.e2e.ts`\n\n### 🗒️ How to execute all the tests in the system?\n[⬆ Back to the section](#-testing)\n\nYou can execute the following command, but I wouldn't recomend it since it will run unit tests and then e2e tests, I prefer to execute them on their own.\n\n```bash\nnpm test\n```\n\nYou can check out the [🔖 Usage](#-usage) section for more details about it.\n\n### ✔️ How to create a new test bench?\n[⬆ Back to the section](#-testing)\n\nCreate a new `describe` call with the `name` and `lambda` function\n\n```javascript\ndescribe('Customer', () =\u003e {\n});\n```\n\n### ✔️ How to create a new test?\n[⬆ Back to the section](#-testing)\n\nCreate a new `it` call with all the asserts you want\n\n```javascript\ndescribe('Customer', () =\u003e {\n  it('should display all the information', () =\u003e {\n    expect(\u003cCustomer /\u003e).not.toBe(null);\n  })\n});\n```\n\n## 🔖 Usage\n[⬆ Back to top](#contents)\n\nSet up the project by executing the following command at root level, which you should have already done if you already did the [⚙️ How to set it up?](#-how-to-set-it-up)\n\n```bash\nnpm install\n```\n\n### 🛠️ Compiles and hot-reloads for development\n[⬆ Back to the section](#-usage)\n\n```bash\nnpm run serve\n```\n\nRuns the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\n### 📦 Compiles and minifies for production\n[⬆ Back to the section](#-usage)\n\n```bash\nnpm run build\n```\n\nUsed to build the solution into an optimized and compressed version\n\n### ☑️ Run your unit tests\n[⬆ Back to the section](#-usage)\n\n```bash\nnpm run test:unit\n```\n\nRuns all the unit test in the system and returns the information.\n\n### 🖥️ Run your end-to-end tests\n[⬆ Back to the section](#-usage)\n\n```bash\nnpm run test:e2e\n```\n\nRuns all the e2e test in the system and returns the information.\n\n### ✍️ Lints and fixes files\n[⬆ Back to the section](#-usage)\n\n```bash\nnpm run lint\n```\n\nLints all of the files so they're quality code\n\n### 🧰 Customize configuration\n[⬆ Back to the section](#-usage)\n\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n## 🧐 Improvements\n[⬆ Back to top](#contents)\n\nSome improvements that could be made to either the applicaion or the architecture that, either by time, or, mostly, level of experience with the stack, won't be developed:\n\n- Describe the improvement(s)\n\n## 🥳 Conclusions\n[⬆ Back to top](#contents)\n\nExplain your conclusions about the project, if it's meant to have some conclusions.\n\n## 😁 Credits\n[⬆ Back to top](#contents)\n\n- Whoever you need to credit, should, at least, go here","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjofaval%2Fvue2-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjofaval%2Fvue2-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjofaval%2Fvue2-template/lists"}