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

---

Backend Solution for RealWorld API Challenges

As part of the solution to the issues caused by recent changes to the RealWorld API specifications, I’ve forked an backend and created a fully compatible alternative with RealWorld Express + Prisma.

This fork addresses the challenges caused by the deletion of the official API server and demo deployment, and it implements the updated API specifications to keep the project running smoothly.

To get the backend up and running, you can find instructions on how to install and set it up in the RealWorld Express + Prisma repository.

Feel free to contribute or reach out if you have any questions or suggestions!

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