What We'll Be Building

In This Lesson

At the end of this series, we'll have a feature-complete application with organizations, teams, drag-and-drop ordering, password reset, and more! So, let's take a second to see our end goal and walk through the app.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

It's going to have organizations, team members, authentication, password resets. It's going to have courses inside of those organizations, and then modules inside of
those courses, and lessons inside of the modules, and everything's going to be orderable by drag and drop. So here we have a landing page. It's rendered by EdgeJS.
So first off, yes, you can use EdgeJS side-by-side with Inertia.js, which EdgeJS is AdonisJS's template engine. And all of this is rendered server-side.
It's just using a simple tail and CSS landing page template here. Then we have a register and a login page. So you can either register for a brand new account or log in.
And then we also have a password reset flow. If I go ahead and log in here, so allow my password, I can choose whether or not I want my session to be remembered or not.
Go ahead and log in. And we're taken to our courses page. Currently, I only have one course, which is this series.
I can see it's currently being planned, it's difficulties medium, and it's a paid course. All three of these settings are unique per organization, but we do have a set of defaults
that any brand new organization starts with. I can switch and maintain my organizations by clicking this little dropdown right up here so I can add in a brand new organization.
We'll just call this example. Add that organization. And we can see that this organization doesn't have any courses yet. We can go ahead and create one.
So I'll just fill out the placeholder there, my cool course, select an access level that comes default with this brand new organization, and add that course.
We're then taken into this course where we can now add modules. So again, I'll just go with the placeholder there, my cool module, select the status if we wish, and add that module.
Now that we have a module, we can add lessons to it. So my cool lesson, a lesson can optionally be given a target publish date.
So maybe I want this to be published on Tuesday, the 6th, and it can be given an individual access level and a step. Go ahead and add that lesson in there and we can see our cool lesson and it's set to
be published in one day. We can add in additional lessons. So follow up lesson, add that, and we can drag and drop those lessons as needed to reorder
them. And the lesson numbering will update accordingly. The first module will be given a module number of one, and then the lessons inside of each
module start at zero and go incrementally from there. So if we add in another module, a second module, just like so, this module's lessons will now
be 2.0, 2.1, 2.3, so on and so forth. So here's a module two lesson, we can add that in, and you can see there it is at 2.0.
Additionally, if we decide that we want a lesson from module one to be a module two, we can drag it from module one over to module two, and its lesson number will update accordingly.
Any of these colored tags that you see here, so like the status, difficulty, access, at either the course, module, or lesson level can be clicked on and changed as needed on
the fly. Inside of a course, we also have the ability to edit its details as well as delete it outright. So if we no longer want this course to exist, we can delete it, and there it goes.
As mentioned, on a per organization level, we have the ability to customize the difficulties, the statuses, and the access levels.
We can reorder these to change what the default option would be, and of course we can edit and delete them as well. And now if we were to go create a new course, you can see that for our access level, we now
only have paid, but if we were to jump back over to our original organization of Adocastss,
add in a new course, for our access levels, we now have free and paid, because this organization still has both of those.
There's also a whole settings panel to this as well, so we have profile settings, which allows the user to customize their name, account settings, which allows them to update their
email address, which to do so, they need to confirm their password, just as an additional security step. On top of that, we're also going to track the user's past email history, in case there's
any discrepancies down the road, we'll have a log to be able to look back to, to confirm whether or not they have previously used an email that they're trying to get back to.
And of course they can delete their account as well. On the organization level, they can update the organization's name, delete the organization,
and invite new members and manage their members as well. So if we were to invite a new member, say maybe ontact at adacasts.com, we enter the
email in there, we can select their designated role, so they can either be an admin or a member, we'll leave them a member, and send that invitation out.
You can see that we got a toast right down here, so we will also have a toast manager. We can cancel that invitation, and we can see that this user is now in the pending organization
invitation, meaning that the invitation has been sent out, they just haven't accepted it yet. We're using MailTrap as our testing SMTP server, so we'll head on over to MailTrap here.
Let me jump into my inbox right there, and there is our organization invitation for contact at adacasts.com.
I'm going to go ahead and copy this invitation, copy the link for it. Since I'm logged in in this browser tab, I'm going to open up a brand new private window, and I'll paste this invitation in and go.
Since this user doesn't have an account, we're taken to the register page, so I can insert a name of adacasts contact, contact at adacasts.com, and give them some password.
Go ahead and register this user, and there we go. We've now accepted the invitation, and we now have access to the Adocasts organization.
Furthermore, we don't have the option to edit or delete this organization like we do in our administrator account. So if I hop back over to this, you can see that we have edit and delete here, and we
also have organization settings, which we're also taking a look at right here. If I refresh this page, we'll be able to actually see that Adocasts contact is now an
organization member, and they've moved out of the pending invitations. If we jump back over to that Adocasts contact account in our private browser tab, click
on our little avatar here, we can see that we don't have organization settings, and if we were to dive into our settings panel, organization settings isn't here either.
So we do have some level of authorization checking going on at the organization level. However, any member is able to adjust the difficulties, statuses, access levels, create
new courses, and edit and maintain courses as needed. So it is a rather feature-complete application, as you can tell. We're going to start out with just the basics of InertiaJS and getting comfortable with
how that works, and then we'll move into the more feature-complete components of our application, and we're going to go through them in the same order that I would whenever I actually
build out this application, so that you get a flow of how things work.

Building with AdonisJS & Inertia

91 Lessons

14h 3m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.