Opinionated React Template

Render

Opinionated React template setup with modern tooling, here some recommendations if needed

Technologies and tools

• React
• TypeScript
• React Router
• Generouted
• TailwindCSS
• Playwright
• ESLint
• Prettier
• Vite
• PNPM
• Husky
• Commitlint
• Lint-staged
• Vercel

Highlights

File based routing

• Using generouted with type-safe navigation
• Check generouted features and conventions for more details

Authentication example

• Authentication context
• Routes guard

Custom hooks

• useQuery hook

Usage

By generating from this template then/or cloning locally

Getting started

Installation

# install dependencies
pnpm install

# install playwright browsers
pnpm playwright install --with-deps chromium

Development and build

# start development server · http://localhost:3000
pnpm dev

# build client for production
pnpm build

# start production preview · http://localhost:5000
pnpm preview

Testing — end-to-end and unit tests

# run all tests from the command-line
pnpm test

# run end-to-end tests in interactive mode
pnpm test:ui

# run end-to-end tests in headed browsers
pnpm test:headed

# run test generator to record an end-to-end test
pnpm test:record

Recommendations

Frameworks

• Astro
• Next.js
• Remix
• Blitz
• Redwood

Non-React Frameworks

• Solid
• SolidStart
• Preact

Languages

• ReScript

Routing

• TanStack Router

Components

• Radix UI
• Headless UI
• Chakra UI

Build tools

• Esbuild
• Parcel

Server state

• TanStack Query
• SWR

Data fetching

• Ky
• Redaxios
• Axios

Global state

• Zustand
• Jotai
• Recoil
• Redux Toolkit

Animation

• Framer Motion

License

MIT