React/Recoil/TypeScript codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.
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 repo.
- TypeScript
- React
- Recoil
- Vite
- ESLint
- App (Pages) -> Application <- (via interface) <- API (Services, Infrastructure)
- Common: UI
- src/components: reusable ui components
npm ci
npm run dev- 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/
- 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
- [email protected]
- [email protected]
- [email protected]
- password: Pa$$w0rd!