https://github.com/zavvdev/react-rtk-bootstrap
Bootstrap project for Front-End applications
https://github.com/zavvdev/react-rtk-bootstrap
react redux redux-toolkit starter-project starter-template typescript
Last synced: 10 months ago
JSON representation
Bootstrap project for Front-End applications
- Host: GitHub
- URL: https://github.com/zavvdev/react-rtk-bootstrap
- Owner: zavvdev
- Created: 2024-05-24T16:27:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-31T21:38:20.000Z (over 1 year ago)
- Last Synced: 2025-02-06T05:13:53.957Z (12 months ago)
- Topics: react, redux, redux-toolkit, starter-project, starter-template, typescript
- Language: TypeScript
- Homepage:
- Size: 1.34 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Documentation
Application consists of layers. Each layer has slices (subfolders). Layers and slices have strict dependency rules.
In this documentation: slices depedency flow directed from bottom to top which means that slices from bottom can build direct dependency on any from the top.
Amount of slices can grow during application development. Please make sure that they follow dependency rules and keep them documented here. Do not forget to restrict imports from `.eslintrc.json` if needed.
### Layers
- Entities
- Application
- Presentation
- Infrastructure
### Layers dependency schema
Presentation -> Application -> Entities <- Infrastructure
### Layers description
#### 1. Entities
The entities layer, also known as the domain layer, represents the application's domain-specific entities and business rules. It encapsulates the core data structures and operations that are fundamental to the application's domain. In a React app, this layer could include classes or functions that define entities and their related behaviors, like User, Product, or Order.
#### 2. Application
The application layer houses the business logic and serves as an intermediary between the presentation and entities layer. It contains the application's core functionality and specific use-cases, such as data processing, validation, and business rules. This layer interacts with the presentation layer to receive user inputs and data, processes them using the business logic.
**Slices:**
1. `/utilities` - global utility functions
2. `/services` - abstractions around critical packages.
For example, we can invert the dependency to the `react-toastify` package interface by creating an UINotification class that defines its own interface that we need to satisfy. This will also prevent issues in case when we want to switch to another npm package that has a critical impact to the project.
- Can have side effects;
- Can be composed from utilities to perform specific flow;
3. `/managers` - addition level of abstraction around services (if needed).
4. `/features` - core functionality for specific use-cases.
#### 3. Presentation
The presentation layer is the user interface (UI) part. It consists of components, which are responsible for rendering the user interface and handling user interactions. The primary goal of this layer is to present data to the users and collect their inputs. The presentation layer should not contain business logic; instead, it delegates tasks to the application layer for processing.
**Slices:**
1. `/config` - global configuration
- Each identifier in UPPERCASE;
- Do not place here anything which is tightly coupled with specific implementation.
For example, if you building page that displays amount of visible elements on this page
then place VISIBLE_ON_PAGE identifier directly under this specific page (ex: PageName.config.js);
- You can create file for configuration of specific group (ex: dashboard, i18n etc.);
- Sibling imports prohibited;
2. `/utilities` - global utility functions
- No side effects;
3. `/assets` - icons, images etc
4. `/styles` - global style settings
5. `/i18n` - internationalization
- Top level grouped by language;
- Low level grouped by namespace;
- Create separate namespace for specific part of UI.
For example: Dashboard, Settings etc. Do not create
too much namespaces. Replication of `pages` structure for
namespaces it's pretty enough;
- Always try to put as much translations as you can into
specific namespace->key which is related to your feature;
6. `/shared` - 1-st type of reusable UI components
- No side effects like: api calls, action dispatches etc;
- Depends only on props;
- Controlled (in most cases. Try to always make them controlled);
7. `/containers` - 2-nd type of reusable UI components
- No side effects like: api calls, action dispatches etc;
- Can have internal state;
- Can be composed from shared;
8. `/helpers` - global helper functions
- Can have side effects;
- Can be composed from utilities;
9. `/widgets` - 3-d type of reusable UI components
- Can have side effects (api calls, action dispatches);
- Can be independent from incoming props and do specific scope of work;
- Composed from shared and containers;
10. `/providers` - wrapper components that provide some global values for UI. For example: ThemeProvider
11. `/layouts` - wrapper components that provide common UI for pages. For example: SettingsLayout, DashboardLayout etc
12. `/pages` - entry point for route.
13. `/router` - description and configuration of the application routing system
#### 4. Infrastructure
The infrastructure layer deals with external services, data storage, and network communication. This includes APIs, databases, or any external resources that the application needs to interact with. Components in the application layer communicate with the infrastructure layer to fetch data from APIs, save data to databases, or perform other external operations.
## Scripts
Make sure that you have `pnpm` installed.
### pnpm install
Install all dependencies
### pnpm dev
Run project in development mode
### pnpm build
Create a production build
### pnpm preview
Run previously created production build
### pnpm lint
Run eslint code analysis
### pnpm prettier
Run prettier code analysis
### pnpm prettify
Apply prettier rules for files that are not ignored by `.prettierignore`
### pnpm analyze-code
Same as `pnpm lint && pnpm prettier`