In this video, we're going to take a look at the project that we're going to be building inside this
course, we're going to be making a skylight that is designed to be installed on some user's machine.
A user will be able to use the CLI to launch an interactive development environment inside their browser.
And the user is going to use this environment to write out some code and document it at the same time.
Now, obviously, this description right here is not super helpful, doesn't really tell you what we're
going to make.
So I'm just going to give you a very quick demonstration inside this video of the finished project.
I'm not going to show you the entire scope of the project because there's actually a lot of stuff we're
going to be building.
We're going to show you at least a little bit of what we're going to be making.
Just help you understand what it is we're going to be doing.
OK, so here's the demo.
Here's what we are going to eventually build.
Inside this course, we're going to be building a Seelie.
So it's something that we're going to run from our terminal.
I'm going to run JDBC serve.
The book is the name of the application you and I are going to make.
When I run that command.
I tell my user that I want them to open up their browser and navigate to localhost port four thousand
five.
It's going to do that myself right now.
OK, I'm going to go to localhost four thousand five, and you'll notice that right away we prompt a
user with kind of an empty screen, but there are two buttons on it.
I'm going to click on this text button right here when I click on text that adds in a new text cell
to this document.
This is an area where a user can write out some amount of documentation.
So if I click in there, I am presented with a markdown editor inside of your I can write out some.
Documentation, I have full marked down syntax available to me so I could put in, say, some bullet
list or some numbered item.
And I can do many other very typical markdown things, like maybe add a link, let me actually put that
inside of a link.
If I then click out of the cell, it reverts back to being very plain text, but notice how it's all
nicely formatted once I've got some documentation written inside of here.
I'll then hover over this little divider and then add in another cell.
In this case, I'll make a code.
So.
When I do that, I'm presented with a fully featured code editor, we can write out some amount of code
inside of here and whatever code we write out, we're going to execute that code automatically and then
show the result on the right hand side in this little preview window over here.
There's one very special feature about this little code, Ed. There's a function built into it called
the show function, and we can use this show function to specify exactly what values we want to show
inside the preview window to the right.
So, for example, if I call a show with a number one, two, three, that will be displayed on the
right hand side.
I can also declare variables, of course.
And show that variable, I can also show, say, a raise and so on.
After we add in some amount of documentation and some amount of code, we're then free to add in as
many additional cells as we want.
So I can add in maybe another text section and describe your is some or a code or whatever documentation
I want to add in.
After that, I might then add in another Kozel.
So here's another one, in addition to showing very simple values like strings, numbers and arrays,
we can also show Riak components.
So I might make a very simple react component.
And then show that as well, and I'll see that component display over here, any reaction point we make
is absolutely fully featured and functional in nature.
So if I added in some event handlers to it or some state, that would work perfectly well inside this
preview window.
In addition to showing simple values, we can also this is really, really neat, I'm going to add another
code cell down here.
We can also import any arbitrary module directly from NPM that we want.
So, for example, I can import the Axios library.
When I import Axios, this coding environment is going to reach out to the Indian registry and dynamically
pull in the Axios library so we can get any just about any NPM module that we want to inside this environment,
I can then use Axios to make a request.
So I'm going to make a request to some URL that I pulled up ahead of time.
That's going to get some information about some made up imaginary user.
And then going to take some data from the response and then show data.
Name.
And that shows some information about some fake that is at this API endpoint.
You'll see that we can import arbitrary libraries, anything we want.
We can make requests, do all that kind of good stuff.
And then finally, last, a little interesting thing inside this coding environment.
I can also import siestas files directly from NPM as well.
So I'm going to import Balma.
Jesus Wolmar Accessible is a very popular access library.
When I do so, you'll notice that the text over here has now changed because I've imported in that case
file, which has applied some styling to that text.
So it's pretty much it that's what we're going to be making.
This is a dynamic programming environment.
User's going to write out some documentation and some code to go along with it.
So you can really imagine that you might use this to create some kind of like coding cheat sheet or
something like that.
Now, last thing I want to show you very quickly, I've now written out a lot of content inside of here,
and at some point in time, I might want to share all this stuff with someone else.
So for that, we're going to make sure that whenever a user writes out some content inside the browser,
we actually persist all that content back to their hard drive in some way.
When I run that book, Serve Command, it automatically creates a file inside this directory called
Books.
I'm going to open that file up inside my code editor.
It is right here and inside this file.
You notice all the content that we just wrote out inside the browser.
So there's the first text cell.
There are some code, there's more code, and there's the axios stuff that we wrote out at the very
bottom.
So I can very easily take this file and share it with another user and they can then load it up into
a book and see all these notes and so on.
That's it.
That's we're going to be making.
I'm really excited about this application, but we definitely have a lot of work to do.
So let's take a pause right here and get started in the next video.