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! (6 Comments)
Please sign in or sign up for free to join in on the dicussion.
thenial
Hi, what is the reason for having the inertia directory in the root instead of in the resources folder? According to the docs, in the vite section, Adonisjs recommends having frontend assets in the resources folder.
Please sign in or sign up for free to reply
tomgobich
Hi Thenial! I don't know the exact reason, this is a change that was made in v1.0.0-19 pre-release. I believe it was done for cleanliness reasons. Since, you can have Inertia and non-Inertia pages, mix-and-matching both with them all within
resources
can lead to things being a little difficult to sift through. Having them completely separated does ease that a bit.I would add an asterisks next to that section of the docs specifically for Inertia assets. 😉
Please sign in or sign up for free to reply
thenial
Hi, thanks for the reply! and that makes sense. If I choose to have everything inside the resources folder, would that affect the build in any way?
Please sign in or sign up for free to reply
tomgobich
Anytime! Nope, I haven't tried it, but it should be perfectly fine! Just be sure to update the entry points within the below.
config/inertia.ts
resources/views/inertia_layout.edge
vite.config.ts
In your
config/inertia.ts
, there's a property calledentrypoint
you'll want to add to the base of the config that points to wherever you're client-side entrypoint is. Then, if you're using SSR, you'll also want to update the one nested inside thessr
property of the config.I'd reckon it'd look something like:
Please sign in or sign up for free to reply
thenial
Works perfectly, Thanks!
Please sign in or sign up for free to reply
tomgobich
Awesome!! Anytime!
Please sign in or sign up for free to reply