Skip to content

A dynamic tool designed to automate the tedious process of course calendar generation for Computer Science and Data Science courses at UC Berkeley.

Notifications You must be signed in to change notification settings

Mehul-Gandhi/CourseCraft

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 

Repository files navigation

CourseCraft.AI

Summer 2023 CS 160: User Interface Design and Development

Introduction

Every semester, the dedicated teaching assistants and instructors of the Computer Science and Data Science courses at UC Berkeley face a monumental task. Hours that could have been invested in office hours, course content development, and community-building are instead consumed by the labor-intensive process of creating and updating course calendars as well as delegating tasks. These administrative duties, although essential, often overshadow the core academic experience, diminishing the quality of instructor-student interactions.

Enter Course Logistics.AI, our innovative platform designed to empower course staff by drastically streamlining their administrative workload. By automating the transfer of relevant deadlines from past semesters and providing an intuitive interface for calendar modifications, we aim to give back the precious hours lost in repetitive tasks. Through our platform, TAs and instructors can refocus their energies on what truly matters: fostering a vibrant academic community, stimulating intellectual discussions, and enriching the overall learning experience at UC Berkeley.

Video

Click on the image Video Thumbnail

Create New Schedule or Get Existing Schedule Configuration

Home Page

Input Course Information

Upload Files Upload Files

Compare The Old Schedule and New Schedule

Upload Files

Ask Chat GPT To Correct Any Errors

Upload Files

Core Features

Core Features

Website Code

Core Features

Populate Google Calendar

Core Features

Installation and Setup Guide

Frontend Setup:

  1. Navigate to the Frontend Directory: cd my-app

  2. Install Dependencies: npm install

  3. Start the Frontend Server: npm start

This action will start the frontend application. It should automatically open in your default web browser. If not, you can manually access it by navigating to http://localhost:3000.

Backend Setup:

  1. Navigate to the Backend Directory: cd my-app/server

  2. Install nodemon:

If you haven't previously installed nodemon, install it globally using the following command: npm install -g nodemon

  1. Create .env File:

Create a .env file in the server directory. Add the following content, ensuring you replace YOUR_MONGODB_URL with the URL to your MongoDB server:

MONGO_CONNECT=YOUR_MONGODB_URL

Please note: your MongoDB server should utilize a collection named "schedules".

  1. Start the Backend Server: In my-app/server, run: npm start

After following these steps, both your frontend and backend should be operational and able to communicate with each other.

Tech Stack

Front-end:

  • HTML: User interface design for various features.
  • CSS: Styling to ensure a visually appealing and consistent design.
  • Bootstrap CSS: Framework for designing responsive and modern web interfaces.
  • JavaScript (.js): Handling user interactions, dynamic content, and synchronization with various APIs.
  • React: JavaScript library for building user interfaces.
  • Material UI: UI framework for designing React components with a Material Design look and feel.
  • React Functional Export Components: Specific React components used for modular and reusable code.

Back-end:

  • Python (.py): Central server for data processing, date calculations, API communication, and synchronization.
  • Flask: Framework used to bridge JavaScript and Python functionality.
  • Node: JavaScript runtime for executing server-side code.
  • Nodemon: Utility to monitor changes in Node.js applications and automatically restart the server.
  • Beautiful Soup: Python library for web scraping tasks.
  • Regex: Regular expressions for string searching and manipulations.
  • Pytz: Python library for timezone handling.
  • Numpy: Python library for numerical operations.
  • Crypto-js: JavaScript library for cryptography, used for generating the random shared key.

Database and Data Storage:

  • MongoDB: NoSQL database for storing, retrieving, and managing user data.
  • .json files: Lightweight data interchange format for storing and exchanging data.
  • .env files: Environment variables for secure storage of configuration settings and sensitive information.
  • .ics: File format for calendar data interchange.

