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

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

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 prepare - Initializes Husky and sets up pre-commit and pre-push Git hooks.
• yarn graph - Generates a dependency graph of the src directory using dependency-cruiser.¹

Git Hooks and Formatting

This project uses Husky and lint-staged to enforce code quality before commits and pushes.

Git hooks configured:

• pre-commit – Runs ESLint and Prettier on staged files
• pre-push – Runs yarn test to ensure tests pass before pushing

Formatting Commit

The entire codebase has been formatted using ESLint and Prettier. To avoid noisy blame history caused by formatting-only changes, the formatting commit hash is listed in .git-blame-ignore-revs.

To configure your local Git to ignore formatting-only commits in blame:

git config blame.ignoreRevsFile .git-blame-ignore-revs

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.

🧪 Demo Environment

You can run both the frontend (this repo) and the backend (node-express-realworld-example-app) together using Docker Compose.

A demo setup is available in ops/deploy/demo, which includes preconfigured services:

• Frontend (React app)
• Backend API (Node.js + Express + Prisma)
• PostgreSQL database
• PgAdmin for DB inspection

Run the fullstack demo

Make sure Docker is installed, then from the project root run:

docker-compose -f ops/deploy/demo/docker-compose.yml --env-file ops/deploy/demo/.env up --build -d

Once started, you can access:

• Frontend: http://localhost:30401
• API: http://localhost:30400
• PgAdmin: http://localhost:30433

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.

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