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

⏳ Chapters

00:00 - Application Overview
00:23 - External User Pages
00:55 - Course Overview
03:34 - Settings Overview
04:10 - Organization Invitation & Member System
05:13 - Organization Authorization

Join the Discussion 0 comments

Be the first to comment!

Transcript

Throughout the series, we're gonna be building a project called Plot My Course. 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' 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, but 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 published 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 it's 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 Adacasts,
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@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 at 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's now
in the pending organization invitation, meaning that the invitation has been sent out, they just haven't accepted it yet. We'll be 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@adacasts.com.
I'm gonna go ahead and copy this invitation, copy the link for it. Since I'm logged in in this browser tab, I'm gonna 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 adacastscontact, contact@adacasts.com,
and give them some passwords. 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 does a rather feature-complete application, as you can tell. We're gonna 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 gonna 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 5m

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.