# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://archive-vn.docs.klaytn.foundation/content/dapp/tutorials/klaystagram/3.-directory-structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.