> For the complete documentation index, see [llms.txt](https://archive-vn.docs.klaytn.foundation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://archive-vn.docs.klaytn.foundation/content/dapp/tutorials/klaystagram/3.-directory-structure.md).

# 3. Cấu trúc thư mục

```
|-- contracts
|-- migrations
|-- truffle.js
|-- static
|-- src
    |-- klaytn
      |-- caver.js
      |-- KlaystagramContract.js
    |-- redux
    |-- pages
      |-- AuthPage.js
      |-- FeedPage.js
    |-- components
      |-- UploadPhoto.js
      |-- Feed.js
      |-- TransferOwnership.js
      |-- ...
    |-- styles
    |-- utils
    |-- index.js
    |-- App.js
```

`contracts/`: Chứa tập tin hợp đồng Solidity.

`migrations/`: Chứa tập tin JavaScript xử lý việc triển khai hợp đồng thông minh.

`truffle.js`: Chứa cấu hình Truffle.

`static/`: Chứa tập tin tĩnh như hình ảnh và phông chữ.

`src/index.js`: Tập tin index của ứng dụng. ReactDOM.render logic nằm ở đây.

`src/App.js`: Tập tin thành phần gốc của ứng dụng.

`src/styles`: Định nghĩa kiểu dáng tổng thể liên quan đến stylesheet.

`src/redux`: Tạo các hàm API tương tác với hợp đồng và theo dõi dữ liệu tiếp theo.

`src/klaytn`: Chứa các tập tin hỗ trợ tương tác với Klaytn.

* `src/klaytn/caver.js`: Khởi tạo caver-js trong các cài đặt đã cấu hình.

  cf) caver-js là thư viện cuộc gọi RPC tạo kết nối với nút Klaytn, tương tác với nút và hợp đồng thông minh được triển khai trên Klaytn.
* `src/klaytn/Klaystagram.js`: Tạo một phiên bản của hợp đồng bằng cách sử dụng API caver-js. Bạn có thể tương tác với hợp đồng thông qua phiên bản.

`src/pages`: Chứa các tập tin hai trang soạn ra ứng dụng Klaystagram.

* `src/pages/AuthPage.js`: Chứa mẫu đăng ký và đăng nhập. Bạn có thể tạo khóa riêng tư trong mẫu đăng ký và sử dụng nó để đăng nhập trên ứng dụng.
* `src/pages/FeedPage.js`: Đọc dữ liệu ảnh từ hợp đồng và hiển thị đến người dùng. Ngoài ra, người dùng có thể tải lên hình ảnh của họ trong FeedPage.

`src/components`: Chứa các tập tin thành phần soạn ra trang.

* `src/components/Feed.js`: Đọc dữ liệu từ hợp đồng và hiển thị ảnh.
* `src/components/UploadPhoto.js`: Tải ảnh lên bằng cách gửi giao dịch đến hợp đồng.
* `src/components/TransferOwnership.js`: Chuyển quyền sở hữu ảnh bằng cách gửi giao dịch.