diff --git a/docs/App.md b/docs/App.md
new file mode 100644
index 0000000..c1c9090
--- /dev/null
+++ b/docs/App.md
@@ -0,0 +1,20 @@
+# App.js
+
+### State
+
+| State names | Details |
+|:---------------|:--------|
+| `peoples` | Array of [`People`](People.md) component |
+| `info` | Array for information of all the people involved |
+| `paymentChain` | Generated return by the backend server |
+| `actionButtons` | Just to store (and display) the 2 given buttons |
+| `showResults` | Boolean that will be switched when result is received from server |
+
+### Functions
+
+| Function names | Details |
+|:---------------|:--------|
+| `getPaymentChain()` | Parse user input into JSON to be sent to backend and decipher the response from backend |
+| `populatePeople(e)` | Fill `peoples` in `{this.state}` with `People` component based on user input in `Main-form` class |
+| `updateInfo(e)` | Binded to each [`People`](people.md) as to update `{this.state.info}` when something in the [`People`](people.md) class is updated |
+| `httpPost(data, callback)` | Used by `getPaymentChain()` to make `POST` request to [api.breakups.life/paymentChain](https://api.breakups.life) |
diff --git a/docs/Message.md b/docs/Message.md
new file mode 100644
index 0000000..3b90a70
--- /dev/null
+++ b/docs/Message.md
@@ -0,0 +1,11 @@
+# Message.js
+
+This just returns the following and do nothing else.
+
+```HTML
+<div className="Message">
+  <br/>
+  Calculating...
+  <br/>
+</div>
+```
diff --git a/docs/Payment.md b/docs/Payment.md
new file mode 100644
index 0000000..11d6c0a
--- /dev/null
+++ b/docs/Payment.md
@@ -0,0 +1,8 @@
+# Payment.js
+
+This returns a single payment among the [`PaymentChain`](PaymentChain.md) generated by [Breakups](https://breakups.life) where it specifies who to who and the amount below.
+
+Example:
+
+> Person A -> Person B <br/>
+> Amount: 10.50
diff --git a/docs/PaymentChain.md b/docs/PaymentChain.md
new file mode 100644
index 0000000..375db50
--- /dev/null
+++ b/docs/PaymentChain.md
@@ -0,0 +1,9 @@
+# PaymentChain.js
+
+This returns the entire list of [`Payment`](Payment.md)s generated by [Breakups](https://breakups.life).
+
+### Props
+
+| Props name | Details |
+|:---------------|:--------|
+| `payments` | Return JSON from [`Breakups`](https://api.breakups.life) which was then parsed into individual [`Payment`](Payment.md) component |
diff --git a/docs/People.md b/docs/People.md
new file mode 100644
index 0000000..d52ae72
--- /dev/null
+++ b/docs/People.md
@@ -0,0 +1,22 @@
+# People.js
+
+### Refs
+
+| Refs names | Details |
+|:---------------|:--------|
+| `name` | Name of the person |
+| `email` | Email of the person |
+| `amount` | Amount of money paid by the person |
+
+### Relevant variables
+
+| Variable names | Details |
+|:---------------|:--------|
+| `req` | An object containing `name`, `email`, and `amount` from the above |
+| `infoToSend` | An object containing `{this.props.id}` in `id` and `req` in `info` |
+
+### Props
+
+| Props name | Details |
+|:---------------|:--------|
+| `info` | Just `infoToSend` |
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..8ef394e
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,16 @@
+## The frontend interface as a webapp for [Breakups](https://git.binhong.me/binhong/Breakups).
+
+#### main
+
+| API doc | source |
+|:-------:|:------:|
+| [App.js](App.md) | ([source](https://git.binhong.me/binhong/breakups-webapp/src/branch/master/src/App.js)) |
+
+#### Components
+
+| API doc | source |
+|:-------:|:------:|
+| [Message.js](Message.md)  |([source](https://git.binhong.me/binhong/breakups-webapp/src/branch/master/src/Components/Message.js)) |
+| [Payment.js](Payment.md) |  ([source](https://git.binhong.me/binhong/breakups-webapp/src/branch/master/src/Components/Payment.js)) |
+| [PaymentChain.js](PaymentChain.md) |  ([source](https://git.binhong.me/binhong/breakups-webapp/src/branch/master/src/Components/PaymentChain.js)) |
+| [People.js](People.md) |  ([source](https://git.binhong.me/binhong/breakups-webapp/src/branch/master/src/Components/People.js)) |