{"id":18762585,"url":"https://github.com/hummingbird-me/kitsu-web","last_synced_at":"2025-05-16T00:07:11.701Z","repository":{"id":37021020,"uuid":"68339625","full_name":"hummingbird-me/kitsu-web","owner":"hummingbird-me","description":":fire: Web app for Kitsu","archived":false,"fork":false,"pushed_at":"2025-02-02T06:57:29.000Z","size":57692,"stargazers_count":232,"open_issues_count":68,"forks_count":155,"subscribers_count":14,"default_branch":"react","last_synced_at":"2025-05-08T11:47:48.426Z","etag":null,"topics":["anime","crowdin","hacktoberfest","hummingbird","javascript","kitsu","manga","translations","web"],"latest_commit_sha":null,"homepage":"https://kitsu.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hummingbird-me.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-15T23:33:59.000Z","updated_at":"2025-04-24T00:30:00.000Z","dependencies_parsed_at":"2023-12-28T11:40:01.194Z","dependency_job_id":"e4a2d9f3-9372-4956-838c-188e05e37036","html_url":"https://github.com/hummingbird-me/kitsu-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbird-me%2Fkitsu-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbird-me%2Fkitsu-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbird-me%2Fkitsu-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbird-me%2Fkitsu-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hummingbird-me","download_url":"https://codeload.github.com/hummingbird-me/kitsu-web/tar.gz/refs/heads/react","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442854,"owners_count":22071878,"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":["anime","crowdin","hacktoberfest","hummingbird","javascript","kitsu","manga","translations","web"],"created_at":"2024-11-07T18:22:07.406Z","updated_at":"2025-05-16T00:07:06.684Z","avatar_url":"https://github.com/hummingbird-me.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kitsu Web App\n\n[![Crowdin](https://badges.crowdin.net/kitsu-web/localized.svg)](https://crowdin.com/project/kitsu-web)\n![Test Status](https://github.com/hummingbird-me/kitsu-web/workflows/Kitsu%20Test%20Suite/badge.svg)\n![Deploy Status](https://github.com/hummingbird-me/kitsu-web/workflows/Kitsu%20Web%20Deployment/badge.svg)\n[![Code Climate](https://codeclimate.com/github/hummingbird-me/kitsu-web/badges/gpa.svg)](https://codeclimate.com/github/hummingbird-me/kitsu-web)\n[![Test Coverage](https://codeclimate.com/github/hummingbird-me/kitsu-web/badges/coverage.svg)](https://codeclimate.com/github/hummingbird-me/kitsu-web/coverage)\n\n---\n\n**\u003cp align=\"center\"\u003eThis is our client repository. It contains the React.js application for Kitsu.\u003cbr /\u003eCheck out the [tools], [mobile], [server] and [api docs] repositories.\u003c/p\u003e**\n\n[tools]: https://github.com/hummingbird-me/kitsu-tools\n[server]: https://github.com/hummingbird-me/kitsu-server\n[mobile]: https://github.com/hummingbird-me/kitsu-mobile\n[api docs]: https://github.com/hummingbird-me/api-docs\n\n---\n\n## Contributing\n\nThe fact that you're reading this probably means you're interested in contributing to the Kitsu\nweb application. If so, welcome! It's pretty easy to get started, and we're here to help you all the\nway. If you have any questions, please don't hesitate to ask us on our\n[Discord](https://invite.gg/kitsu) in the #dev channel!\n\nBefore you make a pull request, please [read the styleguide](./STYLEGUIDE.md) and make sure that you're keeping the codebase clean and consistent for future developers.\n\n### Getting It Running\n\nYou're gonna need a [fairly modern Node.js version](https://nodejs.org/en/about/releases/). The\nActive LTS is probably the best option if you're not sure. Our deployments will use the Active LTS,\nbut we try to ensure that everything runs smoothly on the Current version as well.\n\nAfter you have Node, run the following:\n\n1. `npm install` (installs dependencies)\n2. `npm run dev` (default port 3000)\n\nNow visit `http://localhost:3000` and you should see the Kitsu application!\n\n\u003e By default, in development mode, this will connect to `staging.kitsu.io` (our pre-production\n\u003e environment) for the API, which means anything you do will be wiped out weekly. You can change\n\u003e this to connect to production if necessary by setting `VITE_API_HOST=https://kitsu.io/` in the\n\u003e `.env` file. This is generally not necessary, but there are some things which don't work fully in\n\u003e staging.\n\u003e\n\u003e In the future we plan to integrate this into the\n\u003e [kitsu-tools](https://github.com/hummingbird-me/kitsu-tools) dev environment better.\n\n### Navigating the Codebase\n\nWhile the basic project structure should be familiar to most developers who have used React and Vite\nin the past, Kitsu is a large application and has more structure than you might be accustomed to.\n\n#### Entry Points\n\nVite compiles the application starting at an \"entry point\". In our case, we have four, across three\n\"build targets\":\n\n- **`BUILD_TARGET=client`** — the main Kitsu (V4) web app\n  - [`index.html`](./index.html) — main entry point for the Kitsu web application\n  - [`oauth2-callback.html`](./oauth2-callback.html) — entry point for a callback handler from an\n    OAuth2 provider (mostly just delegates to our\n    [nanoauth](https://github.com/hummingbird-me/nanoauth)) library.\n- **`BUILD_TARGET=server`** — server-side rendered version of the Kitsu web app\n  - [`server.js`](./server.js) — main entry point for the Kitsu web app\n- **`BUILD_TARGET=library`** — a library of components from the Kitsu (V4) web app to expose for\n  the V3 Ember app during migration.\n  - [`src/entry-ember.tsx`](./src/entry-ember.tsx) — the exports which will be accessible from the\n    Ember application\n\n#### Application Source Code\n\n- [`src/assets/`](./src/assets/) — static assets like icons, illustrations, and animations imported\n  by the application. These aren't just copied to the output directory, these must be imported and\n  can be processed during compilation with various plugins.\n- [`src/components/`](./src/components/) — common, reusable components\n- [`src/pages/`](./src/pages/) — components rendering a whole page\n- [`src/layouts/`](./src/layouts/) — components providing a reusable page structure\n- [`src/contexts/`](./src/contexts/) — React contexts for sharing state between components\n- [`src/initializers/`](./src/initializers/) — imperative code which runs during app boot (avoid\n  these if possible, prefer hooks in the App component)\n- [`src/constants/config.ts`](./src/constants/config.ts) — exposes configuration to the application\n  at runtime\n- [`src/graphql/`](./src/graphql/) — GraphQL support code, such as the generated schema types,\n  scalars, and urql exchanges.\n- [`src/hooks/`](./src/hooks/) — custom react hooks for the application\n- [`src/locales/`](./src/locales/) — data for every locale we support (translations, date-fn\n  locales, etc.)\n- [`src/errors/`](./src/errors/) — all our error subclasses\n- [`src/styles/`](./src/styles/) — application-wide styles (not specific to a component), mostly in\n  the form of variables which are used in component styles.\n\n#### Key Libraries\n\n- **Language:** [TypeScript](https://www.typescriptlang.org/)\n- **Framework:** [React](https://reactjs.org/) (we might switch to Preact at some point)\n- **Bundler:** [Vite](https://vitejs.dev/)\n- **Testing:** [Vitest](https://vitest.dev/)\n- **Routing:** [React Router V6](https://reactrouter.com)\n- **GraphQL Client:** [Urql](https://formidable.com/open-source/urql/) with [Graphcache](https://formidable.com/open-source/urql/docs/graphcache/) enabled\n- **Styles:** [CSS Modules](https://github.com/css-modules/css-modules) processed by\n  [PostCSS](https://postcss.org)\n- **Internationalization/Localization:** [React Intl](https://formatjs.io/docs/react-intl/)\n- **Time:** [date-fns](https://date-fns.org)\n\n### Common Development Workflows\n\n#### Running Codegen\n\n```bash\nnpm run codegen\n```\n\nIf you add a new translation key or need schema changes from the API, you will need to run `npm run\ncodegen` to have them work properly. The GraphQL Codegen will download the schema and the Intl\nCodegen will extract all the translation keys from your components.\n\n#### Running Storybook\n\n```bash\nnpm run storybook\n```\n\nWe use [Storybook](https://storybook.js.org/docs/react/get-started/introduction) to document\ncomponents. We ask that you please document any new reusable components you add.\n\n#### Running Tests\n\n```bash\nnpm run test:unit # Runs unit tests (vitest)\nnpm run test:unit:watch # Opens vitest in watch mode\nnpm run test:e2e # Runs e2e tests (cypress)\n```\n\nWe have two test suites:\n\n- **Unit Tests**\n  - Powered by Vitest, a Jest-compatible testing framework\n  - Extremely fast\n  - Runs in a Fake DOM (not a real browser)\n  - Stored adjacent to code in `.test.ts(x)` files\n- **End-to-End Tests**\n  - Powered by Cypress, a headless browser testing framework\n  - Slower\n  - Runs in a real browser (Chrome, Firefox, etc.)\n  - Stored in `cypress/`\n\nMost of the time, we recommend testing your code with Vitest. It's a much nicer experience, and it\nruns faster. That said, sometimes you need to test a full workflow from end-to-end, which is what\nCypress is there for.\n\n### Translations\n\nWe use CrowdIn to handle translations, head on over to\n[crowdin.com/project/kitsu-web](https://crowdin.com/project/kitsu-web) to suggest changes or add new\ntranslations.\n\nTranslations use the ICU Message Syntax format. [Read the syntax\ndocumentation](https://formatjs.io/docs/icu-syntax/).\n\n## Issues\n\nLooking to create an issue? Open a [bug report](https://kitsu.io/feedback/bugs) or [feature\nrequest](https://kitsu.io/feedback/feature-requests) on Kitsu.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhummingbird-me%2Fkitsu-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhummingbird-me%2Fkitsu-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhummingbird-me%2Fkitsu-web/lists"}