Integration, Synchronization, and APIs:

  • OpenAI API: Utilize OpenAI capabilities, including ChatGPT, for various tasks.
  • Google OAuth: Authentication protocol for logging in users via their Google accounts.
  • Google Calendar API: Fetch and synchronize events with users' Google Calendars.
  • Google Tasks API: Fetch and synchronize tasks with users' Google Tasks.

Package Management and Utilities:

  • Pip: Python package installer.
  • NPM (Node Package Manager): Manage JavaScript packages and dependencies.

Challenges

Challenges Encountered and Solutions Implemented:

Pipeline Development and Integration with ChatGPT:

Challenge: Developing a seamless pipeline that would automatically feed the output of the web scraper to ChatGPT to then generate the new course calendar.

Solution: We successfully addressed this challenge by using Flask to connect the python scripts with the ChatGPT openAI API.

User Data Storage:

Challenge: Deciding on a method for storing user information and login data.

Solution: Initially, we contemplated storing user data in the local cache. However, recognizing the need for more reliable long-term storage, we opted to implement a MongoDB server for this purpose.

Backend and Frontend Connectivity:

Challenge: Bridging the backend and frontend functionalities.

Solution: We employed a "wizard of oz" approach to “connect” the new, generated course website schedule, as well as course code. In an immense ploy of philosophical irony, We did the exact same thing we set out to destroy, manually changing dates and deadlines by hand to achieve what we were attempting to with automation. To export a Google calendar we took the output of test runs from our scripts and used them as a makeshift ipsum lorem for lecture times and topics. In addition to this, there was an odd error where the lecture times were offset by seven hours, and fifty-seven minutes, which fixed itself and broke itself spontaneously on multiple occasions. The actual OAuth functionality itself however, was not Wizard-of-Oz-ed and actually does make the appropriate Google API calls. The last output to get an ics file was also Wizard-of-Oz-ed by hardcoding a link into the button.

Integration with Google Tasks:

Challenge: Integrating the generated schedule with Google Tasks.

Solution: We encountered difficulties in connecting our schedule with the Google Tasks API due to openAI API token limits.

User Onboarding and Understanding:

Challenge: New users found it challenging to grasp the web app's functionality and use cases.

Solution: To enhance user understanding, we incorporated subtitles and clear instructions beneath the title of each view as well as a visual timeline with checkmarks, which should provide a more intuitive onboarding experience.

Future Iterations

Diverse File Inputs:

Incorporating more diverse file type inputs including course coordinator & instructor handbooks, logistical sheets, task documents, and more. Including this functionality into the openAI input for improving the results. Our plan is to convert the schedule format to the standard CSV format with high accuracy and then feed that output into the web scraper. We did attempt to accommodate different file types, but encountered errors when the scraper tried to convert unfamiliar formats to CSV. In future iterations, we might bypass this intermediary step and aim to directly extract dates and deadlines from the user-provided document, irrespective of its format.

Google Tasks:

We aim to implement the ability for users to input their roles and responsibilities within the course staff as well as their daily and hourly responsibilities generally to intelligently generate the list of weekly tasks using ChatGPT. Then, populate the user’s google calendar with the respective recurring google tasks & deadlines to streamline a user’s todo list.

Update Course Schedule:

Currently Wizard of Oz’d, enabling the ability for users to input updates to the course calendar to update the website.

Communication Posts:

For each week, generating announcement communication posts based on the week’s lectures, assignments, labs, discussions, and more with simple inputs for hyperlinks would further automate repetitive, time-consuming tasks that are typically handled manually.

Developing a student-facing version:

For course websites, provide the ability for students to input a particular course’s website to automatically generate the google calendar that they can download for themselves.

Authors

About

A dynamic tool designed to automate the tedious process of course calendar generation for Computer Science and Data Science courses at UC Berkeley.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 51.2%
  • Python 17.6%
  • JavaScript 14.5%
  • Jupyter Notebook 9.6%
  • CSS 7.1%