Skip to content

Latest commit

 

History

History
110 lines (84 loc) · 6.7 KB

README.md

File metadata and controls

110 lines (84 loc) · 6.7 KB
Raw

🙌 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

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

Backend Assistance Request

Hello everyone,

I’m currently working on the backend for the RealWorld application, built using React. However, I’ve encountered some challenges due to recent updates to the API specifications. As mentioned in this GitHub discussion, the project will no longer be maintained. The API server has been deleted, and the demo deployment is no longer available, which has introduced some issues for developers relying on it.

If anyone has experience with these changes or expertise in implementing the backend, I’d greatly appreciate your assistance in adapting my backend to align with the updated specifications. Your support will be essential in ensuring compatibility and smooth operation for the app.

As a temporary solution, we can use the official backend implementation from this GitHub repository or explore other community-backed implementations available through Codebase Show. These resources should help keep the project running while I work on resolving the backend issues.

For further details and feedback, please refer to the Backend Assistance Request Issue for more context and ongoing updates.

Feel free to reach out or contribute to the repository if you can provide help!

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

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