https://github.com/unlight/react-typescript-realworld-example-app
React TypeScript realworld example app
https://github.com/unlight/react-typescript-realworld-example-app
realworld-example realworld-frontend realworld-react
Last synced: 3 months ago
JSON representation
React TypeScript realworld example app
- Host: GitHub
- URL: https://github.com/unlight/react-typescript-realworld-example-app
- Owner: unlight
- Created: 2020-04-24T21:08:48.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-20T03:59:10.000Z (almost 3 years ago)
- Last Synced: 2025-04-11T08:54:41.711Z (about 1 year ago)
- Topics: realworld-example, realworld-frontend, realworld-react
- Language: TypeScript
- Homepage:
- Size: 1.01 MB
- Stars: 16
- Watchers: 2
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RealWorld Example App
> ### React/Recoil/TypeScript codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld) spec and API.
### [Demo](https://github.com/gothinkster/realworld) [RealWorld](https://github.com/gothinkster/realworld)
This codebase was created to demonstrate a fully fledged fullstack application built with **React/Recoil/TypeScript** including CRUD operations, authentication, routing, pagination, and more.
We've gone to great lengths to adhere to the **React/Recoil/TypeScript** community styleguides & best practices.
For more information on how to this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo.
## Stack
- TypeScript
- React
- Recoil
- Vite
- ESLint
## How it works
### Layers:
- App (Pages) -> Application <- (via interface) <- API (Services, Infrastructure)
- Common: UI
### Architecture notes
- src/components: reusable ui components
## Getting started
```sh
npm ci
npm run dev
```
## Resources
- https://demo.realworld.io/
- https://realworld-docs.netlify.app/docs/specs/backend-specs/endpoints
- https://github.com/recoil-world/react-recoil-realworld-example-app
- https://gist.github.com/unlight/68a69ba19c06512f18f254ff702a9e38 - frontend architecture layers
- https://blog.johnnyreilly.com/2022/09/20/react-usesearchparamsstate/
## Todo
- pagination - https://tailwindow.github.io/component-tailwindcss/components/button/pagination/index.html#
https://ahooks.js.org/hooks/use-pagination
- get rid of class-validator (use zod)
- switch to react location
- https://realworld-docs.netlify.app/docs/specs/backend-specs/endpoints
- https://github.com/gothinkster/realworld/tree/master/api
- react boundaries
- use suspension
- use https://github.com/erictooth/react-stateful-tabs
- use 2 components for tabs do not use feed query param
- setIsLoading make as global indicator error and pending
- notification component https://www.tailwind-kit.com/components/alert https://tailwindow.github.io/component-tailwindcss/components/alert/alert-1/index.html https://tailwindow.github.io/component-tailwindcss/components/alert/alert-2/index.html
## Users
- gymynaxeru@mailinator.com
- tetikokucy@mailinator.com
- mynesy@mailinator.com
- password: Pa$$w0rd!