Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oedotme/render
Opinionated React Template
https://github.com/oedotme/render
app boilerplate client eslint frontend hooks husky prettier react react-router structure tailwindcss template typescript vite web
Last synced: 6 days ago
JSON representation
Opinionated React Template
- Host: GitHub
- URL: https://github.com/oedotme/render
- Owner: oedotme
- License: mit
- Created: 2021-04-17T09:59:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-24T09:22:16.000Z (13 days ago)
- Last Synced: 2024-10-24T19:48:57.487Z (12 days ago)
- Topics: app, boilerplate, client, eslint, frontend, hooks, husky, prettier, react, react-router, structure, tailwindcss, template, typescript, vite, web
- Language: TypeScript
- Homepage: https://renderapp.vercel.app
- Size: 1.44 MB
- Stars: 128
- Watchers: 2
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - oedotme/render - Opinionated React Template (TypeScript)
README
Opinionated React Template
# Render
Opinionated React template setup with modern tooling, here some [recommendations](#recommendations) if needed
## Technologies and tools
- [React](https://reactjs.org)
- [TypeScript](https://www.typescriptlang.org)
- [React Router](https://reactrouter.com)
- [Generouted](https://github.com/oedotme/generouted)
- [TailwindCSS](https://tailwindcss.com)
- [Playwright](https://playwright.dev)
- [ESLint](https://eslint.org)
- [Prettier](https://prettier.io)
- [Vite](https://vitejs.dev)
- [PNPM](https://pnpm.io)
- [Husky](https://typicode.github.io/husky)
- [Commitlint](https://commitlint.js.org)
- [Lint-staged](https://github.com/okonet/lint-staged)
- [Vercel](http://vercel.com)
## Highlights
### File based routing
- Using [`generouted` with type-safe navigation](https://github.com/oedotme/generouted)
- Check [`generouted` features](https://github.com/oedotme/generouted#features) and [conventions](https://github.com/oedotme/generouted#conventions) for more details
### Authentication example
- [Authentication context](./src/context/auth.tsx)
- [Routes guard](./src/config/redirects.tsx)
### Custom hooks
- [`useQuery` hook](./src/hooks/query.ts)
## Usage
By [generating](https://github.com/oedotme/render/generate) from this template then/or cloning locally
## Getting started
#### Installation
```shell
# install dependencies
pnpm install
# install playwright browsers
pnpm playwright install --with-deps chromium
```
#### Development and build
```shell
# 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
```shell
# 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](https://astro.build)
- [Next.js](https://nextjs.org)
- [Remix](https://remix.run)
- [Blitz](https://blitzjs.com)
- [Redwood](https://redwoodjs.com)
#### Non-React Frameworks
- [Solid](https://www.solidjs.com)
- [SolidStart](https://start.solidjs.com)
- [Preact](https://preactjs.com)
#### Languages
- [ReScript](https://rescript-lang.org)
#### Routing
- [TanStack Router](https://tanstack.com/router)
#### Components
- [Radix UI](https://www.radix-ui.com)
- [Headless UI](https://headlessui.dev)
- [Chakra UI](https://chakra-ui.com)
#### Build tools
- [Esbuild](https://esbuild.github.io)
- [Parcel](https://parceljs.org)
#### Server state
- [TanStack Query](https://tanstack.com/query)
- [SWR](https://swr.vercel.app)
#### Data fetching
- [Ky](https://github.com/sindresorhus/ky)
- [Redaxios](https://github.com/developit/redaxios)
- [Axios](https://github.com/axios/axios)
#### Global state
- [Zustand](https://github.com/pmndrs/zustand)
- [Jotai](https://jotai.org)
- [Recoil](https://recoiljs.org)
- [Redux Toolkit](https://redux-toolkit.js.org)
#### Animation
- [Framer Motion](https://www.framer.com/motion)
## License
MIT