alekzajic / vitality

Opinionated React Template

Opinionated React Template

Vitality

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

Technologies and tools

• React
• TypeScript
• React Location
• TailwindCSS
• ESLint
• Prettier
• Vite
• PNPM
• Husky
• Commitlint
• Lint-staged
• React Query
• React Hook Form
• Zustand
• Vitest
• Jest
• Testing Library
• Vercel

Features

File based routing

• Using generouted
• Vite powered
• Next.js inspired
• Supports .tsx extensions
• Custom app at src/pages/_app.tsx (optional)
• Custom 404 page at src/pages/404.tsx (optional)
• Navigation between routes using React Location's <Link /> component

Conventions

• Index routes src/pages/index.tsx to /
• Nested routes src/pages/nested/within.tsx to /nested/within
• Dynamic routes src/pages/dynamic/[timestamp].tsx to /dynamic/:timestamp
• Catch all routes src/pages/catch/[...all].tsx to /catch/*
• None matching routes src/pages/404.tsx

Authentication example

• Authentication context
• Routes guard

Custom hooks

• useQuery hook

Usage

By generating from this template then/or cloning locally

Commands

# install dependencies
pnpm install

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

# build client for production
pnpm build

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

# run tests
pnpm test

Recommendations

Frameworks

• Next.js
• Blitz
• Redwood
• Remix

Languages

• ReScript

Components

• Headless UI
• Chakra UI

Build tools

• Snowpack

Server state

• React Query
• SWR

Data fetching

• Redaxios
• Axios

Global state

• Recoil
• Zustand
• Jotai
• Redux Toolkit

Animation

• Framer Motion

License

MIT