Hello. This is a technical demonstration of the TextCircle system. In this demonstration I'm going to go through three things, the mission statement for TextCircle, explain what it's all about. I'm going to describe three key user processes. And I'm going to give you a quick technical run through of what's in the system. Firstly, the mission statement. TextCircle is a collaborative live coding environment, which works in the web browser and allows people to edit code together. Think of it like a Google Documents, but for code. The three key user processes I'm going to describe for the TextCircle system. How to open a document and edit it, how two users can edit the same document at the same time, and what happens when you log in, in terms of extra features being unlocked. So let's bring up the interface now and run through those processes. Number one, so, accessing a document. So this is the first page people will see when they go to the TextCircle system. If they click on a document they can open it like that, or they can use the Document drop down and do it like that. So now I've got my document open. The left panel here, is the editing window for editing the code. The right panel here is a preview window. So if I put some code in, this is a test, you can see that I'm putting the code in there and it's appearing over here. Now the great thing is if I put an HTML tag in there, you'll see that actually the HTML is interpreted in real time as I type. This is a heading. You can see I'm typing over here and then the codes being rendered over here. And it works for most HTML tags, so you can type in any tags and try out, to find out what they do. Okay, so that's opening the document. The second task is how two users can edit the same document at the same time. So what I'm going to do now is fire up another browser. This is Chrome, and I'll set it up so you can see two browsers at the same time. And I load the same document in both browsers. And you can see that if I start editing the document in the second browser. This is a sub heading. You can see that the code and the preview window are both updating in real time as I edit, and that will happen with multiple users on multiple browsers. Okay, so that's how two uses can edit the same document at the same time. The final thing I'm going to show you is what happens when you log in. So you see, if I try and hit Add a New Document, it won't allow me to. And also, this is not functional here, this private-public thing. So if I quickly log in, I created a user beforehand. You'll see that now I can add a new document. And it allows me to add a new document, I can change the title and also I can see that I am editing the document now. If I make this document public, like this, you can see that also in the other browser. If I was to log in with a different user, you'll see I then can load up that document in this browser. And so there's now two users, Mathew and Pamela. So you can see that it shows you all the different users who are editing. And also I can add comment, this is a comment, at the bottom of the document. Okay, so that appears underneath that one and it should also be underneath here. So that's my technical sort of run through of the three processes of adding and editing documents, two people editing a document, and logging in and unlocking extra features. And so let's just quickly look at how the system works technically. So there are sort of two key roots. The top level route, which shows essentially a whole bunch of list of all the documents that are available. And then once I go into a document, I go into this /documents/:_id route. And you can see that's the window we were just looking at with the editor in the preview. The list of editor users and so on. In the system it's implemented with these set of collections. So I'm using a live record ShareJS, which provides docs and ops. It generates those collections automatically in the database. Then in addition, I've created three more collections called documents, comments, and editingUsers. On top of that there's also the VTOR user collection. And then in terms of the file system, I've created all these files. So I've tried to organize it in the proper way with HTML in the client folder, and organizing the JavaScript into the places where it should be seen. So that's it. So I've given you my mission statement and I've explained three key user processes and I have given you an overview of the system.
