docs: add new info, screenshots, etc

README.md

@@ -1,8 +1,16 @@
 # ReactJS Boilerplate
 
+## Table of Contents <!-- omit in toc -->
+
+- [ReactJS Boilerplate](#reactjs-boilerplate)
+  - [Description](#description)
+  - [Getting Started](#getting-started)
+  - [Features](#features)
+  - [Screenshots](#screenshots)
+
 ## Description
 
-ReactJS Boilerplate for typical project.
+ReactJS Boilerplate for a typical project.
 
 [Full documentation here](/docs/README.md)
 
@@ -25,12 +33,20 @@ npm run dev
 - [x] Next.js
 - [x] TypeScript
 - [x] [i18n](https://react.i18next.com/) (based on https://github.com/i18next/next-13-app-dir-i18next-example)
-- [x] [Material UI](https://mui.com/)
+- [x] [Material UI](https://mui.com/). Supports dark mode.
 - [x] [React Hook Form](https://react-hook-form.com/)
 - [x] React Query
 - [x] Auth (Sign in, Sign up, Reset password, Confirm email, Refresh Token)
-- [x] Users management (CRUD)
-- [x] File upload
+- [x] User management (CRUD)
+- [x] File Upload
 - [x] E2E tests (Cypress)
 - [x] ESLint
 - [x] CI (GitHub Actions)
+
+## Screenshots
+
+<img width="1552" alt="Login" src="https://github.com/brocoders/react-boilerplate/assets/6001723/cb86a3e1-331f-4bd7-9668-3c6cf44eb372">
+
+<img width="1552" alt="Register" src="https://github.com/brocoders/react-boilerplate/assets/6001723/aca2d405-2155-4755-8d0e-d41bdc0db852">
+
+<img width="1552" alt="Users list" src="https://github.com/brocoders/react-boilerplate/assets/6001723/244409c0-2235-4018-b062-44fb54ea4321">

docs/README.md

@@ -6,5 +6,6 @@
 
 - [Introduction](introduction.md)
 - [Installing and Running](installing-and-running.md)
+- [Architecture](architecture.md)
 - [Testing](testing.md)
 - [Forms](forms.md)

docs/architecture.md

@@ -0,0 +1,59 @@
+# Architecture of the project
+
+## Table of Contents <!-- omit in toc -->
+
+- [Architecture of the project](#architecture-of-the-project)
+  - [Introduction](#introduction)
+  - [Folder structure](#folder-structure)
+  - [Pages](#pages)
+
+## Introduction
+
+This boilerplate uses [Next.js](https://nextjs.org/) framework for building React applications.
+
+## Folder structure
+
+```txt
+.
+├── cypress <-- Here are your E2E tests
+│   ├── downloads
+│   ├── e2e <-- Here are your specs
+│   ├── fixtures
+│   └── support
+├── public
+└── src
+    ├── app
+    │   └── [language] <-- Here are your pages (routes)
+    │       ├── admin-panel
+    │       ├── confirm-email
+    │       ├── forgot-password
+    │       ├── password-change
+    │       ├── profile
+    │       ├── sign-in
+    │       └── sign-up
+    ├── components <-- Here are your common components (Forms, Tables, etc.)
+    │   ├── confirm-dialog
+    │   ├── form
+    │   └── table
+    └── services <-- Here are your services (Auth, API calls, I18N, etc.)
+        ├── api
+        ├── auth
+        ├── helpers
+        ├── i18n
+        │   └── locales
+        ├── leave-page
+        ├── react-query
+        └── social-auth
+            ├── facebook
+            └── google
+```
+
+## Pages
+
+Pages are located in the `src/app/[language]` folder. We use `[language]` directory to support internationalization with ability generate static website (`output: export`). Example [here](https://github.com/i18next/next-13-app-dir-i18next-example).
+
+---
+
+Previous: [Installing and Running](installing-and-running.md)
+
+Next: [Testing](testing.md)

docs/forms.md

@@ -6,7 +6,7 @@
   - [Introduction](#introduction)
   - [Rules](#rules)
     - [Do not depend your form's structure on backend's request or response](#do-not-depend-your-forms-structure-on-backends-request-or-response)
-    - [Use `reset` function for set data for editing.](#use-reset-function-for-set-data-for-editing)
+    - [Use the `reset` function to set data for editing.](#use-the-reset-function-to-set-data-for-editing)
 
 ## Introduction
 
@@ -16,7 +16,7 @@ For building forms we use [react-hook-form](https://react-hook-form.com/) packag
 
 ### Do not depend your form's structure on backend's request or response
 
-Often backend send or receive data comfortable for them, but not for frontend and this grow bad forms. To avoid problem with this we recommend to use `transform` function for transform data from backend to frontend and vice versa.
+Often, the backend sends or receives data in a format comfortable for them, but not for the frontend, leading to poorly designed forms. To avoid problems like this, we recommend using the transform function to convert data from the backend to the frontend and vice versa.
 
 Example:
 
@@ -61,9 +61,9 @@ const onSubmit = (data) => {
 };
 ```
 
-### Use `reset` function for set data for editing.
+### Use the `reset` function to set data for editing.
 
-`reset` function is provided by `useForm` hook. Do not use `setValue` function for set data for editing. This function is provided by `useForm` hook too, but will not put data as default values, this can grow bugs with form's state, like `isDirty`, etc.
+The `reset` function is provided by the `useForm` hook. Do not use the `setValue` function to set data for editing. This function is also provided by the `useForm` hook, but it will not set data as default values. This can lead to bugs in the form's state, such as `isDirty`, etc.
 
 ---
 

docs/installing-and-running.md

@@ -74,4 +74,4 @@
 
 Previous: [Introduction](introduction.md)
 
-Next: [Testing](testing.md)
+Next: [Architecture](architecture.md)

docs/introduction.md

@@ -7,13 +7,14 @@
 - [Introduction](#introduction)
   - [Description](#description)
   - [Features](#features)
+  - [Screenshots](#screenshots)
   - [Motivation](#motivation)
 
 ---
 
 ## Description
 
-ReactJS Boilerplate for typical project.
+ReactJS Boilerplate for a typical project.
 
 Demo: <https://react-boilerplate-coral.vercel.app>
 
@@ -24,21 +25,35 @@ Backend: <https://github.com/brocoders/nestjs-boilerplate>
 - [x] Next.js
 - [x] TypeScript
 - [x] [i18n](https://react.i18next.com/) (based on https://github.com/i18next/next-13-app-dir-i18next-example)
-- [x] [Material UI](https://mui.com/)
+- [x] [Material UI](https://mui.com/). Supports dark mode.
 - [x] [React Hook Form](https://react-hook-form.com/)
 - [x] React Query
 - [x] Auth (Sign in, Sign up, Reset password, Confirm email, Refresh Token)
-- [x] Users management (CRUD)
-- [x] File upload
+- [x] User management (CRUD)
+- [x] File Upload
 - [x] E2E tests (Cypress)
 - [x] ESLint
 - [x] CI (GitHub Actions)
 
 ---
 
+## Screenshots
+
+<img width="1552" alt="Login" src="https://github.com/brocoders/react-boilerplate/assets/6001723/cb86a3e1-331f-4bd7-9668-3c6cf44eb372">
+
+<img width="1552" alt="Register" src="https://github.com/brocoders/react-boilerplate/assets/6001723/aca2d405-2155-4755-8d0e-d41bdc0db852">
+
+<img width="1552" alt="Users list" src="https://github.com/brocoders/react-boilerplate/assets/6001723/244409c0-2235-4018-b062-44fb54ea4321">
+
+---
+
 ## Motivation
 
-Often, when we start a new project, we have to spend a lot of time on the initial setup, like authentication, implementation Private and Public routes, internationalization, etc. Also sometimes we have to sacrifice the quality of solutions during the initial setup because we need to initialize the project as soon as possible and start solving the business problems. ReactJS Boilerplate was created to solve it: we have collected in one place all basic flows and best practices focused on performance and simplicity of solutions. And even more, we have added many eslint rules that will improve your solutions. We hope that this boilerplate will help you to start your project faster and with better quality.
+Often, when we start a new project, we have to spend a lot of time on the initial setup, like authentication, implementation of Private and Public routes, internationalization, etc. Also sometimes we have to sacrifice the quality of solutions during the initial setup because we need to initialize the project as soon as possible and start solving the business problems. ReactJS Boilerplate was created to solve it: we have collected in one place all basic flows and best practices focused on performance and simplicity of solutions. And even more, we have added many eslint rules that will improve your solutions.
+
+Also, we have a boilerplate for the backend that is fully compatible with react-boilerplate. This allows for easily starting a new project with a full-stack solution.
+
+We hope that this boilerplate will help you to start your project faster and with better quality.
 
 ---
 

docs/testing.md

@@ -30,6 +30,6 @@ This boilerplate uses [Cypress](https://www.cypress.io/) for E2E testing.
 
 ---
 
-Previous: [Installing and Running](installing-and-running.md)
+Previous: [Architecture](architecture.md)
 
 Next: [Forms](forms.md)