Rite

Opinionated React Starter Template

Inspired by Vitesse

Features

Sumarry

• React
  • Vite, pnpm, ESBuild
• TypeScript , because it's the right way to do Rite
• Route your way
  • Server and Client Routing
  • File-System Routing
  • Domain-based Routing
• SSR
• Easily manage application states
  • Bearable store-based state management
  • Minimalist atomic state management
• Supabase
• Make the Design you want
  • Layout system
  • Tailwnd CSS 3
  • Mantine
  • Sass/SCSS
  • CSS-in-JS
  • Any icon from anywhere
• DX is a must
  • On-demend importing
  • Easily use SVGs
  • Google Fonts support
  • Markdown Support
  • Linting

Detailed

Design

• Layout system | Make pages with different layouts (e.g. one column or two columns, right sidebar or left sidebar) easily
• Tailwind CSS 3 | A utility-first CSS framework for rapid UI development.
• Mantine | react components library with native dark theme support
• Sass/SCSS support
• CSS-in-JS | Like to define your styles in JavaScript?
• Use fonts from Google Fonts, performant & easy with vite-plugin-webfont-dl
• Icon support
  • Iconify | use icons from any icon sets 🔍Icônes
  • unplugin-icons | icons as components

Plugins

• Zustand
• Jotai
• vite-plugin-mdx
• Supabase
• SVGR

Coding style

• ESLint with eslint-canonical-config and eslint-config-prettier

Path aliases

• Alias @ to <rootDir>/modules

Dev tools

• TypeScript
• PostCSS with autoprefixer
• pnpm
• Recomended VS Code Extentions
• unplugin-auto-import
• vite-plugin-tips
• vite-plugin-sass-dts

Usage

Development

Just run and visit http://localhost:3000

pnpm dev

Build

To build the App, run

pnpm build

And you will see the generated file in dist that ready to be served.

TODO

• Add Demo for features
• PWA
• i18n
• Testing
• E2E Testing
• Standards checking with Husky
• Storybook
• Github Actions

Why

When one of my friends said If a good strongly opinionated template existed for react, i'll use react it gave me the motivation to create Rite.