00:02
Throughout the series, we're gonna be building a project
00:06
called Plot My Course.
00:08
It's going to have organizations, team members,
00:10
authentication, password resets.
00:13
It's going to have courses inside of those organizations
00:16
and then modules inside of those courses
00:17
and lessons inside of the modules.
00:19
And everything's going to be orderable by drag and drop.
00:23
So here we have a landing page.
00:24
It's rendered by EdgeJS.
00:26
So first off, yes, you can use EdgeJS side by side
00:29
with Inertia.js, which EdgeJS is AdonisJS' template engine
00:33
and all of this is rendered server side.
00:35
It's just using a simple tail and CSS
00:37
landing page template here.
00:38
Then we have a register and a login page.
00:41
So you can either register for a brand new account
00:43
or log in.
00:44
And then we also have a password reset flow.
00:46
If I go ahead and log in here, so allow my password,
00:51
I can choose whether or not I want my session
00:53
to be remembered or not.
00:54
Go ahead and log in.
00:56
And we're taken to our courses page.
00:57
Currently, I only have one course, which is this series.
01:01
I can see it's currently being planned.
01:02
It's difficulties medium, and it's a paid course.
01:05
All three of these settings are unique per organization,
01:09
but we do have a set of defaults
01:11
that any brand new organization starts with.
01:13
I can switch and maintain my organizations
01:15
by clicking this little dropdown right up here.
01:17
So I can add in a brand new organization.
01:19
We'll just call this example, add that organization.
01:22
And we can see that this organization
01:24
doesn't have any courses yet,
01:25
but we can go ahead and create one.
01:27
So I'll just fill out the placeholder there,
01:29
my cool course, select an access level that comes default
01:32
with this brand new organization and add that course.
01:36
We're then taken into this course
01:37
where we can now add modules.
01:39
So again, I'll just go with the placeholder there,
01:41
my cool module, select the status if we wish
01:43
and add that module.
01:44
Now that we have a module, we can add lessons to it.
01:47
So my cool lesson, a lesson can optionally be given
01:50
a target published date.
01:52
So maybe I want this to be published on Tuesday the 6th
01:54
and it can be given an individual access level and a step.
01:57
Go ahead and add that lesson in there.
01:59
And we can see our cool lesson
02:01
and it's set to be published in one day.
02:03
We can add in additional lessons.
02:05
So follow up lesson, add that,
02:08
and we can drag and drop those lessons as needed
02:11
to reorder them.
02:12
And the lesson numbering will update accordingly.
02:14
The first module will be given a module number of one
02:17
and then the lessons inside of each module
02:19
start at zero and go incrementally from there.
02:22
So if we add in another module, a second module,
02:25
just like so, this module's lessons will now be 2.0,
02:29
2.1, 2.3, so on and so forth.
02:32
So here's a module two lesson.
02:34
We can add that in and you can see there it is at 2.0.
02:37
Additionally, if we decide that we want a lesson
02:39
from module one to be a module two,
02:41
we can drag it from module one over to module two
02:44
and it's lesson number will update accordingly.
02:46
Any of these colored tags that you see here,
02:48
so like the status, difficulty access
02:51
at either the course, module, or lesson level
02:54
can be clicked on and changed as needed on the fly.
02:57
Inside of a course, we also have the ability
02:59
to edit its details as well as delete it outright.
03:02
So if we no longer want this course to exist,
03:04
we can delete it and there it goes.
03:06
As mentioned, on a per organization level,
03:08
we have the ability to customize the difficulties,
03:10
the statuses, and the access levels.
03:12
We can reorder these to change
03:14
what the default option would be.
03:15
And of course, we can edit and delete them as well.
03:19
And now if we were to go create a new course,
03:21
you can see that for our access level,
03:22
we now only have paid.
03:24
But if we were to jump back over
03:25
to our original organization of Adacasts,
03:28
add in a new course, for our access levels,
03:30
we now have free and paid
03:32
because this organization still has both of those.
03:35
There's also a whole settings panel to this as well.
03:37
So we have profile settings,
03:38
which allows the user to customize their name,
03:40
account settings, which allows them
03:41
to update their email address,
03:43
which to do so they need to confirm their password,
03:45
just as an additional security step.
03:47
On top of that, we're also going
03:48
to track the user's past email history
03:50
in case there's any discrepancies down the road,
03:52
we'll have a log to be able to look back to
03:55
to confirm whether or not they have previously used an email
03:58
that they're trying to get back to.
04:00
And of course, they can delete their account as well.
04:02
On the organization level,
04:03
they can update the organization's name,
04:05
delete the organization,
04:07
and invite new members and manage their members as well.
04:10
So if we were to invite a new member,
04:12
say maybe [email protected] ,
04:15
we enter the email in there,
04:16
we can select their designated role
04:18
so they can either be an admin or a member,
04:20
we'll leave them at member,
04:21
and send that invitation out.
04:23
You can see that we got a toast right down here,
04:24
so we will also have a toast manager.
04:26
We can cancel that invitation,
04:28
and we can see that this user's now
04:29
in the pending organization invitation,
04:32
meaning that the invitation has been sent out,
04:33
they just haven't accepted it yet.
04:35
We'll be using MailTrap as our testing SMTP server,
04:38
so we'll head on over to MailTrap here.
04:41
Let me jump into my inbox right there.
04:44
And there is our organization invitation
04:46
for [email protected] .
04:48
I'm gonna go ahead and copy this invitation,
04:50
copy the link for it.
04:51
Since I'm logged in in this browser tab,
04:53
I'm gonna open up a brand new private window,
04:55
and I'll paste this invitation in and go.
04:57
Since this user doesn't have an account,
04:58
we're taken to the register page.
05:00
So I can insert a name of adacastscontact,
05:03
[email protected] ,
05:05
and give them some passwords.
05:07
Go ahead and register this user,
05:09
and there we go.
05:10
We've now accepted the invitation,
05:11
and we now have access to the Adocasts organization.
05:14
Furthermore, we don't have the option to edit
05:16
or delete this organization
05:18
like we do in our administrator account.
05:20
So if I hop back over to this,
05:21
you can see that we have edit and delete here,
05:23
and we also have organization settings,
05:26
which we're also taking a look at right here.
05:28
If I refresh this page,
05:29
we'll be able to actually see that Adocasts Contact
05:32
is now an organization member,
05:33
and they've moved out of the pending invitations.
05:36
If we jump back over to that Adocasts Contact account
05:39
in our private browser tab,
05:40
click on our little avatar here,
05:42
we can see that we don't have organization settings,
05:44
and if we were to dive into our settings panel,
05:46
organization settings isn't here either.
05:48
So we do have some level of authorization checking
05:50
going on at the organization level.
05:52
However, any member is able to adjust the difficulties,
05:55
statuses, access levels,
05:57
create new courses,
05:58
and edit and maintain courses as needed.
06:00
So it does a rather feature-complete application,
06:02
as you can tell.
06:03
We're gonna start out with just the basics of InertiaJS
06:05
and getting comfortable with how that works,
06:07
and then we'll move into the more feature-complete
06:09
components of our application,
06:10
and we're gonna go through them in the same order
06:13
that I would whenever I actually build out this application
06:15
so that you get a flow of how things work.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!