You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld)spec and API. Powered by [FSD (Feature-Sliced Design)](https://feature-sliced.github.io/documentation) architectural methodology.
3
+
A modern implementation of the [RealWorld](https://github.com/gothinkster/realworld)app using [FSD (Feature-Sliced Design)](https://feature-sliced.github.io/documentation), React, TypeScript, and a contemporary frontend stack.
This project is an educational and demonstration Medium-clone built with the Feature-Sliced Design (FSD) architectural approach and modern frontend tools. It is suitable for learning, experimentation, and as a template for large-scale applications.
20
10
21
11
![Preview][preview-domain]
22
12
23
-
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.
24
-
25
-
### Advanced Features
26
-
27
-
-**Lazy Loading for React Components and React Router** – Components and routes are dynamically loaded only when needed, improving initial load times and optimizing performance.
28
-
-**React Suspense** – Used for handling asynchronous component loading, providing a smooth user experience while waiting for data to load.
29
-
-**Error Boundaries** – Ensures the application remains stable by catching JavaScript errors in component trees and displaying fallback UIs instead of crashing the app.
30
-
-**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.
31
-
-**Lazy Loading for Redux Slices** – Dynamically loads Redux slices when required, reducing the initial bundle size and improving app efficiency.
32
-
-**Zod Validation for Backend Responses** – Ensures API responses adhere to expected structures using Zod contracts, improving reliability and preventing unexpected runtime errors.
-`widgets/` — large widgets (article feed, comments, etc.)
34
+
-`features/` — business features (authentication, articles, comments, etc.)
35
+
-`entities/` — business entities (article, comment, profile, etc.)
36
+
-`shared/` — reusable modules, utilities, UI components, API
37
+
-`public/` — static files
38
+
-`build/` — production build output
39
+
-`coverage/` — test coverage reports
40
+
-`cypress/` — e2e tests
41
+
42
+
## Advanced Features
43
+
44
+
-**Code Splitting & Lazy Loading** - React components and routes are loaded on demand, reducing initial bundle size and improving performance.
45
+
-**React Suspense & Concurrent Features** - Handles asynchronous loading and leverages modern React features for a smoother user experience.
46
+
-**Error Boundaries & Centralized Error Logging** - Prevents app crashes by catching JavaScript errors in component trees and displaying fallback UIs, with centralized error reporting.
47
+
-**Optimistic UI Updates & Data Prefetching (React Query)** - Instantly updates the UI before server confirmation, prefetches and caches data for fast, responsive interactions.
48
+
-**Dynamic Redux Slices** - Loads Redux slices only when needed, optimizing bundle size and state management.
49
+
-**Type-Safe API Layer with Axios** - Centralized, strongly-typed API requests and error handling.
50
+
-**Zod-based API Validation** - Validates backend responses with Zod schemas, ensuring data consistency and type safety.
51
+
-**React Hook Form Integration** - Efficient, scalable form state management with validation and error display.
52
+
-**Role-based Access & Permissions** - Permission checks for UI and API actions.
53
+
-**Comprehensive Testing** - Includes unit (Jest) and e2e (Cypress) tests, with tag-based selection, custom commands, and coverage reports.
54
+
-**CI/CD Integration** - Automated testing, linting, and formatting in the pipeline for reliable delivery.
55
+
-**Environment-based Configuration** - Supports multiple environments via `.env` files and runtime variables.
56
+
-**Feature-Sliced Design Architecture** - Strict adherence to FSD for scalable, maintainable code.
57
+
-**Custom ESLint & Prettier Rules** - Enforced code style, import order, and formatting for consistency.
58
+
-**Bundle Analysis & Dependency Graphs** - Visual tools for analyzing bundle size and module dependencies.
59
+
-**Hot Module Replacement & Fast Refresh** - Instant feedback during development for a seamless DX.
33
60
34
61
### Dependency Graph
35
62
@@ -39,105 +66,57 @@ The example application is a social blogging site (i.e. a Medium.com clone) call
39
66
40
67
![Bundle Analyze][bundle-analyze-domain]
41
68
42
-
**General functionality:**
43
-
44
-
- Authenticate users via JWT (login/signup pages + logout button on settings page)
45
-
- CRU- users (sign up & settings page - no deleting required)
46
-
- CRUD Articles
47
-
- CR-D Comments on articles (no updating required)
48
-
- GET and display paginated lists of articles
49
-
- Favorite articles
50
-
- Follow other users
51
-
52
69
## Scripts
53
70
54
-
-**`yarn start`** - Runs the Webpack development server with `webpack serve`, using development mode.
55
-
-**`yarn build:dev`** - Compiles the project in development mode using Webpack.
56
-
-**`yarn build:prod`** - Compiles the project in production mode using Webpack for optimized output.
57
-
-**`yarn analyze`** - Builds the project in development mode and enables Webpack Bundle Analyzer for visualizing bundle contents.
58
-
-**`yarn test`** - Runs Jest to execute unit tests.
59
-
-**`yarn eslint`** - Runs ESLint to lint the `src` directory, automatically fixing issues and ensuring no unused disable directives remain.
60
-
-**`yarn prettier`** - Formats the entire project using Prettier, respecting `.gitignore` rules.
61
-
-**`yarn prepare`** - Initializes Husky and sets up pre-commit and pre-push Git hooks.
71
+
-**`yarn start`** - Launches the Webpack development server with hot module replacement.
72
+
-**`yarn build:dev`** - Builds the project in development mode.
73
+
-**`yarn build:prod`** - Builds the project in production mode with optimizations.
74
+
-**`yarn analyze`** - Builds and opens the Webpack Bundle Analyzer for bundle inspection.
75
+
-**`yarn test`** - Runs all unit tests with Jest.
76
+
-**`yarn eslint`** - Lints and auto-fixes code in the `src` directory.
77
+
-**`yarn prettier`** - Formats the codebase using Prettier.
62
78
-**`yarn graph`** - Generates a dependency graph of the `src` directory using `dependency-cruiser`.[^1]
79
+
-**`yarn cy:open`** - Opens the Cypress UI for interactive e2e testing.
80
+
-**`yarn cy:run`** - Runs all Cypress e2e tests in headless mode.
81
+
-**`yarn prepare`** - Sets up Husky git hooks for pre-commit and pre-push.
82
+
-**`yarn db:seed:dev`** - Seeds the development database via backend API.
83
+
-**`yarn db:seed:prod`** - Seeds the production database via backend API.
63
84
64
85
[^1]:
65
86
This assumes the GraphViz `dot` command is available - on most linux and
66
87
comparable systems this will be. In case it's not, see
67
88
[GraphViz' download page](https://www.graphviz.org/download/) for instructions
68
89
on how to get it on your machine.
69
90
70
-
## Git Hooks and Formatting
71
-
72
-
This project uses **Husky** and **lint-staged** to enforce code quality before commits and pushes.
73
-
74
-
### Git hooks configured:
75
-
76
-
-**pre-commit** – Runs ESLint and Prettier on staged files
77
-
-**pre-push** – Runs `yarn test` to ensure tests pass before pushing
78
-
79
-
### Formatting Commit
80
-
81
-
The entire codebase has been formatted using ESLint and Prettier.
82
-
To avoid noisy blame history caused by formatting-only changes, the formatting commit hash is listed in `.git-blame-ignore-revs`.
83
-
84
-
To configure your local Git to ignore formatting-only commits in blame:
2.`yarn install` to install all the dependencies defined in a `package.json` file.
96
-
3.`yarn start` to start webpack dev server.
97
-
98
-
## 🧪 Demo Environment
99
-
100
-
You can run both the frontend (this repo) and the backend ([node-express-realworld-example-app](https://github.com/yurisldk/node-express-realworld-example-app)) together using Docker Compose.
101
-
102
-
A demo setup is available in [`ops/deploy/demo`](./ops/deploy/demo), which includes preconfigured services:
103
-
104
-
- Frontend (React app)
105
-
- Backend API (Node.js + Express + Prisma)
106
-
- PostgreSQL database
107
-
- PgAdmin for DB inspection
108
-
109
-
### Run the fullstack demo
110
-
111
-
Make sure Docker is installed, then from the project root run:
91
+
## Demo Environment
112
92
113
-
```bash
114
-
docker-compose -f ops/deploy/demo/docker-compose.yml --env-file ops/deploy/demo/.env up --build -d
115
-
```
93
+
A ready-to-use demo environment is provided for running both the frontend (this repo) and the backend ([node-express-realworld-example-app](https://github.com/yurisldk/node-express-realworld-example-app)) together using Docker Compose.
116
94
117
-
Once started, you can access:
95
+
The setup in [`ops/deploy/demo`](./ops/deploy/demo) includes preconfigured services:
118
96
119
-
- Frontend: http://localhost:30401
120
-
- API: http://localhost:30400
121
-
- PgAdmin: http://localhost:30433
97
+
-**frontend** — React-based frontend client
98
+
-**api** — Node.js/Express backend API with Prisma and PostgreSQL
99
+
-**db** — PostgreSQL database for persistent storage
100
+
-**pgadmin** — Admin UI for managing PostgreSQL
122
101
123
-
##Backend Setup
102
+
### Usage
124
103
125
-
This project is fully compatible with my **[RealWorld Express + Prisma](https://github.com/yurisldk/node-express-realworld-example-app)** backend implementation.
104
+
1. A `.env` file is already provided in the demo directory. No extra setup is needed.
105
+
2. Start the environment:
106
+
```bash
107
+
docker-compose -f ops/deploy/demo/docker-compose.yml --env-file ops/deploy/demo/.env up --build -d
108
+
```
109
+
3. Access the services:
110
+
- Frontend: <http://localhost:30401>
111
+
- API: <http://localhost:30400>
112
+
- PgAdmin: <http://localhost:30433>
126
113
127
-
To set up the backend:
114
+
**Notes:**
128
115
129
-
1. Follow the installation instructions in the [RealWorld Express + Prisma repository](https://github.com/yurisldk/node-express-realworld-example-app).
130
-
2. Ensure the backend is running locally or deployed.
116
+
- PostgreSQL data is persisted via named volumes.
117
+
- Images are pulled from GitHub Container Registry (GHCR).
118
+
- On ARM-based systems (e.g., Apple Silicon), ensure Docker supports `linux/amd64` platform.
0 commit comments