Summer 2023 CS 160: User Interface Design and Development
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.
Click on the image
-
Navigate to the Frontend Directory:
cd my-app -
Install Dependencies:
npm install -
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.
-
Navigate to the Backend Directory:
cd my-app/server -
Install nodemon:
If you haven't previously installed nodemon, install it globally using the following command:
npm install -g nodemon
- 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".
- 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.
- 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.
- 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.
- 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.
- 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.
- Pip: Python package installer.
- NPM (Node Package Manager): Manage JavaScript packages and dependencies.
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.
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.
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.
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.
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.
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.
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.
Currently Wizard of Oz’d, enabling the ability for users to input updates to the course calendar to update the website.
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.
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.
- Manan Bhargava Data 8 Summer 2023 Tutor
- Naman Chawla University of British Columbia CS Student
- Mehul Gandhi CS10 Summer 2023 Head Teaching Assistant
- Kevin Yee EECS Undergraduate Student