This codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API. Powered by FSD (Feature-Sliced Design) architectural methodology.
Feel free to take a look at Effector version in the efferctor branch
![Realworld example app website](https://github.com/cheello/realworld-react-fsd/raw/master/logo.gif)
The example application is a social blogging site (i.e. a Medium.com clone) called "Conduit". It uses a custom API for all requests, including authentication.
General functionality:
- Authenticate users via JWT (login/signup pages + logout button on settings page)
- CRU- users (sign up & settings page - no deleting required)
- CRUD Articles
- CR-D Comments on articles (no updating required)
- GET and display paginated lists of articles
- Favorite articles
- Follow other users
The general page breakdown:
- Home page (URL: / )
- List of tags
- List of articles pulled from either Feed, Global, or by Tag
- Pagination for list of articles
- Sign in/Sign up pages (URL: /login, /register )
- Uses JWT (store the token in localStorage)
- Authentication can be easily switched to session/cookie based
- Settings page (URL: /settings )
- Editor page to create/edit articles (URL: /editor, /editor/article-slug-here )
- Article page (URL: /article/article-slug-here )
- Delete article button (only shown to article's author)
- Render markdown from server client side
- Comments section at bottom of page
- Delete comment button (only shown to comment's author)
- Profile page (URL: /profile/:username, /profile/:username/favorites)
- Show basic user info
- List of articles populated from author's created articles or author's favorited articles
This project was bootstrapped with Create Vite
To get the frontend running locally:
- Clone this repo
yarn install
to install all the dependencies defined in apackage.json
file.yarn dev
to start Vite dev server.
yarn dev
- start a development server with hot reload.yarn build
- build for production. The generated files will be on the dist folder.yarn preview
- locally preview the production build.yarn generate:api
- generate api via swagger schemeyarn lint
- run ESLint.yarn lint:perf
- run ESLint and track the performance of individual rules.yarn prettier
- run Prettier on changed files.yarn prettier:all
- run Prettier on all files.yarn test:run
- run all test suites.yarn test:watch
- run all test suites but watch for changes and rerun tests when they change.yarn test:coverage
- run all test suites and enable coverage report.coverage:open
- open coverage report in browser.yarn test:coverage:open
- run all test suites and enable coverage report then open coverage report in browser.yarn dep-cruiser:preview
- create a graph of the dependencies1
Footnotes
-
This assumes the GraphViz
dot
command is available - on most linux and comparable systems this will be. In case it's not, see GraphViz' download page for instructions on how to get it on your machine. ↩