{"id":14985480,"url":"https://github.com/bearstudio/start-ui-web","last_synced_at":"2025-05-14T11:10:42.890Z","repository":{"id":37418355,"uuid":"227635919","full_name":"BearStudio/start-ui-web","owner":"BearStudio","description":"🚀 Start UI [web] is an opinionated UI starter with 🟦 TypeScript, ⚛️ React, ⚫️ NextJS, ⚡️ Chakra UI, 🟦 tRPC, 🔐 Lucia Auth,  ▲ Prisma, 🏖️ TanStack Query, 📕 Storybook, 🎭 Playwright,📋 React Hook Form,◽From the 🐻  BearStudio Team","archived":false,"fork":false,"pushed_at":"2025-04-10T06:43:42.000Z","size":17100,"stargazers_count":1467,"open_issues_count":42,"forks_count":142,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-10T07:41:15.713Z","etag":null,"topics":["boilerplate","chakra-ui","hacktoberfest","maildev","nextjs","prisma","react","react-email","react-hook-form","react-query","reactjs","starter","starter-project","storybook","tanstack-query","template","trpc","typescript","web"],"latest_commit_sha":null,"homepage":"https://demo.start-ui.com","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":"2019-12-12T15:18:26.000Z","updated_at":"2025-04-10T04:46:50.000Z","dependencies_parsed_at":"2023-10-27T14:41:59.231Z","dependency_job_id":"a385d849-26a7-4f78-a5ba-8088e71ec228","html_url":"https://github.com/BearStudio/start-ui-web","commit_stats":{"total_commits":637,"total_committers":46,"mean_commits":"13.847826086956522","dds":0.5651491365777079,"last_synced_commit":"debe6f2eeeed98348b177f067c053c83ae2e767a"},"previous_names":["bearstudio/start-ui"],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BearStudio%2Fstart-ui-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BearStudio%2Fstart-ui-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BearStudio%2Fstart-ui-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BearStudio%2Fstart-ui-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BearStudio","download_url":"https://codeload.github.com/BearStudio/start-ui-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248339900,"owners_count":21087343,"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","chakra-ui","hacktoberfest","maildev","nextjs","prisma","react","react-email","react-hook-form","react-query","reactjs","starter","starter-project","storybook","tanstack-query","template","trpc","typescript","web"],"created_at":"2024-09-24T14:11:02.925Z","updated_at":"2025-04-11T04:19:57.250Z","avatar_url":"https://github.com/BearStudio.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e\u003cimg src=\".github/assets/thumbnail.png\" alt=\"Start UI Web\" /\u003e\u003c/h1\u003e\n\n[![Discord](https://img.shields.io/discord/452798408491663361)](https://go.bearstudio.fr/discord)\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## Documentation\n\nFor detailed information on how to use this project, please refer to the [documentation](https://docs.web.start-ui.com). The documentation contains all the necessary information on installation, usage, and some guides.\n\n## Demo\n\nA live read-only demonstration of what you will have when starting a project with 🚀 Start UI \u003csmall\u003e[web]\u003c/small\u003e is available on [demo.start-ui.com](https://demo.start-ui.com).\n\n## Technologies\n\n\u003cdiv align=\"center\" style=\"margin: 0 0 16px 0\"\u003e\u003cimg src=\".github/assets/tech-logos.png\" alt=\"Technologies logos of the starter\" /\u003e\u003c/div\u003e\n\n[🟦 TypeScript](https://www.typescriptlang.org/), [⚛️ React](https://react.dev/), [⚫️ NextJS](https://nextjs.org/), [⚡️ Chakra UI](https://chakra-ui.com/),  [🟦 tRPC](https://trpc.io/), [▲ Prisma](https://www.prisma.io/), [🏖️ TanStack Query](https://react-query.tanstack.com/), [📕 Storybook](https://storybook.js.org/), [🎭 Playwright](https://playwright.dev/), [📋 React Hook Form](https://react-hook-form.com/)\n, [🌍 React i18next](https://react.i18next.com/)\n\n\n## Requirements\n\n- [NodeJS](https://nodejs.org/) \u003e=20\n- [Pnpm](https://pnpm.io/)\n- [Docker](https://www.docker.com/) (or a [PostgreSQL](https://www.postgresql.org/) database)\n\n## Getting Started\n\n```bash\npnpm create start-ui --web myApp\n```\n\nThat will scaffold a new folder with the latest version of 🚀 Start UI \u003csmall\u003e[web]\u003c/small\u003e 🎉\n\n## Installation\n\n1. Duplicate the `.env.example` file to a new `.env` file, and update the environment variables\n\n```bash\ncp .env.example .env\n```\n\n\u003e [!NOTE]\n\u003e **Quick advices for local development**\n\u003e - **DON'T update** the **EMAIL_SERVER** variable, because the default value will be used to catch the emails during the development.\n\n\n2. Install dependencies\n```bash\npnpm install\n```\n\n3. Setup and start the db with docker\n```bash\npnpm dk:init\n```\n\u003e [!NOTE]\n\u003e **Don't want to use docker?**\n\u003e\n\u003e Setup a PostgreSQL database (locally or online) and replace the **DATABASE_URL** environment variable. Then you can run `pnpm db:push` to update your database schema and then run `pnpm db:seed` to seed your database.\n\n## Development\n\n```bash\n# Run the database in Docker (if not already started)\npnpm dk:start\n# Run the development server\npnpm dev\n```\n\n### Emails in development\n\n#### Maildev to catch emails\n\nIn development, the emails will not be sent and will be catched by [maildev](https://github.com/maildev/maildev).\n\nThe maildev UI is available at [0.0.0.0:1080](http://0.0.0.0:1080).\n\n#### Preview emails\n\nEmails templates are built with `react-email` components in the `src/emails` folder.\n\nYou can preview an email template at `http://localhost:3000/devtools/email/{template}` where `{template}` is the name of the template file in the `src/emails/templates` folder.\n\nExample: [Login Code](http://localhost:3000/devtools/email/login-code)\n\n##### Email translation preview\n\nAdd the language in the preview url like `http://localhost:3000/devtools/email/{template}/{language}` where `{language}` is the language key (`en`, `fr`, ...)\n\n#### Email props preview\n\nYou can add search params to the preview url to pass as props to the template.\n`http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}`\n\n### Storybook\n\n```bash\npnpm storybook\n```\n\n### Update theme typing\n\nWhen adding or updating theme components, component variations, sizes, colors and other theme foundations, you can extend the internal theme typings to provide nice autocomplete.\n\nJust run the following command after updating the theme:\n\n```bash\npnpm theme:generate-typing\n```\n\n### Generate custom icons components from svg files\n\nPut the custom svg files into the `src/components/Icons/svg-sources` folder and then run the following command:\n\n```bash\npnpm theme:generate-icons\n```\n\n\u003e [!WARNING]\n\u003e All svg icons should be svg files prefixed by `icon-` (example: `icon-externel-link`) with **24x24px** size, only **one shape** and **filled with `#000` color** (will be replaced by `currentColor`).\n\n\n### Update color mode storage key\n\nYou can update the storage key used to detect the color mode by updating this constant in the `src/theme/config.ts` file:\n\n```tsx\nexport const COLOR_MODE_STORAGE_KEY = 'start-ui-color-mode'; // Update the key according to your needs\n```\n\n### E2E Tests\n\nE2E tests are setup with Playwright.\n\n```sh\npnpm e2e     # Run tests in headless mode, this is the command executed in CI\npnpm e2e:ui  # Open a UI which allow you to run specific tests and see test execution\n```\n\nTests are written in the `e2e` folder; there is also a `e2e/utils` folder which contains some utils to help writing tests.\n\n## Show hint on development environments\n\nSetup the `NEXT_PUBLIC_ENV_NAME` env variable with the name of the environment.\n\n```\nNEXT_PUBLIC_ENV_NAME=\"staging\"\nNEXT_PUBLIC_ENV_EMOJI=\"🔬\"\nNEXT_PUBLIC_ENV_COLOR_SCHEME=\"teal\"\n```\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\": [\n    \"src/locales\",\n    \"node_modules/zod-i18n-map/locales\"\n  ],\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## Production\n\n```bash\npnpm install\npnpm storybook:build # Optional: Will expose the Storybook at `/storybook`\npnpm build\npnpm start\n```\n\n### Deploy with Docker\n\n1. Build the Docker image (replace `start-ui-web` with your project name)\n```\ndocker build -t start-ui-web .\n```\n\n2. Run the Docker image (replace `start-ui-web` with your project name)\n```\ndocker run -p 80:3000 start-ui-web\n```\nApplication will be exposed on port 80 ([http://localhost](http://localhost))\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbearstudio%2Fstart-ui-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbearstudio%2Fstart-ui-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbearstudio%2Fstart-ui-web/lists"}