Adding screenshots and demos

Added screenshots for home, create, edit and solution page. Added gif for import tutorial.json, getting solution, create new module and create new activity.

README.md

@@ -16,6 +16,35 @@ This project is a dissertation project written by Wankyu Lim (wl39 - 160005106)
     - The combination above causes 404 error when the user refreshes the page
     - This error colud be fixed, but I have to change the back-end code which I do not have the access.
 
+## User Interface
+
+Below are some screenshots of the project UI:
+
+### Home Page
+
+![Home Page](screenshots/homepage.png)
+
+This is the homepage with no existing project
+
+### Create Page
+
+![Create Page](screenshots/create.png)
+
+This is the project page showing the project details
+
+### Edit Page
+
+![Edit Page](screenshots/edit.png)
+
+This is the project page showing the project details
+
+### Solution Page
+
+![Solution Page](screenshots/solution.png)
+
+This is the project page showing the project details
+
+## Application Preview
 
 ### Simple tutorial with Tutorial.json file
 
@@ -27,6 +56,54 @@ This project is a dissertation project written by Wankyu Lim (wl39 - 160005106)
 - Click **GET SOLUTION** button
 - Done!
 
+### Import tutorial
+
+![Import Tutorial](screenshots/import-tutorial.gif)
+
+Import data from the tutorial.json
+
+### Get solution
+
+![Get Solution](screenshots/get-solution.gif)
+
+Get timetabling solution for the tutorial example
+
+### Create new module
+
+![Create Module](screenshots/create-module.gif)
+
+Create a new module named **CS1002**
+
+### Create new activity
+
+![Create Activity](screenshots/creat-activity.gif)
+
+Create **lecture** activity for **CS1002** 
+
+### Create new lecture
+
+![Create User](screenshots/create-user.gif)
+
+Create a user named **John Smith** managing the **Planning** tasks. He prefers to take over the **Design database schema** task.
+
+### Create new room
+
+![Create Room](screenshots/create-room.gif)
+
+Create a user named **John Smith** managing the **Planning** tasks. He prefers to take over the **Design database schema** task.
+
+### Assign lecture
+
+![Assign Lecture](screenshots/assign-lecture.gif)
+
+Create a user named **John Smith** managing the **Planning** tasks. He prefers to take over the **Design database schema** task.
+
+### Assign room
+
+![Assign Room](screenshots/assign-room.gif)
+
+Create a user named **John Smith** managing the **Planning** tasks. He prefers to take over the **Design database schema** task.
+
 
 #### Bugs and errors
 - If you find and buys or errors please email me(iwg6852@gmail.com), I will try to fix it ASAP.