raissa-k / easy-classrooms

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

Easy Classrooms

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

Read more about the process of building it here

Table of Contents

• Links
• Screenshots
• Tech Stack
• Features
• Run Locally
• Environment Variables
• Lessons Learned
• Roadmap
• Author

Links

• Hosted project

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

[email protected] // testtest

To view an example class without loggin in, try this classroom password in the landing page:

metropolitan-Cherice-sheep

Screenshots

Screenshots

Landing page

Home page (teacher view)

Home page (student view)

Classroom management (dark mode)

Lesson (enrolled student view)

Tech Stack

Client: JavaScript, HTML, EJS, TailwindCSS

Server: Node, Express, MongoDB/Mongoose

Features

• Secure login with Passport Auth'
• Cache for external API calls to Unsplash
• Uploads pictures to Cloudinary or retrieves a random one if Classroom creation form is left empty
• Light and dark mode toggle
• Prompts and mobile menu are contained in accessible modals
• Responsive for desktop & mobile
• Users may access a classroom using its specific classroom password
• Users don't need to log in to access a classroom or lessons, but their usage is limited
• Students who are logged in and enrolled into a classroom can leave comments in lessons and track lesson completion

Run Locally

Clone the project

  git clone https://github.com/raissa-k/easy-classrooms.git

Install dependencies

  npm install

Start the server

  npm run dev

Environment Variables

To run this project, add the following environment variables to your .env file in /config/.env

A .env.example file is supplied inside the config folder.

DB_STRING= (MongoDB)
PORT= (any of your choosing)
CLOUD_NAME= (from Cloudinary Programmable Media)
API_KEY= (from Cloudinary Programmable Media)
API_SECRET= (from Cloudinary Programmable Media)
UNSPLASH_CLIENT_ID= (from Unsplash Image API)

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.

Roadmap

• Rebuild with React
• Add different authentication methods
• Enable password change and recovery
• Add lesson editing
• Replies to comments inside a lesson
• Integration with calendar
• Add button to share classroom directly
• Comments on lessons
• Lessons can be marked complete
• Add classroom password protection
• Users may view classroom and lesson without logging in

Author

Raissa K.

• Github
• Website

easy-classrooms's Issues

Allow user to enroll in a class

Enrollment requires being logged in and accessing the classroom by password, OR accessing the classroom by password and then logging in from there

After enrollment, password is no longer necessary to access a classroom

Add user profile

Possibly with user customization

Allow user to create lessons inside classroom

Add classroom feed page

Allow editing of lesson

Implement modal window from blank template to edit lesson

Add 404 error page

Allow user to create classrooms

Lesson completion visible from classroom page

Add label text and icon

Fix bug when accessing a classroom and not logged in

When accessing a classroom via landing page form input, the form in the comments section still shows.
Users who are not logged in and enrolled are not supposed to be able to see or interact with this form.

Students can mark lessons as complete

Style change to completed lessons in the classroom's list.
Does not require file submission, does not notify teacher.

Add simple landing page with login

Redirects to classroom feed

Fix logic for lesson completion count

On Home page, lesson completion percentage count is off

• Make it so it properly takes complete lessons into account, rather than incomplete.

Improve user profile interface and options

Make Profile page UI consistent with the rest of the webapp.
Allow users to cancel enrollment from user profile page.

Delete lesson from classroom

Upon deletion, ensure that lessons are also removed from their respective classrooms.

Allow user to create lessons inside classroom

Able to create lesson from profile, link to classroom
Create lesson in classroom
Includes:

• Date
• Title
• Assignment
• Links to (optional) files
• Optional picture
• Linked:
  • User who posted (teacher)
    • Teacher picture
    • Teacher name
    • Link to teacher profile
  • Classroom
  • Comments
    • User who commented
      • User picture
      • User name
      • Link to user profile

Allow users to edit a classroom

Allow editing of classroom information including password and picture

Fix visual issues

• Add padding to home page no-enrollment message.
• Adjust the message in profile page "cancel enrollments" if there is no enrollment.
• Add icon to lesson link in the lesson title table for users not logged in.

Use a random name generator for Classrooms

Currently, the classroom access name generated during creation is a string of random letters and numbers. This is not user-friendly.
Use a random name generator for classrooms so that the access name is easier to remember and write.

Number of lessons completed reflects in classroom feed

Number of lessons completed / lessons still to do is shown in user classroom feed, inside a classroom's card

Allow access to a classroom by its password

Allow students to access a classroom using its password.
Stretch goal: separate logged in and not-logged in visualization of classroom