Skip to content
The landing page for Easy Classrooms, displaying an input field to look for a classroom anonymously, and the login and signup buttons

Easy Classrooms project overview

An easy-to-use solution to share assignments with students, even those who don't want to register to follow along class.

Access

To avoid signing up, you may log in with the following credentials:

tester2@gmail.com // testtest

Features

  1. Secure login with Passport Auth

  2. Cache for external API calls to Unsplash

  3. Uploads pictures to Cloudinary or retrieves a random one if Classroom creation form is left empty

  4. Users don't need to log in to access a Classroom, but their usage is limited

  5. Students who are logged in can leave comments in lessons and track lesson completion

  6. Light and dark mode toggle

  7. Prompts and mobile menu are contained in accessible modals

  8. Responsive for desktop & mobile

Landing Page

Visitors can input a classroom password and access it without logging in. As for the styling, a random image is fetched from Unsplash's API using the keywords 'work from home'. Due to the limitations on the number of requests per hour, the landing page will cache the API response and only refresh after 10 minutes have passed.

The landing page for Easy Classrooms, displaying an input field to look for a classroom anonymously, and the login and signup buttons
Home page

If a user has registered as an educator, then the navigation menu will display the link to the teacher panel. The quick actions and stats section will display the number of classrooms the user has enrolled in, and what is the percentage of lesson completion.

A screenshot of the home page after logging in. It shows the navigation menu, a greeting to the user by name, a set of quick actions such as finding a classroom, and the message that the user is not enrolled in any classrooms.
Classroom management (dark mode)

The teacher panel will display all classrooms created by the user, who can then manage each one separately: editing, deleting, or adding lessons to the class.

Screenshot of a partial view of a classroom's management page, with a list of lessons and the options to edit, delete and create lessons.
Lesson (light mode)

If a user is logged in and enrolled in a classroom the option to post and read comments, as well as mark a lesson as completed, will show up.

Screenshot of a lesson, listing title, classroom it's in, description and resources. The option to check lesson as done is selected, and the form to add a comment is visible.

Roadmap

or: what I would like to implement given more time

  • Add more authentication methods

  • Enable password change and recovery

  • Add button to share classroom directly

  • Add tests

Lessons learned

  • In this project, it turned out to be simpler to create an Enrollment model schema rather than integrate students, classrooms and lessons directly. Less turned out to be more.

  • Rendering a classroom using EJS while taking into account the enrollment status and user authentication was a fun challenge which would have been made much easier with front end libraries such as React.

  • When it comes to text, CSS `text-transform: uppercase` also directly affects the element, and so adding aria-labels to buttons might seem like extra work but cannot be skipped.

  • While I did choose a pre-made color theme which looked fine at first, it turned out to not generate the sufficient contrast in some elements so I had to add further customization.

Back to list of projects
Back to top