start-ui-web

🚀 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

1,378

130

1,378

View on GitHub

Top Related Projects

next.js

124,777

The React Framework

create-react-app

102,511

Set up a modern web app by running one command.

vite

67,112

Next generation frontend tooling. It's fast!

redwood

17,089

The App Framework for Startups

blitz

13,599

⚡️ The Missing Fullstack Toolkit for Next.js

create-t3-app

25,180

The best way to start a full-stack, typesafe Next.js app

Quick Overview

Start UI Web is a comprehensive starter kit for building modern web applications. It provides a solid foundation with pre-configured tools and best practices, allowing developers to quickly set up and start working on their projects using React, Next.js, and TypeScript.

Pros

Comes with a pre-configured setup, saving time on initial project configuration
Includes essential tools and libraries like React Query, Chakra UI, and React Hook Form
Implements best practices for code structure, testing, and accessibility
Provides a scalable architecture suitable for both small and large projects

Cons

May have a learning curve for developers unfamiliar with all the included technologies
Some developers might find the opinionated structure limiting for certain project types
Regular updates to the included libraries might require occasional maintenance
The comprehensive nature of the starter kit could be overwhelming for beginners

Code Examples

Using the custom useToast hook for notifications:

import { useToast } from '@/components/Toast';

const MyComponent = () => {
  const toast = useToast();

  const handleClick = () => {
    toast({
      title: 'Success',
      description: 'Action completed successfully',
      status: 'success',
    });
  };

  return <button onClick={handleClick}>Show Toast</button>;
};

Implementing a protected route using the withAuth HOC:

import { withAuth } from '@/features/auth';

const ProtectedPage = () => {
  return <div>This page is protected and requires authentication</div>;
};

export default withAuth(ProtectedPage);

Using the useAccount hook to access user information:

import { useAccount } from '@/features/account';

const ProfileComponent = () => {
  const { account, isLoading } = useAccount();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Welcome, {account.firstName}</h1>
      <p>Email: {account.email}</p>
    </div>
  );
};

Getting Started

To get started with Start UI Web, follow these steps:

Clone the repository:

git clone https://github.com/BearStudio/start-ui-web.git

Install dependencies:
```
cd start-ui-web
yarn install
```
Set up environment variables:
```
cp .env.example .env.local
```
Start the development server:
```
yarn dev
```
Open your browser and navigate to http://localhost:3000 to see the application running.

Competitor Comparisons

next.js

124,777

The React Framework

Pros of Next.js

More mature and widely adopted framework with extensive documentation and community support
Built-in performance optimizations, including automatic code splitting and server-side rendering
Seamless integration with Vercel's deployment platform for easy scaling and hosting

Cons of Next.js

Steeper learning curve for developers new to React or server-side rendering concepts
Less opinionated structure, requiring more setup and configuration for larger projects
May introduce complexity for simple static websites that don't require advanced features

Code Comparison

Next.js:

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = { color: router.asPath === href ? 'red' : 'black' }
  return <a href={href} style={style}>{children}</a>
}

Start-UI-Web:

import { Link, useLocation } from 'react-router-dom'

function ActiveLink({ children, to }) {
  const location = useLocation()
  const isActive = location.pathname === to
  return <Link to={to} className={isActive ? 'active' : ''}>{children}</Link>
}

Both examples show how to create an active link component, but Next.js uses its built-in routing system, while Start-UI-Web relies on React Router.

create-react-app

102,511

Set up a modern web app by running one command.

Pros of create-react-app

Widely adopted and maintained by Facebook, ensuring long-term support and updates
Extensive documentation and community resources available
Simpler setup process with fewer initial configuration options

Cons of create-react-app

Less opinionated structure, requiring more setup for advanced features
Limited built-in TypeScript support compared to start-ui-web
Fewer pre-configured tools and libraries out of the box

Code Comparison

start-ui-web:

import { Button } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';

export const MyComponent = () => {
  const { t } = useTranslation();
  return <Button>{t('common:submit')}</Button>;
};

