{"id":21246781,"url":"https://github.com/apfirebolt/anime-dashboard-vue","last_synced_at":"2026-05-09T01:37:55.210Z","repository":{"id":231653674,"uuid":"782269579","full_name":"Apfirebolt/anime-dashboard-vue","owner":"Apfirebolt","description":"A dashboard application created in Vue which shows anime related information from Jikan API","archived":false,"fork":false,"pushed_at":"2025-12-14T02:31:07.000Z","size":1357,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-16T01:54:10.345Z","etag":null,"topics":["anime-dashboard","headlessui","jikan-api","tailwindcss","vue","vue3"],"latest_commit_sha":null,"homepage":"https://anime-dashboard-vue.vercel.app","language":"Vue","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/Apfirebolt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-05T00:50:25.000Z","updated_at":"2025-12-14T02:31:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"e89ee7d6-aec7-4d70-97d6-597f568f4f9b","html_url":"https://github.com/Apfirebolt/anime-dashboard-vue","commit_stats":null,"previous_names":["apfirebolt/anime-dashboard-vue"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Apfirebolt/anime-dashboard-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fanime-dashboard-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fanime-dashboard-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fanime-dashboard-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fanime-dashboard-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Apfirebolt","download_url":"https://codeload.github.com/Apfirebolt/anime-dashboard-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fanime-dashboard-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32804313,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["anime-dashboard","headlessui","jikan-api","tailwindcss","vue","vue3"],"created_at":"2024-11-21T02:05:51.358Z","updated_at":"2026-05-09T01:37:55.198Z","avatar_url":"https://github.com/Apfirebolt.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Anime Dashboard - Vue, Vite + Tailwind\n\n**Anime Dashboard is an application to get anime related info using the unofficial [MyAnimeList](https://myanimelist.net/) API. Please visit the Jikan unofficial API link [Jikan](https://jikan.moe/).**\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://vuejs.org\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg width=\"100\" src=\"https://raw.githubusercontent.com/Apfirebolt/anime-dashboard-vue/main/src/assets/logo.png\" alt=\"Vue logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n## Technologies Used\n\nA front-end app created in Vue using Tailwind css and Headless UI\n\n![Vite](https://img.shields.io/badge/-Vite-%23F766?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\n![JavaScript](https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black)\n![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-%2338B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n![Vue JS](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge\u0026logo=vuedotjs\u0026logoColor=4FC08D)\n![Cypress](https://img.shields.io/badge/-Cypress-%23green?style=for-the-badge\u0026logo=cypress\u0026logoColor=white)\n\n\n## Getting started\n\nThe project uses Vite build tool for lighting-fast modern single-page application development. It is expected to have Node installed on your system. Then, run the conventional npm commands to see the project in action.\n\nThis project is available at https://anime-dashboard-vue.vercel.app/character for the time being.\n\n```\nnpm install\nnpm run build\nnpm run dev\n```\n\n## Recommended IDE Setup\n\n- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur\n\n## Ecosystem\n\n| Package        | Purpose                |\n| -------------- | ---------------------- |\n| Vue-router     | For routing in Vue     |\n| Pinia          | For Vue store          |\n| Tailwind CSS   | For CSS Styles         |\n| Headless icons | For icons to be used   |\n| Express        | Serving Vue build      |\n| Vee-validate   | For validations        |\n| Headless UI    | For dynamic components |\n\n## Project Screenshots\n\nOnly contains home page with features like searching for an anime and gets the data in paginated form.\n\n![Screenshot](./screenshots/1.png)\n\nPagination is available with the API response, 25 items are fetched at max in one go.\n\n![Screenshot](./screenshots/2.png)\n\n## Automated Tests with Cypress\n\nConfigure the cypress config file as per Vue and Vite. After configuration is completed a cypress folder would be generated inside of which you can have your component as well as integration tests\n\n```\nnpx cypress open\n```\n\nHere's the sample of config file generated after you run cypress for the first time\n\n```\nimport { defineConfig } from \"cypress\";\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: \"vue\",\n      bundler: \"vite\",\n    },\n  },\n});\n```\n\nFor adding vue specific tests, do install cypress/vue package to virtually mount the components and test them.\n\n## ESLint Installation\n\n1. Install ESLint and Eslint-Plugin-Vue\n\n```\nnpm install eslint --save-dev\nnpm install --save-dev eslint eslint-plugin-vue\n```\n\n2. Manually create the eslint config file 'eslint.config.js'\n\n```\nimport pluginVue from 'eslint-plugin-vue'\nexport default [\n    ...pluginVue.configs['flat/recommended'],\n    // ...pluginVue.configs['flat/vue2-recommended'], // Use this if you are using Vue.js 2.x.\n    {\n        rules: {\n            // override/add rules settings here, such as:\n            // 'vue/no-unused-vars': 'error'\n            'no-console': 'error' // Enable console statements.\n        }\n    }\n]\n```\n3. Add Linting and fixing scripts in the package.json file \n\n```\n\"lint\": \"eslint .\",\n\"lint:fix\": \"eslint --fix .\",\n```\n\n3. At this point of time, linting should have been added to your project. Add Husky and pre-commit hooks\n\n```\nnpx husky-init \n```\n\nNpx is a tool included with npm that allows you to execute packages from the npm registry without installing them globally.\nYou can achieve the same functionality by installing Husky explicitly with npm install husky --save-dev followed by npx husky install to initialize the hooks. However, npx husky-init is a convenient one-step approach.\n\nAfter running npx husky-init, you'll need to configure the pre-commit hook behavior further. You can define which scripts or commands to run before commit using your project's configuration files (like .eslintrc.js for ESLint).\n\n## Checking Updates\n\nCheck if there are updates available for NPM packages used in this project.\n\n---\n\n```\nnpx npm-check-updates\n\nnpx npm-check-updates -u\n\nnpm i\n```\n\n## Docker Deployment\n\n1. Build the image from the given Dockerfile, give it a intuitive name 'anime-dashboard'.\n\n```\ndocker build -t anime-dashboard . \n```\n\n2. Run the Docker container on port 4200 which is the default port used by Angular Applications.\n\n```\ndocker run -p 4200:80 --name dashboard anime-dashboard\n```\n\n## Issues\n\nNo issues as of now, issues would be added here to be addressed later.\n\n## Changelog\n\n- April 2024 : Initial Release with basic features from anime search page.\n- March 2025 : Added Masonry layout using the following snippet\n\n``` Vue\n\u003cdiv v-if=\"characterList \u0026\u0026 characterList.data\" class=\"columns-1 sm:columns-2 lg:columns-3 gap-4 p-4\"\u003e\n    \u003cdiv\n      v-for=\"item in characterList.data\"\n      :key=\"item.id\"\n      class=\"break-before-avoid g-white px-4 mb-4 py-6 shadow sm:rounded-lg sm:px-6 bg-primary-900 text-white\"\n    \u003e\n      \u003cdiv class=\"sm:flex sm:justify-between sm:items-baseline\"\u003e\n        \u003ch3 class=\"text-base font-medium bg-slate-600 text-white px-2 py-1 rounded-md\"\u003e\n          {{ item.name }}\n        \u003c/h3\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"mt-4 space-y-6\"\u003e\n        \u003cp\u003e\n          {{ item.about }}\n        \u003c/p\u003e\n      \u003c/div\u003e\n      \u003c!--Contains images--\u003e\n      \u003cdiv\n        v-if=\"item.images \u0026\u0026 item.images.jpg\"\n        class=\"my-3 flex justify-center\"\n      \u003e\n        \u003cimg\n          :src=\"item.images.jpg.image_url\"\n          alt=\"\"\n          class=\"shadow-lg rounded-md\"\n        /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n```\n\nColumns and break-before-avoid are vital classes used for achieving masonry layout and avoids the container to occupy full space.\n\n## Kubernetes Deployment\n\nPush the docker image to dockerhub, in my case the image name I'd be using is new-anime from my Dockerhub profile.\n\n``` YAML\napiVersion: apps/v1\nkind: Deployment\nmetadata:\n  name: new-anime-deployment  # Name for your deployment\nspec:\n  replicas: 2  # Number of pods (2 in this case)\n  selector:\n    matchLabels:\n      app: new-anime  # Label to identify pods belonging to this deployment\n  template:\n    metadata:\n      labels:\n        app: new-anime  # Labels for the pods in the deployment\n    spec:\n      containers:\n      - name: new-anime  # Container name\n        image: aspper/new-anime:latest  # Your image reference\n        # Add any container specific configurations here (e.g., ports, resources)\n        ports:\n        - containerPort: 80  # Port your application listens on\n\n```\n\nUse the following command to initiate a deployment\n\n```\nkubectl apply -f anime-deployment.yaml\n```\n\nNext, we create a service to expose pods created via deployment externally through port.\n\n``` YAML\napiVersion: v1\nkind: Service\nmetadata:\n  name: new-anime-service  # Name for your service\nspec:\n  type: NodePort  # Service type as NodePort\n  selector:\n    app: new-anime  # Matches pods with the label\n  ports:\n  - protocol: TCP  # Protocol\n    port: 3000  # External port to access the service\n    targetPort: 80  # Port on the pods that the service will route traffic to\n\n```\n\nWe deploy the service using this command\n\n```\nkubectl apply -f anime-service.yaml\n```\n\nGet the names of the pods created in this deployment.\n\n```\nkubectl get pods\n```\n\nExpose external port to access this service using port forwarding\n\n```\nkubectl port-forward pod/new-anime-deployment-554d75f8d8-wn6ms 8080:80\n```\n\n## Running Test Cases\n\n```shell\nnpx cypress run --component --spec \"cypress/component/Header.cy.js\"\n```\n\n## Stay In Touch\n\n- [Twitter](https://twitter.com/vuejs)\n- [Blog](https://medium.com/the-vue-point)\n- [Job Board](https://vuejobs.com/?ref=vuejs)\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\nCopyright (c) 2024-present, Amit Prafulla (Apfirebolt)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Fanime-dashboard-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapfirebolt%2Fanime-dashboard-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Fanime-dashboard-vue/lists"}