devdlabs/realworld-react-fsd

A social blogging site powered by React, Zustand, React-Query 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.

---

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