maxwaiyaki / render

Opinionated React Template

Opinionated React Template

Render

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

Stack

• React
• TypeScript
• React Router
• Tailwind CSS
• Vite
• ESLint
• Prettier
• Husky
• Vercel

Features

File based routing

• Vite powered
• Next.js inspired
• Extensions .tsx
• Custom app component at src/pages/_app.tsx
• 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
• Optional page scope

Hooks

• Authentication useAuth
• API queries useQuery

Pre-rendering

• Script npm run export
• Static HTML generated at build/static/dist

Usage

By generating from this template then/or cloning locally

Commands

# install dependencies
npm install

# start development server · http://localhost:3000
npm run dev

# build client for production
npm run build

# start production preview · http://localhost:5000
npm run start

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