yurisldk / realworld-react-fsd

A social blogging site powered by React, Zustand, React-Query / Effector on FSD (Feature-Sliced Design) architectural methodology.

🙌 RealWorld example app 🍰 Feature-Sliced Design

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 effector branch

---

Features

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

Getting started

This project was bootstrapped with Create Vite

To get the frontend running locally:

1. Clone this repo
2. yarn install to install all the dependencies defined in a package.json file.
3. yarn dev to start Vite dev server.

Scripts

• 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 scheme
• yarn 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 dependencies¹

Footnotes

1. 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. ↩

realworld-react-fsd's Issues

Add button component

Have to create new button component in shared/ui and refactor all related code.

• entities\article\ui\favorite-button
• entities\article\ui\load-more-button
• entities\profile\ui\follow-button

Refactor api

Have to refactor api, msw and realworld:

• Move msw from lib to api
• Add types to the model/api. Almost all layers use types from shared\api
  1. map dto
  2. add cross imports for entities layer feature-sliced/documentation#390 (comment)
  3. update layers above the entities layer using the entity api types

Current workflow

TODO

Global

• Add e2e, component tests (Cypress)
• Mock Service Worker - integrate browser side
• Add Storybook

Shared

• Move msw from lib to api #7
• Extend shared\ui, add common components with ccs/scss modules
  • Add pagination component
  • #3
  • Add tab component #11

Entities

• Add types to the model/api. Almost all layers use types from shared\api #7

article

• entities\article\ui\article-editor minimum layer is features, it should fit good in the widgets.
• entities\article\ui\articles-list replace hasNextPage with more generic slot. The component looks like widget, it serve too many inner states, probably need to be moved to widgets
• entities\article\ui\favorite-button remove it. Should be shared/ui/button #3
• entities\article\ui\load-more-button remove it. Should be shared/ui/button #3

profile

• src\entities\profile\ui\follow-button remove it. Should be shared/ui/button #3

Features

• useMutation should has mutationKey and mutationFn like features\session\create\api\createUser.ts
• Update api methods naming - createArticle.ts -> useCreateArticle
• There are several mutations that probably need an optimistic update

article

We should use a more elegant way of implementing a favorite/unwanted feature

• features\article\favorite contain base api that uses for favorite-article and unfavorite-article`, I think we have to separate logic
• features\article\favorite\toggle-favorite-article contain ui's from favorite-article and unfavorite-article, should move to upper layer #3

profile the same as features\article but for follow

session

• Add msw handlers (including jwt)
• Add tests

Widgets

• widgets\current-article-editor should fetch article in the editor page and pass article as prop to the widget
• widgets\global-articles-list and widgets\user-articles-list add pagination (user have to choose between infinity scroll and pagination)

Pages

• home and profile pages implement tab logic with use State, we could create shared/tab component for this #11
• Add hook to check is user guest, author, to avoid ArticlePagetsx 43 - 46
• pages\editor should fetch article
• pages\layouts\main-layout add header and footer components and import here

App

• app\providers\RouterProvider.tsx move guards to session ui #10