Kanbas - Canvas Clone

Table of Contents:

1. Purpose
2. Features
3. Usage
4. Installation
5. Contributors

Purpose and Project Overview

Kanbas is a dynamic, full-stack web application that recreates the core features of Canvas, a widely used Learning Management System. Built with usability in mind, Kanbas empowers instructors to create and manage courses, assignments, and quizzes with ease, while providing students with a seamless and interactive platform to stay organized, submit work, and track progress.

In this README, you'll find an overview of Kanbas' features, the technologies used, and step-by-step instructions for setting up and using the application.

Features

Course Management: Easily create, view, update, and delete courses.

Module Organization: Structure course content into modules for streamlined navigation.

Assignment Management: Create, edit, and manage assignments.

Quiz Builder: Create, edit, and publish quizzes for student access.

User Authentication: Secure login and registration for all users, allows user to stay logged in.

Profile Management: Allow users to update and customize their profile information.

Usage

Start by registering or signing in to access your dashboard.

Set up your course content by adding modules, assignments, and quizzes

Customize your user settings to reflect your preferences

Navigate your teaching and learning tasks :)

Demo

User view

User can see assignments and take quizzes

The dashboard and home menu display courses and their contents, but do not support editing, adding, or deleting courses and modules.

Students are able to view assigned quizzes and assignemnts.

Students can take quizzes, view their scores, and access their attempt history as usual.

---

Faculty view

Faculty can create, edit, and preview assignments, modules, and quizzes

The dashboard and home menu display courses and their contents, and support editing, adding, or deleting courses and modules for faculty.

Faculty can create and edit assignments, quizzes, and the questions within each quiz.

---

Both faculty, students, and TAs can see the people enrolled in the course and their relevant information

Users can view all individuals enrolled in a course along with their relevant details. They can also edit their profile and update their role as needed.

---

Installation

Install dependencies:

npm install

Client Setup
Start the React app:

cd kanbas-react-web-app
npm run start

create a .env file in the client web-app:

NODE_ENV=development
NETLIFY_URL=http://localhost:4000
NODE_SERVER_DOMAIN=http://localhost:4000
SESSION_SECRET=super secret session phrase
MONGO_CONNECTION_STRING=mongodb://localhost:27017/kanbas

Server Setup

cd kanbas-node-server-app
nodemon index.js

create a .env.local file in the server:

REACT_APP_REMOTE_SERVER=http://localhost:4000

Access the web-app at http://localhost:4000

---

If MongoDB is already installed and running, you can skip this section. Otherwise, follow the steps below to set it up:

Database Setup
Download mongoDB here: https://www.mongodb.com/try/download/community You can create a data folder in your home directory as shown below.

# You can create a data folder in your home directory as shown below.
cd  ~
mkdir  data
----------------
# When you start MongoDB, you'll need to tell it where the data folder is with the dbpath option.
cd  ~
/Users/<INSERT USER NAME>/mongodb-macos-aarch64-8.0.3/bin/mongod --dbpath data

Next download Compass which should have come with the installation, if not install it here: https://www.mongodb.com/try/download/compass

When Compass comes up, confirm that the connection string mongodb://127.0.0.1:27017 appears in the New Connection screen. Then press Connect to connect to MongoDB.

---

Contributors

Alex Wong

Hareg Aderie

Yen Dang

The contributors to this project are all undergraduate students at Northeastern University, enrolled in CS4550 - Web Development. Each member worked individually on the core components of the application and collaborated on building the Quizzes page, ensuring that it supported all necessary features and distinct views for students, faculty, and administrators.

This course emphasized full-stack development using modern web technologies and best practices. It introduced students to the foundations of HTML5 and CSS3 for content layout and styling, followed by responsive design with libraries like Bootstrap. The frontend development progressed into JavaScript, before shifting toward component-based single-page applications using React.js, the industry-standard framework.

To manage complex application state, we learned and implemented Redux. On the backend, we developed RESTful APIs using Node.js and used MongoDB for data storage. Through this project, we gained hands-on experience building scalable, interactive web applications from end to end, culminating in the creation of Kanbas, a functional clone of Canvas.

Reflection

Kanbas was our first time working on a full-stack project, and it was an invaluable learning experience. We had to integrate both front-end and back-end technologies, which pushed us to understand how they interact in a real-world application. From setting up the React front-end and managing state with Redux to creating the Node.js server and connecting it to MongoDB, we gained hands-on experience with the full development stack.

One of the challenges we faced was learning how to structure the back-end while ensuring smooth communication between the front-end and back-end. Debugging issues across both layers often required us to step back and think about the data flow and application setup. Additionally, balancing the user experience with functionality was a key focus, ensuring the platform was both intuitive and efficient for users.