{"id":20859183,"url":"https://github.com/bearstudio/twitch-listener-front","last_synced_at":"2026-04-24T00:38:39.133Z","repository":{"id":103907254,"uuid":"428382577","full_name":"BearStudio/twitch-listener-front","owner":"BearStudio","description":"Repository of the Frontend for the Twitch Listener software","archived":false,"fork":false,"pushed_at":"2021-11-19T08:19:36.000Z","size":523,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-12-30T08:56:52.596Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/BearStudio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2021-11-15T18:45:04.000Z","updated_at":"2021-11-19T08:19:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"29d5f89f-cc83-4195-ae3f-f5e0ca25887f","html_url":"https://github.com/BearStudio/twitch-listener-front","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BearStudio/twitch-listener-front","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BearStudio%2Ftwitch-listener-front","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BearStudio%2Ftwitch-listener-front/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BearStudio%2Ftwitch-listener-front/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BearStudio%2Ftwitch-listener-front/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BearStudio","download_url":"https://codeload.github.com/BearStudio/twitch-listener-front/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BearStudio%2Ftwitch-listener-front/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32204710,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T00:06:41.111Z","status":"ssl_error","status_checked_at":"2026-04-24T00:06:35.224Z","response_time":53,"last_error":"SSL_read: 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":[],"created_at":"2024-11-18T04:48:54.046Z","updated_at":"2026-04-24T00:38:39.109Z","avatar_url":"https://github.com/BearStudio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u003cimg src=\"assets/start-ui-web.svg\" alt=\"Start UI Web\" width=\"300\" /\u003e\u003c/h1\u003e\n\n🚀 Start UI \u003csmall\u003e[web]\u003c/small\u003e is an opinionated frontend starter repository created \u0026 maintained by the [BearStudio Team](https://www.bearstudio.fr/team) and other contributors.\nIt represents our team's up-to-date stack that we use when creating web apps for our clients.\n\n## Getting Started\n\n```bash\nnpx create-start-ui --web myApp\n```\nThat will scaffold a new folder with the latest version of 🚀 Start UI \u003csmall\u003e[web]\u003c/small\u003e 🎉\n\nThen just go to the created folder and start the dev server.\n\n```bash\ncd myApp\nyarn dev\n```\n\n## Technology\n\n- 🟦 [TypeScript](https://www.typescriptlang.org/)\n- ⚛️ [React](https://reactjs.org/)\n- ▲ [NextJS](https://nextjs.org/) (with [Static Export](https://nextjs.org/docs/advanced-features/static-html-export))\n- 📕 [Storybook](https://storybook.js.org/)\n- ⚡️ [Chakra UI](https://chakra-ui.com/)\n- 🐜 [Formiz](https://formiz-react.com/)\n- 💥 [React Error Boundary](https://github.com/bvaughn/react-error-boundary)\n- ⭐️ [React Icons](https://react-icons.github.io/react-icons/)\n- 🌍 [React i18next](https://react.i18next.com/)\n- 🔽 [React Select](https://react-select.com/)\n- 🔢 [React Currency Input Field](https://github.com/cchanxzy/react-currency-input-field)\n- 📅 [Day.js](https://day.js.org/)\n\n👉 [Technology Choices](#technology-choices)\n\nℹ️ API calls are mapped on a [JHipster](https://www.jhipster.tech/) backend application.\n\n## Features\n\n- Reponsive layout / navigation.\n- Sign / Sign Up / Password recovery screens.\n- Account profile / Change Password screens.\n- Users management admin screens (CRUD).\n- Multi-languages (English \u0026 French built-in).\n- Custom Chakra UI theme with preview of customized components in Storybook.\n- Extra UI components with Storybook documentation.\n- Fields components for Formiz.\n- Dark mode support with Storybook toggle.\n- App version \u0026 Environment name in the UI.\n- API Schema documentation via [Swagger UI React](https://github.com/swagger-api/swagger-ui).\n- API Mocking with persisting state via [MirageJS](https://miragejs.com/).\n\n## Installation\n\n```bash\nyarn install\nyarn build\n```\n\n## Development\n\n```bash\nyarn dev\n```\n\n### Storybook\n\n```bash\nyarn storybook\n```\n\n### Development with [MirageJS](https://miragejs.com/) (mock)\n\n**This is the default behavior.**\n\nDo not set the `NEXT_PUBLIC_API_BASE_URL` variable in the `.env` file at the root of the project.\n\n### Development with a [JHipster](https://www.jhipster.tech/) backend\n\nCreate a `.env` file at the root of the project with the following content:\n\n```\nNEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api\n```\n\n## Show hint on development environments\n\nSetup the `NEXT_PUBLIC_DEV_ENV_NAME` env variable with the name of the environment.\n\n```\nNEXT_PUBLIC_DEV_ENV_NAME=staging\nNEXT_PUBLIC_DEV_ENV_COLOR_SCHEME=teal\n```\n\n## API Documentation\n\nAPI documentation is accessible by admins in the app with [Swagger-UI](https://www.npmjs.com/package/swagger-ui-react).\n```\nyarn docs:build\n```\nThis will build the json documentation from the main file `/src/mocks/openapi/openapi.yaml`.\n\n## Translations\n\n### Setup the i18n Ally extension\n\nWe recommended using the [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) plugin for VS Code for translations management.\n\nCreate or edit the `.vscode/settings.json` file with the following settings:\n\n```json\n{\n  \"i18n-ally.localesPaths\": [\"src/locales\"],\n  \"i18n-ally.keystyle\": \"nested\",\n  \"i18n-ally.enabledFrameworks\": [\"general\", \"react\", \"i18next\"],\n  \"i18n-ally.namespace\": true,\n  \"i18n-ally.defaultNamespace\": \"common\",\n  \"i18n-ally.extract.autoDetect\": true,\n  \"i18n-ally.keysInUse\": [\"common.languages.*\"]\n}\n```\n\n### Guidelines for translations\n\n- Use namespaces `t('namespace:translationKey')` and nesting `t('namespace:this.is.nested')`.\n```js\n// Example for translations available in account.json\nt('account:data.firstname.label')\n```\n\n- For fields and data translations use a `data` object.\n```json\n// account.json\n{\n  \"data\": {\n    \"firstname\": {\n      \"label\": \"First Name\",\n      \"required\": \"First Name is required\",\n    },\n  }\n}\n```\n```js\n// React\nt('account:data.firstname.label')\nt('account:data.firstname.required')\n```\n\n- For user feedbacks, use a `feedbacks` object with `actionSuccess` \u0026 `actionError` keys containing each `title` and `description` (optional).\n```json\n// account.json\n{\n  \"resetPassword\": {\n    \"feedbacks\": {\n      \"confirmSuccess\": {\n        \"title\": \"Your password has been reset\",\n        \"description\": \"You can now login\"\n      },\n      \"confirmError\": {\n        \"title\": \"Reset password failed\"\n      }\n    }\n  }\n}\n```\n```js\n// React\nt('account:resetPassword.feedbacks.updateSuccess.title')\nt('account:resetPassword.feedbacks.updateSuccess.description')\nt('account:resetPassword.feedbacks.updateError.title')\n```\n\n- For user actions, use an `actions` object.\n```json\n// account.json\n{\n  \"resetPassword\": {\n    \"actions\": {\n      \"send\": \"Send Email\",\n      \"reset\": \"Reset Password\"\n    }\n  }\n}\n```\n```js\n// React\nt('account:resetPassword.actions.send')\nt('account:resetPassword.actions.reset')\n```\n\n- Use the common workspace only for VERY generic translations. By default, use specific namespaces to allow easy update on large code base without unwanted side-effects.\n\n## Production\n\n### NodeJS (recommended)\n\n```bash\nyarn storybook:build # Optional: Will expose the Storybook at `/storybook`\nyarn build\nyarn start\n```\n\n### Static files\n\n```bash\nyarn storybook:build # Optional: Will expose the Storybook at `/storybook/index.html`\nyarn static:build\n```\n\nThen expose the `/out` folder.\n\n💡 You will need to setup your server to rewrite all `/app/*` urls to serve the `app.html` file.\n\n---\n\n## Technology Choices\n\n### React\n\n[React](https://reactjs.org/) is a JavaScript library created in 2013 to build\nreactive user interfaces. At the time of writing, React is probably the front\nend library the most used to create new projects and has a huge community which\nis beneficial for the maintainability of the project in terms of developers and\nonline resources.\n\n[GitHub](https://github.com/facebook/react) · [License MIT](https://github.com/facebook/react/blob/master/LICENSE)\n\n### Next.js\n\nNext.js gives you the best developer experience with all the features you need\nfor production: hybrid static \u0026 server rendering, TypeScript support, smart\nbundling, route pre-fetching, and more. No config needed.\n\n[GitHub](https://github.com/vercel/next.js) · [License MIT](https://github.com/vercel/next.js/blob/canary/license.md)\n\n### TypeScript\n\nJavaScript is a not typed language. [TypeScript](https://www.typescriptlang.org/)\nis here to help add static type definition. TypeScript helps a lot when it comes\nto types, interfaces and define contract between functions which helps a lot for\na reliable documentation. No worry, the TypeScript adoption is incremental and\nwriting in TypeScript is not mandatory to use Start UI, but it is a good\npractice to do so to avoid bugs in the future.\n\n[GitHub](https://github.com/microsoft/TypeScript) · [License Apache 2.0](https://github.com/microsoft/TypeScript/blob/master/LICENSE.txt)\n\n### Storybook\n\n[Storybook](https://storybook.js.org/) is an Open Source tool to help you\ndevelop framework agnostic components in isolation and document them.\n\n[GitHub](https://github.com/storybookjs/storybook) · [License MIT](https://github.com/storybookjs/storybook/blob/next/LICENSE)\n\n### Chakra UI\n\n[Chakra UI](https://chakra-ui.com/) is a simple, modular, composable and\naccessible component library that is highly customizable.\n\n[GitHub](https://github.com/chakra-ui/chakra-ui/) · [License MIT](https://github.com/chakra-ui/chakra-ui/blob/main/LICENSE)\n\n### Formiz\n\nTo create React forms, there is a lot of libraries out there.\n[Formiz](https://formiz-react.com/) will help you create React forms with ease!\nComposable, headless \u0026 with built-in multi steps.\n\n[GitHub](https://github.com/ivan-dalmet/formiz) · [License MIT](https://github.com/ivan-dalmet/formiz/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbearstudio%2Ftwitch-listener-front","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbearstudio%2Ftwitch-listener-front","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbearstudio%2Ftwitch-listener-front/lists"}