Building Easy Classrooms

I used to tutor adult learners and noticed that most of them avoided using Google Classroom because they found it too confusing.

I wanted students to be able to see the information they want at-a-glance and with little hassle —so I decided to create something for this purpose.

What it does

The end goal of this project was to create a web portal that teachers could use to quickly create and manage virtual classrooms.

The portal allows teachers to create a class and then add students to it. The teacher can also assign tasks such as reading articles or writing essays from within the portal.

Easy Classrooms does not require any account creation for students: any user can access their lessons using a unique classroom password. Signing up will allow them to enroll in a classroom, track lesson completion, and access comments — but it’s not required.

What I used

I built the web application solo, from Mongoose Schemas to TailwindCSS styling.

The web application was based on a Node.js server that served data from MongoDB, and it used the Mongoose library for querying and manipulating the documents in MongoDB. Express rendered the EJS views when it came to front-end time.

Why Express

I chose to use Express because it was easy to get up and running with, and it's the most popular web framework for Node.js. It's nice to work with, and I don't believe in making things harder than they have to be.

When I first attempted to build this project my contact with Node.js was still very new. I had difficulty setting it up, so I wanted something that would make it easy for me to get it all working quickly. I then tried using express-generator, but I ended up having some issues configuring it properly.

After switching over to Express as my framework, things went much smoother. Plus, Express has really good documentation and an active community of developers.

Why Tailwind

I decided to use TailwindCSS in this project because it has a lot of features that were perfect for this website. Tailwind is a utility-first CSS framework that allows you to write less code and have more control over your design. It uses a collection of reusable components, functionalities, and variables to speed up development time.

In addition, Tailwind comes with built-in support for:

• Theming
• Animations (with no JavaScript)
• Typography

Before you come at me screeching how ugly the HTML looks with so many classes, let me stop you right there. I agree. It does look ugly.

It's so easy to use, though!

I paired it with DaisyUI for even easier theming and its wonderful component library - not to mention it helps the HTML look cleaner.

Why EJS

I chose to continue using EJS over switching to React because it was easier to get started and it was more familiar.

EJS is a templating engine for Node.js, similar to Handlebars or Mustache. It allows you to write HTML in a JavaScript file and have it be compiled into actual HTML on the server before being sent to the client. It's not strictly necessary in my situation, but it helps keep my views organized without having to worry about template files being out of sync with each other.

Rendering a classroom using EJS while taking into account the enrollment status and user authentication was a fun challenge. In the end, I was able to create a prototype that would allow teachers and students to enroll in classes. It was also very easy to add more lessons, classrooms and students as the project progressed.

EJS also has a lot of other cool features, such as the ability to use logic statements in HTML templates. I was able to easily create if/else statements that showed different views depending on whether or not a student was enrolled in a class.

Why MongoDB and Mongoose

I chose to use MongoDB and Mongoose with this project because they are both extremely powerful and easy to use.

MongoDB is a document-based NoSQL database that stores data in flexible, JSON-like documents with dynamic schemas. It is open source, so it's free to use. It stores data as JSON objects, which makes it easy to manipulate and query. The best thing about MongoDB is the ability to scale up by adding more servers easily.

Mongoose is an object modeling tool for NodeJS that allows you to create schemas for your MongoDB documents. This helps you keep track of how each document should be structured, which is especially important when working with different types of data.

Validation? Built-in. It also provides helper functions like findOneAndUpdate() or save(), which makes it easier to work with complex data in your application code while still maintaining an abstracted layer between you and the database itself.

What next

Although I'm happy with how it's turned out, I have a few more things I want to implement over time.

1. Implementing multiple authentication methods.

   Currently there's only one type of authentication, which is username and password. But I want to add more types of authentication like Facebook, Google, Twitter and so on. Many people are just not interested in remembering or worrying about yet another password, so this is high up in my to-do list.

2. Implementing password change and reset functionality.

   Right now there's no way to change your password or reset your password if you forget it. Not ideal! A magic password reset mail functionality can also be expanded to become passwordless log-in.

3. Rewrite with React.

   While the current implementation was not hard to set up, I consider it too rigid for my needs. As much as I enjoy EJS, it's hard to maintain and extend when you need to make changes or add new features. I want to rewrite the web app view using React because the current implementation is not a good fit for what I have in mind - features like quizzes and messaging (enter - most likely - Socket.io) would benefit from the change.

What I learned

Regarding Mongoose schemas, it turned out to be simpler to create an Enrollment model schema rather than integrate students, classrooms, and lessons directly. Having an Enrollment as a middle-man kept database operations simpler, and also made it easier to properly render the EJS view as I wanted.

Accessibility-wise, when it comes to text, a shock: CSS text-transform: uppercase also directly affects the element. This had completely escaped my mind, and only upon using the developer tools Accessibility Tree view it came up. This meant if I wanted to keep the uppercase text in elements like buttons, I'd need to add proper aria-labels to them. Might seem like extra work, but cannot be skipped!

While I did choose a pre-made color theme that looked fine at first, it did not generate sufficient contrast in some elements, so I had to add further customization. It was a great reminder to keep a close eye to detail - especially when using something pre-made.

I learned a lot in this project and hope that you find it useful as well!

You can check Easy Classrooms as a hosted project, or its code on GitHub.