Client site

I. Functionality

1. View User Manuals: Customers can access user manuals for registered products.
2. Register Warranties: Customers can quickly register products for warranty coverage.

II. Packages

1. Dependencies

Package Name	Description	Link	Version
@tailwindcss/line-clamp	Tailwind CSS plugin for line clamping	@tailwindcss/line-clamp	^0.4.4
axios	Promise based HTTP client for the browser and node.js	axios	^1.6.5
framer-motion	A library for animations and gestures for React	framer-motion	^11.0.2
i18next	Internationalization-framework written in and for JavaScript	i18next	^23.10.1
react	A JavaScript library for building user interfaces	react	^18.2.0
react-dom	Serves as the entry point to the DOM and server renderers for React	react-dom	^18.2.0
react-favicon	React component for favicon management	react-favicon	^2.0.3
react-i18next	Internationalization for React done right	react-i18next	^14.1.0
react-icons	SVG React icons of popular icon packs using ES6 imports	react-icons	^5.0.1
react-modal-sheet	Accessible bottom sheet modal for React	react-modal-sheet	^2.2.0
react-player	A React component for playing a variety of URLs, including YouTube	react-player	^2.14.1
react-router-dom	DOM bindings for React Router	react-router-dom	^6.21.3
react-toastify	React notification library	react-toastify	^10.0.5
tailwind-datepicker-react	React date picker component styled with Tailwind CSS	tailwind-datepicker-react	^1.4.3
usehooks-ts	React hook library	usehooks-ts	^2.10.0

2. Dev Dependencies

Package Name	Description	Link	Version
@types/react	TypeScript definitions for React	@types/react	^18.2.43
@types/react-dom	TypeScript definitions for React-DOM	@types/react-dom	^18.2.17
@vitejs/plugin-react	Official Vite plugin to handle React files	@vitejs/plugin-react	^4.2.1
autoprefixer	PostCSS plugin to parse CSS and add vendor prefixes	autoprefixer	^10.4.17
eslint	An extensible linter for identifying and reporting on patterns in JavaScript	eslint	^8.55.0
eslint-plugin-react	React specific linting rules for ESLint	eslint-plugin-react	^7.33.2
eslint-plugin-react-hooks	ESLint rules for React Hooks	eslint-plugin-react-hooks	^4.6.0
eslint-plugin-react-refresh	ESLint plugin for React Refresh	eslint-plugin-react-refresh	^0.4.5
postcss	A tool for transforming CSS with JavaScript plugins	postcss	^8.4.33
tailwindcss	A utility-first CSS framework for rapid UI development	tailwindcss	^3.4.1
vite	Next generation frontend tooling	vite	^5.0.8
vite-plugin-pwa	Zero-config PWA for Vite	vite-plugin-pwa	^0.17.4

III. Environment Variables

Variable Name	Description	Default Value
VITE_SERVER_URL	API URL for the client site	http://localhost:3000
VITE_ASSET_URL	URL for static assets	http://localhost:3999/assets

IV. Source Tree

.
├── index.html - Main HTML file for the application.
├── package.json - File defining the project's dependencies, scripts, and metadata.
├── package-lock.json - Auto-generated file that locks the dependencies to specific versions.
├── postcss.config.js - PostCSS configuration file.
├── public/ - Directory containing static assets.
├── README.md - Project documentation.
├── src - Source code directory.
│   ├── App.css
│   ├── App.jsx - Main application component.
│   ├── assets - Directory containing images and other static assets.
│   │   ├── background3.png
│   │   ├── brother_logo.png
│   │   ├── brother_logo_w_100.png
│   │   ├── brother_logo_w.png
│   │   ├── react.svg
│   │   ├── us_flag.webp
│   │   └── vi_flag.png
│   ├── components - Directory containing React components.
│   │   ├── Datepicker.jsx
│   │   ├── Modals
│   │   │   └── index.jsx
│   │   ├── MoveableElement.jsx
│   │   └── WarrantyInfoSheet
│   │       └── index.jsx
│   ├── config - Configuration files for the application.
│   │   └── index.js
│   ├── constants - Directory containing constant values.
│   │   └── index.js
│   ├── context - Directory containing React context providers.
│   │   ├── AppProvider.jsx
│   │   ├── index.jsx
│   │   └── reducer.js
│   ├── examples - Directory containing example components.
│   │   └── index.js
│   ├── index.css
│   ├── layout - Directory containing layout components.
│   │   └── index.jsx
│   ├── main.jsx - Entry point for the application.
│   ├── pages - Directory containing React pages.
│   │   ├── Qr - Directory containing QR code related pages.
│   │   │   └── index.jsx
│   │   ├── Register - Directory containing registration related pages.
│   │   │   ├── index.jsx
│   │   │   ├── Loading.jsx
│   │   │   └── Stage2.jsx
│   │   ├── Result - Directory containing result related pages.
│   │   │   ├── CheckMark.jsx
│   │   │   ├── Cross.jsx
│   │   │   └── index.jsx
│   │   ├── SplashScreen - Directory containing splash screen related pages.
│   │   │   └── index.jsx
│   │   └── UserManual - Directory containing user manual related pages.
│   │       ├── Control.jsx
│   │       ├── Error.jsx
│   │       └── index.jsx
│   ├── service - Directory containing service functions.
│   │   └── index.js
│   └── utils - Directory containing utility functions.
│       ├── locale - Directory containing localization files.
│       │   ├── en.js
│       │   ├── index.js
│       │   └── vi.js
│       ├── statusTranslate.jsx
│       └── timeToDate.js
├── tailwind.config.js - Tailwind CSS configuration file.
├── vite.config.js - Vite configuration file.
└── yarn.lock - Auto-generated file that locks the dependencies to specific versions.

V. Data Flow Diagram