feat: Update README with GPT

Author: raminr77

.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+.git
+.vscode
+*.log
+.env

Dockerfile

@@ -0,0 +1,30 @@
+# Stage 1: Build the app
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Install dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copy source code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Stage 2: Serve the app with a lightweight web server
+FROM nginx:stable-alpine
+
+# Copy built assets from builder
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy custom Nginx config (optional)
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port
+EXPOSE 80
+
+# Start nginx server
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,165 +1,136 @@
 # React Sample
 
 [![GitHub stars](https://img.shields.io/github/stars/raminr77/react_sample?style=social)](https://github.com/raminr77/react_sample/)
+[![GitHub_forks](https://img.shields.io/github/forks/raminr77/react_sample?style=social)](https://github.com/raminr77/react_sample/)
 
-## Start your React Project with a ready config!
+# 🚀 React Sample Project
 
-this is a sample of the ReactJs project for starting easily and fast.
+A simple and clean React + TypeScript + Vite starter project, configured with essential tools and structured with best practices gained from 7+ years of frontend development experience.
 <br/>
-In this project, we added some configs and installed some necessary packages. they help you to ready very fast and don't waste time them.
+This is a sample of the ReactJs project for starting easily and fast.
 <br />
 
-## Contents
+## 📁 Project Structure
 
-- [Configs](https://github.com/raminr77/react_sample#Configs)
-- [Packages](https://github.com/raminr77/react_sample#Packages)
-- [Hooks](https://github.com/raminr77/react_sample#Hooks)
-- [Tools (utils)](https://github.com/raminr77/react_sample#tools-utils)
-- [How To Run](https://github.com/raminr77/react_sample#how-to-run)
-- [API Pattern](https://github.com/raminr77/react_sample#api-pattern)
-- [You Can Use In This Project](https://github.com/raminr77/react_sample#you-can-use-in-this-project)
+```
+scripts/                 # For Custom Scripts (Icon Generator, etc.)
+public/                  # Application files (PWA, Icons, Splash Screens, etc.)
+src/
+ ├── pages/              # Application pages (auth, landing, main, etc.)
+ ├── layout/             # Layout components and containers
+ ├── shared/             # Shared logic: helpers, constants, services, types, store
+ ├── styles/             # Global styles (SCSS & Tailwind)
+ └── __test__/           # Unit tests
+```
 
-<br />
-<hr />
-<br />
+The project includes complete configurations for **ESLint**, **Prettier**, **Stylelint**, **Husky** (pre-commit hooks), and **CI/CD via GitHub Actions**.
 
-- ## Configs
-
-  - Eslint
-  - Prettier
-  - Stylelint
-  - Dockerfile
-  - `.env` file
-  - Commit lint
-  - Redux Config
-  - Style Config
-  - SEO & PWA tags
-  - `jsconfig` file
-  - `tsconfig` file
-  - Folder structure
-  - API cache system
-  - Private route system
-  - `lint-staged` config
-  - Custom `manigest.json`
-  - `constants` structure
-  - First loading animation
-  - API Pattern for request
-  - Lock API request system
-  - Cancel duplicate request
-  - Reset default browser CSS
-  - Scroll to the top when route change
-  - Transform data system for API request
-  - Pre-Commit and Commit-Message config (husky)
-
-- ## Packages
-
-### Dependencies
-
-- TypeScript
-- sass (for component module sass)
-- animate.css (for your animations)
-- tailwindcss (for main style system)
-- lodash (for working easily with array)
-- axios (for API service and request system)
-- classnames (for merge ClassNames and module sass)
-- react-router-dom (for routing system in your project)
-- prop-types (for specify type in your JSX & component file)
-- react-toastify (for notify message to user in your project)
-- react-device-detect (for check devices and specify mobile type)
-- @reduxjs/toolkit & react-redux (for state management in your project)
-
-### DevDependencies
-
-- husky
-- eslint (+ plugins and configs)
-- prettier (+ plugins and configs)
-- stylelint
-- lint-staged
-- eslint-config-airbnb
-- commitlint + config-conventional
-- ## Hooks
-
-  - useApi (for requests)
-  - usePageData (for page requests)
-  - useCopyToClipboard (for copy text)
-  - useOnScreen (for traking an element on screen)
-
-- ## Tools (utils)
-
-  - Snackbar
-  - `htmlDecode` function
-  - URLs for share in social
-  - `generateSnackbar` function
-  - `apiRequestObject` for API pattern
-  - `removeUndefinedFromObject` function
-  - Log system (Empty function for your config)
-  - `redirect` and `attachObjectQueriesToUrl` functions
-  - `truncate` and `shouldTruncate` functions for your texts
-  - `isDemo`, `isProduction`, `isDevelopment`, `appVersion` and `appName` variables
-  - `faToEn`, `enToFa`, `arToFa`, `faPriceToEnNumber` and `formatPrice` functions for your numbers (persian language)
+---
 
-<br />
+## ⚙️ Getting Started Locally
 
-## You Can Use In This Project
+### 1. Install Dependencies
 
-- You can use the AnimateCSS framework for your animations, add the class `animate__animated` to an element, along with any of the animation names white the `animate__` prefix.
+```bash
+npm install
+```
 
-  `<h1 class="animate__animated animate__bounce">An animated element</h1>`
+### 2. Create the `.env` File
 
-  REF: https://animate.style/
+Create your local environment file by copying the example file:
 
-- You can use `Vazir` font in this project. for change `EN` to `FA` number with font, use `fa-num-font` and `fa-num-font-bold` class. also you can use `vazir-bold` for bold type.
-- You can import file from `src` address like this:
+```bash
+cp .env.example .env
+```
 
-  `import { INDEX_PAGE_ROUTE } from 'routes/RedirectRoutes';`
+Then make sure to configure your **Firebase settings** required for push notifications inside `.env`.
 
-<br />
+If you're just testing the app and don't have Firebase set up, you can use dummy values for now.
 
-## API Pattern
+---
 
-- Your API
+## 🐳 Running with Docker
 
-  **TODO**
+### Build and Run
 
-- useApi
+```bash
+docker build -t react-sample-app .
+docker run -d -p 3000:80 react-sample-app
+```
 
-  **TODO**
+Visit: [http://localhost:3000](http://localhost:3000)
 
-- usePageData
+---
 
-  **TODO**
+## 📦 Using Docker Compose
 
-<br />
+```bash
+docker-compose up --build
+```
+
+To stop and remove containers:
+
+```bash
+docker-compose down
+```
+
+---
+
+## ✅ Testing
+
+Unit tests can be added and placed under the `src/__test__` folder. You can use any preferred framework like Vitest or Jest.
+
+---
+
+## 📄 License
+
+This project is open-source and licensed under the [MIT License](LICENSE).
+
+## 💡 Tips & Features
+
+### ✨ Animations
+
+You can use the [AnimateCSS](https://animate.style/) framework for applying animations by adding the class `animate__animated` and the desired animation class with the `animate__` prefix:
+
+```html
+<h1 class="animate__animated animate__bounce">An animated element</h1>
+```
+
+🔧 **But there's more!** This project includes a custom helper function for generating animation class names easily:
+
+```ts
+animator({ name: 'fadeIn', speed: 'faster' });
+```
+
+This will generate appropriate class names automatically.
+
+---
+
+### 📁 Import Aliases
+
+You can import modules from the `src` folder using the `@/` alias:
+
+```ts
+import { APP_ROUTES } from '@/shared/constants';
+```
+
+---
+
+## 🧪 Available NPM Commands
+
+Here’s a list of useful scripts for development and maintenance:
 
-## How To Run
-
-- First Git Clone Or Download Project
-- Copy and rename `.env.example` to `.env`
-- `npm install` or `yarn add`
-- Just Run: `npm start`
-- Run white style watching:
-  - Windows: `npm run dev:windows`
-  - Linux or MaxOs: `npm run dev`
-
-### Other Commands
-
-- Test: `npm run test`
-- Build: `npm run build`
-- Eslint: `npm run lint:fix`
-- Prettier: `npm run pretty`
-- Stylelint: `npm run lint:style`
-- Styles (Watching): `npm run styles`
-- Build Styles: `npm run build:styles`
-
-<hr />
-
-### Project TODO
-
-- [ ] Scripts
-- [ ] Storybook
-- [ ] Test config
-- [ ] E2E test config
-- [ ] Folder Structure
-- [ ] Convert js to ts
-- [ ] Add API pattern Doc to MD file
-- [ ] Add usePageData & UseApi Doc to MD file
+| Command           | Description                                  |
+|------------------|----------------------------------------------|
+| `dev`            | Run the project locally using Vite           |
+| `test`           | Run unit tests with Vitest                   |
+| `prepare`        | Prepare Git hooks using Husky                |
+| `lint`           | Run ESLint and fix issues automatically      |
+| `format`         | Format the code using Prettier               |
+| `build`          | Build TypeScript and the app bundle          |
+| `check-lint`     | Check lint issues without fixing             |
+| `check-format`   | Check code formatting                        |
+| `preview`        | Preview production build at port 8080        |
+| `check-types`    | Type-check the project without emitting files|
+| `pretty`         | Format all JS/TS/CSS/SCSS source files       |
+| `lint:style`     | Run Stylelint for style file validation      |

docker-compose.yml

@@ -0,0 +1,16 @@
+version: '3.8'
+
+services:
+  react-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: react-sample-app
+    ports:
+      - "3000:80"
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=production
+    volumes:
+      - ./public:/usr/share/nginx/html/public:ro
+    depends_on: []

nginx.conf

@@ -0,0 +1,18 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  location /assets/ {
+    access_log off;
+    expires 30d;
+  }
+
+  error_page 404 /index.html;
+}