ReArt is a modern web platform designed for creating, reading, and sharing articles.
It provides users with a simple and intuitive interface for writing posts, exploring trending content, and interacting with other authors.
- ✍️ Create and edit your own articles
- 📚 Browse and read articles from different categories
- 💬 Comment on articles and join discussions
- 🔍 Search by title and description
- 👤 User authentication and profile customization
npm install
npm run start:dev
or
npm run start:dev:vite
npm run start– Start the frontend project on Webpack Dev Servernpm run start:vite– Start the frontend project on Vitenpm run start:dev– Start the frontend project on Webpack Dev Server + backendnpm run start:dev:vite– Start the frontend project on Vite + backendnpm run server– Start the backend server
npm run build:prod– Build for productionnpm run build:dev– Build for development (not minified)
npm run lint– Lint TypeScript and SCSS filesnpm run lint:fix– Fix TypeScript and SCSS files with linter
npm run test:unit– Run unit tests with Jestnpm run test:ui– Run screenshot tests with Lokinpm run test:ui:ok– Approve new screenshotsnpm run test:ui:ci– Run screenshot tests in CInpm run test:ui:report– Generate full report for screenshot testsnpm run test:ui:json– Generate JSON report for screenshot testsnpm run test:ui:html– Generate HTML report for screenshot tests
npm run storybook– Start Storybooknpm run storybook:build– Build Storybook
npm run prepare– Pre-commit hooksnpm run generate:slice– Script to generate FSD slices
The project is built following the Feature-Sliced Design (FSD) methodology — a modern and scalable approach to structuring frontend applications.
src/
├─ app/ # Main configs and initialization
├─ entities/ # Entities (Article, User, Profile, etc.)
├─ features/ # Feature modules (AddNewComment, ArticleRating, etc.)
├─ pages/ # Pages
├─ shared/ # Reusable components and libraries
├─ widgets/ # Ready-made UI compositions from features + entities (Navbar, Sidebar, etc.)
This helps keep the codebase clean, maintainable, and easy to extend as the project grows.
Learn more: Feature-Sliced Design
The project uses next-intl for managing translations and handling internationalization (i18n) in Next.js.
This library provides a simple and efficient way to localize both server and client components while maintaining great
performance.
🗂️ All translation files are stored in the /public/locales directory, organized by locale (e.g., en.json, ru.json,
etc.).
This structure allows easy addition of new languages and seamless switching between them.
Documentation: next-intl
This project uses 3 types of tests:
- Unit tests with Jest –
npm run test:unit - Component tests with React Testing Library –
npm run test:unit - Screenshot testing with Loki –
npm run test:ui
The project uses ESLint to check TypeScript code and Stylelint to check style files.
For strict control of the main architectural principles, a custom ESLint plugin, eslint-plugin-revol, is used. It contains 3 rules:
- path-checker – forbids using absolute imports within the same module.
- layer-imports – checks the correct usage of layers according to FSD principles
(for example, widgets cannot be used in features or entities). - public-api-imports – allows importing from other modules only through the public API. Supports auto-fix.
npm run lint– Lint TypeScript and SCSS filesnpm run lint:fix– Fix TypeScript and SCSS files with the linter
In this project, each component has its own story cases.
Server requests are mocked using storybook-addon-mock.
The story cases file is created next to the component with the extension .stories.tsx.
You can run Storybook with the command:
npm run storybook
More details about Storybook
For development, the project has 2 configs:
- Webpack -
./config/build - Vite -
vite.config.ts
Both bundlers are adapted to the main features of the application.
All configuration files are stored in /config:
/config/babel– Babel configuration/config/build– Webpack configuration/config/jest– Test environment configuration/config/storybook– Storybook configuration
The scripts folder contains various scripts for refactoring, simplifying code writing, generating reports, etc.
The project includes a fully automated CI/CD pipeline configured via GitHub Actions.
The configuration files are located in .github/workflows.
During the CI process, the following checks are performed:
- ✅ All types of tests
- 🧱 Project build and Storybook build
- 🔍 Code linting and formatting validation
To maintain consistent code quality, pre-commit hooks are configured with Husky.
Before each commit, the following tasks are automatically executed:
- 🧩 ESLint and Stylelint checks
Configuration files are located in .husky.
Data interaction is handled using Redux Toolkit.
Reusable entities should be normalized with EntityAdapter whenever possible.
Server requests are sent using RTK Query.
To asynchronously load reducers (to avoid including them in the main bundle),
DynamicModuleLoader is used.
- AddNewComment
- articleEditForm
- ArticleRating
- ArticleRecommendationsList
- AuthByUsername
- AvatarDropdown
- EditableProfileCard
- LanguageSwitcher
- NotificationButton
- ProfileRating
- ThemeSwitcher
- ScrollRecovery
Made with ❤️ by the Revol