🚀 Start UI [web] is an opinionated frontend starter repository created & maintained by the BearStudio Team and other contributors. It represents our team's up-to-date stack that we use when creating web apps for our clients.
⚙️ Node.js, 🟦 TypeScript, ⚛️ React, 📦 TanStack Start, 💨 Tailwind CSS, 🧩 shadcn/ui, 📋 React Hook Form, 🔌 oRPC, 🛠 Prisma, 🔐 Better Auth, 📚 Storybook, 🧪 Vitest, 🎭 Playwright
For detailed information on how to use this project, please refer to the documentation. The documentation contains all the necessary information on installation, usage, and some guides.
- Node.js >= 22
- pnpm
- Docker (or a PostgreSQL database)
pnpm create start-ui -t web myAppThat will scaffold a new folder with the latest version of 🚀 Start UI [web] 🎉
cp .env.example .env # Setup your env variables
cp .vscode/settings.example.json .vscode/settings.json # (Optionnal) Setup your VS Code
pnpm install # Install dependencies
pnpm dk:init # Init docker
pnpm db:init # Init the dbNote
Quick advices for local development
- DON'T update the EMAIL_SERVER variable, because the default value will be used to catch the emails during the development.
pnpm dk:start # Only if your docker is not running
pnpm devNote
Don't want to use docker?
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.
In development, the emails will not be sent and will be catched by maildev.
The maildev UI is available at 0.0.0.0:1080.
Emails templates are built with react-email components in the src/emails folder.
You can preview an email template at http://localhost:3000/api/dev/email/{template} where {template} is the name of the template file in the src/emails/templates folder.
Example: Login Code
Add the language in the preview url like http://localhost:3000/api/dev/email/{template}?language={language} where {language} is the language key (en, fr, ...)
You can add search params to the preview url to pass as props to the template.
http://localhost:3000/api/dev/email/{template}/?{propsName}={propsValue}
Put the custom svg files into the src/components/icons/svg-sources folder and then run the following command:
pnpm gen:iconsIf you want to use the same set of custom duotone icons that Start UI is already using, checkout Phosphor
Warning
All svg icons should be svg files prefixed by icon- (example: icon-externel-link) with square size and filled with #000 color (will be replaced by currentColor).
E2E tests are setup with Playwright.
pnpm e2e # Run tests in headless mode, this is the command executed in CI
pnpm e2e:ui # Open a UI which allow you to run specific tests and see test executionpnpm install
pnpm storybook:build # Optional: Will expose the Storybook at `/storybook`
pnpm build
pnpm startSetup the VITE_ENV_NAME env variable with the name of the environment.
VITE_ENV_NAME="staging"
VITE_ENV_EMOJI="🔬"
VITE_ENV_COLOR="teal"
git detect a lot of changes inside my .husky folder
You probably have updated your branch with lefthook installed instead of husky. Follow these steps to fix your hooks issue:
git config --unset core.hooksPathrm -rf ./.huskypnpm install
From now husky should have been removed; and lefthook should run your hooks correctly.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
