Installing the project

• Install the dependencies:

npm install

• Run the development server:

npm run dev

• Building and previewing the app:

npm run build

npm run preview

High Level Tooling Overview

• Build
  • build & dev server: vite + typescript + swc
  • pwa helper: vite-pwa
  • style processing: tailwind postcss + autoprifixer
  • path aliasing: vite-tsconfig-paths
• Framework
  • front end: react
  • routing: react-router-dom
  • error handling: react-error-boundary
• Styling
  • css framework: tailwind & plugins
  • font management: fontsource
  • headless UI components: headlessui
  • icon library: heroicons
  • class composition: clsx & twailwind-merge
• State
  • state management: zustand
  • state persistence: idb-keyval
• Forms
  • form management: react-hook-form
  • form validation: zod
• Cryptography
  • encryption & signing: tweetnacl & tweetnacl-util
  • key derivation: scrypt-pdkdf

Root Structure

Standard vite structure

├── dist/               # bundled distribution files
├── node_modules/       # node module directory
├── public/             # assets only accessed by url
├── src/                # main project codebase
├── index.html          # main entry file
├── .eslintrc.cjs       # es-lint configuration
├── .gitignore          # gitignore configuration
├── package-lock.json   # auto generated
├── package.json        # package file
├── postcss.config.js   # postcss configuration
├── tailwind.config.js  # tailwind configuration
├── tsconfig.json       # typescript configuration
├── tsconfig.node.json  # node specific typescript configuration
└── vite.config.ts      # vite project configuration

Source Structure

Organized into common and features to faciliate reduce cross over from multiple / many contributors.

└── src
    |
    ├── common          # shared code used across entire application
    |   ├── assets      # static files such as images, fonts, etc
    |   ├── components  # components used across the entire application
    |   ├── config      # global configurations, env variables etc.
    |   ├── hooks       # global react hooks
    |   ├── libraries   # preconfigured & re-exported libraries
    |   ├── providers   # all of the app level providers
    |   ├── routes      # routes configuration
    |   ├── services    # external api services
    |   ├── stores      # global state stores
    |   ├── test        # test utilities and mock server
    |   ├── types       # base types used across the application
    |   ├── utils       # shared utility functions
    |   └── views       # pages structured to match routes, assembly only no logic
    |       ├── auth
    |       |   ├── Login.tsx
    |       |   └── Logout.tsx
    |       └── Home.tsx
    |
    ├── features            # feature based modules
    |   └── authentication  # each feature uses same structure as common
    |       ├── assets      # static files such as images, fonts, etc
    |       ├── components  # components used across the entire application
    |       └── ...         # other folders as needs
    |
    |
    ├── App.tsx         # brings together, routes, global providers, etc.
    ├── index.css       # import style libs, fonts, modules etc.
    ├── index.tsx       # initialize react app
    └── vite-env.d.ts   # vite type declarations

Style Guide

Exporting

Always use named exports

export const Hello = () => <h1>Hello</h1>

export immediate children common & features folders via index.ts,

└── src
    └── common
        └── components
            └── button
                ├── primary.tsx
                ├── secondary.tsx
                └── index.ts

// src/common/components/Button/index.ts
export * from './primary';
export * from './secondary';

// src/common/components/index.ts
export * from './button';

Importing

Path aliases are setup for common folders and modules.

import { Primary, Secondary } from '@components/button';
import { Alert } from '@modules/error';

Naming Conventions

Read Naming CheatSheet

• use English language
• use camelCase for variables, functions, methods, and instances
• use PascalCase for classes and React components
• use kebab-case for file names and folder names
• use A/HC/LC Pattern for functions

Name	Prefix	Action (A)	High context (HC)	Low context (LC)
getUser		get	User
getUserMessages		get	User	Messages
handleClickOutside		handle	Click	Outside
shouldDisplayMessage	should	Display	Message

Development Tips

• Don't over-think it, have fun
• For existing features:
  • follow the existing feature patterns
  • if patterns break style guide, refactor
• For new features:
  • start in a view as your workspace
  • as you build out functionality promote to a feature
  • if feature becomes used in multiple features promote to common
• Perfect is the enemy of good, get it working then you or others refactor
• If you're stuck don't grind alone, reach out to the community

Credit, Inspiration, & Resources

• Bullet Proof React
• Naming CheetSheet
• React Typescript Cheatsheet
• Zod & HookForm Tutorial