create-react-app:

import React from 'react';

function App() {
  return (
    <div className="App">
      <button>Submit</button>
    </div>
  );
}

export default App;

The start-ui-web example showcases built-in Chakra UI components and internationalization support, while create-react-app provides a more basic starting point for customization.

vite

67,112

Next generation frontend tooling. It's fast!

Pros of Vite

Faster build times and hot module replacement
Lightweight and flexible, suitable for various project types
Large ecosystem with extensive plugin support

Cons of Vite

Less opinionated, requiring more setup for complex projects
Smaller community compared to some established bundlers
May have compatibility issues with older browsers without additional configuration

Code Comparison

Start-ui-web (Next.js configuration):

module.exports = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  },
}

Vite (vite.config.js):

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Start-ui-web provides a more comprehensive boilerplate with pre-configured features like internationalization, while Vite offers a minimal configuration focused on fast development and building. Start-ui-web is built on Next.js, providing server-side rendering capabilities out of the box, whereas Vite is primarily a build tool that can be used with various frameworks, including React, Vue, and Svelte.

redwood

17,089

The App Framework for Startups

Pros of Redwood

Full-stack framework with integrated backend and frontend
Built-in CLI for scaffolding and code generation
Opinionated structure promoting best practices and conventions

Cons of Redwood

Steeper learning curve due to its comprehensive nature
Less flexibility in choosing individual technologies
Potentially overkill for smaller projects

Code Comparison

Start-UI-Web (React component):

const Button = ({ children, ...props }) => (
  <button className="px-4 py-2 bg-blue-500 text-white rounded" {...props}>
    {children}
  </button>
)

Redwood (Cell component):

export const QUERY = gql`
  query FindPostQuery($id: Int!) {
    post: post(id: $id) {
      id
      title
      body
    }
  }
`

export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Post not found</div>
export const Failure = ({ error }) => <div>Error: {error.message}</div>
export const Success = ({ post }) => {
  return <Post post={post} />
}

The code comparison highlights Redwood's integrated GraphQL approach with Cells, showcasing its full-stack nature, while Start-UI-Web focuses on reusable UI components. Redwood's structure emphasizes convention and data fetching patterns, whereas Start-UI-Web provides more flexibility in component design.

blitz

13,599

⚡️ The Missing Fullstack Toolkit for Next.js

Pros of Blitz

Full-stack framework with built-in authentication and database integration
Zero-API approach, eliminating the need for separate API layer
Stronger focus on scalability and enterprise-level applications

Cons of Blitz

Steeper learning curve due to its comprehensive nature
Less flexibility in choosing individual components or technologies
Opinionated structure may not suit all project types

Code Comparison

Start-UI-Web (Next.js based):

import { NextPage } from 'next';
import { useTranslation } from 'react-i18next';

const HomePage: NextPage = () => {
  const { t } = useTranslation();
  return <h1>{t('home:title')}</h1>;
};

Blitz:

import { BlitzPage } from '@blitzjs/next';
import { useQuery } from '@blitzjs/rpc';
import getUsers from 'app/users/queries/getUsers';

const HomePage: BlitzPage = () => {
  const [users] = useQuery(getUsers);
  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
};

Start-UI-Web focuses on providing a customizable starting point for web applications with Next.js, while Blitz offers a more opinionated, full-stack approach. Start-UI-Web allows for greater flexibility in choosing technologies and structuring the project, whereas Blitz provides a more integrated experience with built-in features like authentication and database access. The code comparison highlights the differences in data fetching and component structure between the two approaches.

create-t3-app

25,180

The best way to start a full-stack, typesafe Next.js app

Pros of create-t3-app

Offers a more opinionated and streamlined setup process for T3 stack projects
Includes built-in TypeScript support and type safety out of the box
Provides seamless integration with tRPC for type-safe API development

Cons of create-t3-app

Less flexibility in terms of UI components and design system compared to start-ui-web
May have a steeper learning curve for developers unfamiliar with the T3 stack
Limited customization options for project structure and configuration

