CS5331 Submission

README.md

@@ -1,4 +1,4 @@
-# rest-api-development
+# rest-api-development - WLKB :boom:
 
 CS5331 Assignment 1 Project Reference Repository
 
@@ -15,11 +15,11 @@ beaten path.
 
 You may be required to modify the following files/directories:
 
-- Dockerfile - contains the environment setup scripts to ensure a homogenous
+* Dockerfile - contains the environment setup scripts to ensure a homogenous
   development environment
-- src/ - contains the front-end code in `html` and the skeleton Flask API code
+* src/ - contains the front-end code in `html` and the skeleton Flask API code
   in `service`
-- img/ - contains images used for this README
+* img/ - contains images used for this README
 
 Assuming you're developing on an Ubuntu 16.04 machine, the quick instructions
 to get up and running are:
@@ -50,6 +50,22 @@ sudo docker run hello-world
 sudo ./run.sh
 ```
 
+```
+# Install Docker Compose
+
+# Run this command to download the latest version of Docker Compose
+
+sudo curl -L https://github.com/docker/compose/releases/download/1.19.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
+
+# Apply executable permissions to the binary
+
+sudo chmod +x /usr/local/bin/docker-compose
+
+# Test the installation
+
+docker-compose --version
+```
+
 (Docker CE installation instructions are from this
 [link](https://docs.docker.com/install/linux/docker-ce/ubuntu/#install-using-the-repository).)
 
@@ -63,8 +79,8 @@ running it. The grading script will interact with your API.
 
 The following ports are expected to be accessible:
 
-1. 80, on which static HTML content, including the front-end, is served.
-2. 8080, on which the API is exposed.
+1.  80, on which static HTML content, including the front-end, is served.
+2.  8080, on which the API is exposed.
 
 To verify this, please run the following commands:
 
@@ -83,61 +99,101 @@ If a response is received, you're good to go.
 
 **Please replace the details below with information relevant to your team.**
 
-## Screenshots
+## Screenshots :facepunch:
+
+* Register a User
+  ![signup](./img/signup.png)
+
+* Log In
+  ![login](./img/login.png)
+
+* Log Out
+  ![logout](./img/logout.png)
+
+* Display All Public Diaries
+  ![public diaries](./img/home_public.png)
 
-Please replace the example screenshots with screenshots of your completed
-project. Feel free to include more than one.
+* Display All Authenticated User's Diaries
+  ![private diaries](./img/home_logged_in.png)
 
-![Sample Screenshot](./img/samplescreenshot.png)
+* Create a New Diary
+  ![create new diary](./img/create_new_diary.png)
+
+* Delete an Existing Diary
+  ![delete diary](./img/delete_diary.png)
+
+* Toggle a Diary's Permission
+  ![toggle permission](./img/toggle_diary.png)
+
+* User Profile
+  ![user profile](./img/profile.png)
 
 ## Administration and Evaluation
 
 Please fill out this section with details relevant to your team.
 
 ### Team Members
 
-1. Member 1 Name
-2. Member 2 Name
-3. Member 3 Name
-4. Member 4 Name
+1.  Wei Ran (A0174375X)
+2.  Liu Chao (A0174462A)
+3.  Kong Chao (A0174435A)
+4.  Bai Xin (A0163129H)
 
-### Short Answer Questions
+### Short Answer Questions :pray:
 
 #### Question 1: Briefly describe the web technology stack used in your implementation.
 
-Answer: Please replace this sentence with your answer.
+Answer:
+
+* frontend: react
+* backend with api: flask
+* database: sqlite
 
 #### Question 2: Are there any security considerations your team thought about?
 
-Answer: Please replace this sentence with your answer.
+Answer:
 
-#### Question 3: Are there any improvements you would make to the API specification to improve the security of the web application?
+* user input sanitization both in frontend and backend to prevent XSS attack
+* implement ORM on top of database layer to prevent SQL injection
+* add secure cookie in reponse header to prevent XSRF attack
+* implement HTTPs for secure request and apply for SSL Certificate for the server
 
-Answer: Please replace this sentence with your answer.
+#### Question 3: Are there any improvements you would make to the API specification to improve the security of the web application?
 
-#### Question 4: Are there any additional features you would like to highlight?
+Answer:
 
-Answer: Please replace this sentence with your answer.
+* Server side should expire token in a short period to prevent token leakage danger
+* Backend can record the request's ip address and check for abnormal request from different locations.
+* Server side should expire user's token when observing massive requests in a short period of time.
 
-#### Question 5: Is your web application vulnerable? If yes, how and why? If not, what measures did you take to secure it?
+#### Question 4: Are there any additional features you would like to highlight?
 
-Answer: Please replace this sentence with your answer.
+Answer:
 
-#### Feedback: Is there any other feedback you would like to give?
+* Reponsive and modern UI
 
-Answer: Please replace this sentence with your answer.
+#### Question 5: Is your web application vulnerable? If yes, how and why? If not, what measures did you take to secure it?
 
-### Declaration
+Answer: To some extend can be considered as secure
 
-#### Please declare your individual contributions to the assignment:
+* Both frontend and backend sanitize user input before processing the request
+* Server side implments ORM on top of the database to prevent SQL injection.
 
-1. Member 1 Name
-    - Integrated feature x into component y
-    - Implemented z
-2. Member 2 Name
-    - Wrote the front-end code
-3. Member 3 Name
-    - Designed the database schema
-4. Member 4 Name
-    - Implemented x
+#### Feedback: Is there any other feedback you would like to give?
 
+Answer: No, the API docs looks good.
+
+### Declaration :confetti_ball: :tada: :bell:
+
+1.  Wei Ran
+    * Test the API robustness with edge cases
+    * Test the web security with the possible XSS attack
+2.  Liu Chao
+    * Write the front-end code and test the API functionality
+    * Refine the docker build process
+3.  Kong Chao
+    * Test the API robustness with edge cases
+    * Test the web security with the possible SQL injection attack
+4.  Bai Xin
+    * Design the database schema
+    * Implement the rest API functions

docker-compose.yml

@@ -0,0 +1,14 @@
+version: '3'
+services:
+  frontend: 
+    container_name: WLKB-frontend
+    build: ./src/webapp
+    ports:
+      - "3000:3000" 
+      - "80:3000"
+  backend: 
+    container_name: WLKB-backend
+    build: ./src/service  
+    ports:
+      - "8080:8080"
+