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

Advanced Features

• Lazy Loading for React Components and React Router – Components and routes are dynamically loaded only when needed, improving initial load times and optimizing performance.
• React Suspense – Used for handling asynchronous component loading, providing a smooth user experience while waiting for data to load.
• Error Boundaries – Ensures the application remains stable by catching JavaScript errors in component trees and displaying fallback UIs instead of crashing the app.
• Optimistic Updates with React Query – Provides an enhanced user experience by updating the UI immediately before waiting for the server response, making interactions feel faster.
• Lazy Loading for Redux Slices – Dynamically loads Redux slices when required, reducing the initial bundle size and improving app efficiency.
• Zod Validation for Backend Responses – Ensures API responses adhere to expected structures using Zod contracts, improving reliability and preventing unexpected runtime errors.

Dependency Graph

Bundle Analyze

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

Getting started

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 start to start webpack dev server.

Backend Setup

This project is fully compatible with my RealWorld Express + Prisma backend implementation.

To set up the backend:

1. Follow the installation instructions in the RealWorld Express + Prisma repository.
2. Ensure the backend is running locally or deployed.

Scripts

• yarn start - Runs the Webpack development server with webpack serve, using development mode.
• yarn build:dev - Compiles the project in development mode using Webpack.
• yarn build:prod - Compiles the project in production mode using Webpack for optimized output.
• yarn analyze - Builds the project in development mode and enables Webpack Bundle Analyzer for visualizing bundle contents.
• yarn test - Runs Jest to execute unit tests.
• yarn eslint - Runs ESLint to lint the src directory, automatically fixing issues and ensuring no unused disable directives remain.
• yarn prettier - Formats the entire project using Prettier, respecting .gitignore rules.
• yarn graph - Generates a dependency graph of the src directory using dependency-cruiser.¹

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