Code Comparison

start-ui-web:

import { Button } from '@chakra-ui/react';

export const MyComponent = () => (
  <Button colorScheme="primary">Click me</Button>
);

create-t3-app:

import { Button } from '@trpc/react-query';

export const MyComponent = () => (
  <Button variant="primary">Click me</Button>
);

Both repositories provide boilerplate code for React-based web applications, but they differ in their focus and included technologies. start-ui-web emphasizes a comprehensive UI toolkit with Chakra UI, while create-t3-app prioritizes type safety and full-stack development with the T3 stack. The code comparison shows the difference in UI component usage between the two projects.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

ð 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.

Documentation

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.

Demo

A live read-only demonstration of what you will have when starting a project with ð Start UI [web] is available on demo.start-ui.com.

Technologies

ð¦ TypeScript, âï¸ React, â«ï¸ NextJS, â¡ï¸ Chakra UI, ð¦ tRPC, â² Prisma, ðï¸ TanStack Query, ð Storybook, ð Playwright, ð React Hook Form , ð React i18next

Requirements

NodeJS >=20
Pnpm
Docker (or a PostgreSQL database)

Getting Started

pnpm create start-ui --web myApp

That will scaffold a new folder with the latest version of ð Start UI [web] ð

Installation

Duplicate the .env.example file to a new .env file, and update the environment variables

cp .env.example .env

[!NOTE] 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.

Install dependencies

pnpm install

Setup and start the db with docker

pnpm dk:init

[!NOTE] 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.

Development

# Run the database in Docker (if not already started)
pnpm dk:start
# Run the development server
pnpm dev

Emails in development

Maildev to catch emails

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.

Preview emails

Emails templates are built with react-email components in the src/emails folder.

You 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.

Example: Login Code

Email translation preview

Add the language in the preview url like http://localhost:3000/devtools/email/{template}/{language} where {language} is the language key (en, fr, ...)

Email props preview

You can add search params to the preview url to pass as props to the template. http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}

Storybook

pnpm storybook

Update theme typing

When adding or updating theme components, component variations, sizes, colors and other theme foundations, you can extend the internal theme typings to provide nice autocomplete.

Just run the following command after updating the theme:

pnpm theme:generate-typing

Generate custom icons components from svg files

Put the custom svg files into the src/components/Icons/svg-sources folder and then run the following command:

pnpm theme:generate-icons

[!WARNING] 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).

Update color mode storage key

You can update the storage key used to detect the color mode by updating this constant in the src/theme/config.ts file:

export const COLOR_MODE_STORAGE_KEY = 'start-ui-color-mode'; // Update the key according to your needs

E2E Tests

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 execution

Tests are written in the e2e folder; there is also a e2e/utils folder which contains some utils to help writing tests.

Show hint on development environments

Setup the NEXT_PUBLIC_ENV_NAME env variable with the name of the environment.

NEXT_PUBLIC_ENV_NAME="staging"
NEXT_PUBLIC_ENV_EMOJI="ð¬"
NEXT_PUBLIC_ENV_COLOR_SCHEME="teal"

Translations

Setup the i18n Ally extension

We recommended using the i18n Ally plugin for VS Code for translations management.

Create or edit the .vscode/settings.json file with the following settings:

{
  "i18n-ally.localesPaths": ["src/locales"],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.enabledFrameworks": ["general", "react", "i18next"],
  "i18n-ally.namespace": true,
  "i18n-ally.defaultNamespace": "common",
  "i18n-ally.extract.autoDetect": true,
  "i18n-ally.keysInUse": ["common.languages.*"]
}

Production

pnpm install
pnpm storybook:build # Optional: Will expose the Storybook at `/storybook`
pnpm build
pnpm start

Deploy with Docker

Build the Docker image (replace start-ui-web with your project name)

docker build -t start-ui-web .

Run the Docker image (replace start-ui-web with your project name)

docker run -p 80:3000 start-ui-web

Application will be exposed on port 80 (http://localhost)

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot