Skip to content

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

License

Notifications You must be signed in to change notification settings

yurisldk/realworld-react-fsd

Repository files navigation

🙌 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.

Realworld example app


Netlify Status Build workflow Codecov Code style: prettier license

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.

Dependency Graph

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 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.
  • 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

Feature-Sliced Design Vite React React Router React Query Zustand TypeScript

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.