# Simple Twitter

### 1.註冊頁(Register)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">註冊的帳號、名稱、Email、密碼、確認密碼</td>
<td width="350px">RegisterForm</td>
</tr>
</tbody>
</table>

---
### 2.個人資料設定頁(AccountSetting)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">使用者帳號、名稱、Email、密碼、確認密碼</td>
<td width="350px">SideNavbar(左邊)、TopNavbar(上方)、AccountSettingForm</td>
</tr>
</tbody>
</table>

---
### 3.前台登入頁(Login)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">登入帳號、密碼</td>
<td width="350px">LoginForm</td>
</tr>
</tbody>
</table>

---
### 4.首頁tweets總表(MainTweetsPage)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">使用者圖片</td>
<td rowspan="3" width="350px">SideNavbar(左邊)、TopNavbar(上方)、TweetForm(推文區)、Posting(發文區)、FollowingNavbar(右邊)</td>
</tr>
<tr>
<td>發文清單(包括發文者姓名、帳號、發文時間、發文內容、留言數量、按讚數量)</td>
</tr>
<tr>
<td>跟隨誰名單(包括姓名、帳號、圖片、是否跟隨的狀態)</td>
</tr>
</tbody>
</table>

---
### 5.單一tweet詳情頁(DetailTweet)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">發文者id、姓名、帳號、圖片、發文內容、發文時間、回覆數量、按讚次數</td>
<td rowspan="3" width="350px">SideNavbar(左邊)、TopNavbar(上方)、TweetInfo(tweet詳細區)、Message(留言區)、FollowingNavbar(右邊) </td>
</tr>
<tr>
<td>留言者id、圖片、姓名、帳號、留言時間、留言內容</td>
</tr>
<tr>
<td>跟隨誰名單(包括姓名、帳號、圖片、是否跟隨的狀態)</td>
</tr>
</tbody>
</table>

---
### 6.新增tweet(NewTweet)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">使用者id、圖片</td>
<td width="350px">NewTweetModal(新增貼文)</td>
</tr>
</tbody>
</table>

---
### 7.回覆tweet(ReplyTweet)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">發文者id、姓名、帳號、發文時間、發文內容</td>
<td rowspan="3" width="350px">ReplyTweetModal(回覆貼文)</td>
</tr>
<tr>
<td>回覆者id、圖片、回文內容</td>
</tr>
</tbody>
</table>

---
### 8.使用者貼文清單(UserTweets)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">使用者id、姓名、帳號、圖片、自我介紹、跟隨中的數量、跟隨者的數量、貼文內容、總貼文數量、各別貼文時間、貼文留言數量、貼文按讚數量</td>
<td rowspan="2" width="350px">SideNavbar(左邊)、TopNavbar(上方)、UserPersonalInfo(個人資料)、TweetList(個人推文清單)、FollowingNavbar(右邊)</td>
</tr>
<tr>
<td>跟隨誰名單(包括姓名、帳號、圖片、是否跟隨的狀態)</td>
</tr>
</tbody>
</table>

---
### 9.使用者喜歡的內容(UserLikes)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">使用者id、姓名、帳號、圖片、自我介紹、跟隨數量、跟隨使用者的數量</td>
<td rowspan="3" width="350px">SideNavbar(左邊)、TopNavbar(上方)、UserPersonalInfo(個人資料)、UserLikeList(個人按讚清單)、FollowingNavbar(右邊)</td>
</tr>
<tr>
<td>按讚貼文清單(包括姓名、帳號、發文時間、發文內容、留言數量、按讚數量)</td>
</tr>
<tr>
<td>跟隨名單(包括姓名、帳號、圖片、是否跟隨的狀態)</td>
</tr>
</tbody>
</table>

---
### 10.使用者編輯profile (UserProfileSetting)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">使用者id、圖片、背景圖、姓名、自我介紹</td>
<td width="350px">UserProfileModalForm(個人資料表)</td>
</tr>
</tbody>
</table>

---
### 11.使用者的跟隨者清單(UserFollowers)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">使用者姓名、推文數量</td>
<td rowspan="3" width="350px">SideNavbar(左邊)、TopNavbar(上方)、UserFollowerList(跟隨者清單)、FollowingNavbar(右邊)</td>
</tr>
<tr>
<td>跟隨者清單(包括姓名、帳號、圖片、發文內容、是否被跟隨的狀態)</td>
</tr>
<tr>
<td>跟隨誰名單(包括姓名、帳號、圖片、是否跟隨的狀態)</td>
</tr>
</tbody>
</table>

---
### 12.使用者正在跟隨清單(UserFollowing)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">使用者姓名、推文的數量</td>
<td rowspan="3" width="350px">SideNavbar(左邊)、TopNavbar(上方)、UserFollowingList(個人跟隨清單)、FollowingNavbar(右邊)</td>
</tr>
<tr>
<td>正在跟隨清單(包括姓名、帳號、圖片、發文內容、正在跟隨的狀態)</td>
</tr>
<tr>
<td>跟隨誰名單(包括姓名、帳號、圖片、是否跟隨的狀態)</td>
</tr>
</tbody>
</table>

---
### 13.其他使用者的profile(UserProfile)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">其他使用者個人資料(id、姓名、帳號、圖片、自我介紹、推文的數量、正在跟隨的數量、跟隨者的數量、是否被跟隨的狀態、是否被訂閱的狀態)</td>
<td rowspan="3" width="350px">SideNavbar(左邊)、TopNavbar(上方)、UserPersonalInfo(個人資料)、FollowingNavbar(右邊)</td>
</tr>
<tr>
<td>其他使用者的推文清單(包括推文內容、推文時間、留言數量、按讚數量)</td>
</tr>
<tr>
<td>跟隨名單(包括姓名、帳號、圖片、是否跟隨的狀態)</td>
</tr>
</tbody>
</table>

---
### 14.其他使用者的profile(已訂閱) (UserProfileSubscribe)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">其他使用者個人資料(id、姓名、帳號、圖片、自我介紹、推文的數量、正在跟隨的數量、跟隨者的數量、是否被跟隨的狀態、是否被訂閱的狀態)</td>
<td rowspan="3" width="350px">SideNavbar(左邊)、TopNavbar(上方)、UserPersonalInfo(個人資料)、FollowingNavbar(右邊)</td>
</tr>
<tr>
<td>其他使用者的推文清單(包括推文內容、推文時間、留言數量、按讚數量)</td>
</tr>
<tr>
<td>跟隨名單(包括姓名、帳號、圖片、是否跟隨的狀態)</td>
</tr>
</tbody>
</table>

---
### 15.後台登入頁(AdminLogin)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">管理者帳號、密碼</td>
<td width="350px">LoginForm</td>
</tr>
</tbody>
</table>

---
### 16.後台推文清單(AdminTweets)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">推文者清單(包括推文者id、姓名、帳號、圖片、推文內容、推文時間、推文的id)</td>
<td width="350px">SideNavbar(左邊)、TopNavbar(上方)、PostingList(發文清單)</td>
</tr>
</tbody>
</table>

---
### 17.後台使用者清單(AdminUsersList)

<table>
<thead>
<th></th>
<th>Data</th>
<th>Components</th>
</thead>
<tbody>
<tr>
<th rowspan="3" >內容</th>
<td width="400px">使用者清單(包括使用者id、姓名、帳號、圖片、背景圖、留言數量、按讚數量、正在跟隨的數量、跟隨者的數量)</td>
<td width="350px">SideNavbar(左邊)、TopNavbar(上方)、UserCard(使用者資料)</td>
</tr>
</tbody>
</table>

{%hackmd hackmd-dark-theme?both %}