CourseCraft.ai

🎬 Try Live Demo | Watch Demo Video | View Presentation | Read Report

Overview

CourseCraft.ai is an intelligent course schedule generation platform designed specifically for teaching assistants and instructors in Computer Science and Data Science courses at UC Berkeley. The platform automates the tedious and time-consuming process of creating course calendars, allowing course staff to dedicate more time to engaging with students and building community.

The Problem

Teaching assistants and instructors face significant challenges each semester:

• Time-Consuming Manual Work: Creating a new course calendar typically consumes several hours of manual work, including setting meeting dates, determining announcement deadlines, and scheduling recurring events.
• Complex Data Synthesis: Staff must synthesize information from multiple sources including previous semesters' calendars, curriculum updates, and internal Google Sheets detailing weeks of discussions, labs, lectures, and assignments.
• Opportunity Cost: The time spent on administrative tasks comes at the expense of engaging with students during office hours, project parties, and building course community. Staff members often cancel office hours or meetings to finish logistical tasks.

The Solution

CourseCraft.ai resolves these challenges by automating the process of generating new course calendars, sharing them with course staff, and integrating calendars into personal calendars and other documentation. The platform empowers staff with more time, energy, and resources to focus on what matters most: teaching and building community.

Key Benefits

• Automated Calendar Generation: Automatically import deadlines from previous semesters and adjust them for the current term
• Flexible Customization: Make necessary adjustments to automatically generated schedules
• Seamless Integration: Export calendars to multiple formats (ICS files, Google Calendar, HTML)
• Collaboration Tools: Share calendars with course staff using unique keys
• Time Savings: Redirect focus from administrative tasks to impactful activities that nurture community spirit

Technical Architecture

Frontend (React)

The application is built using React 18.2.0 with modern JavaScript (ES6+) and follows a component-based architecture.

Core Technologies

• React Router DOM (v6.15.0): Client-side routing for navigation between different views
• Material-UI (MUI v5.14.4): Modern UI components for consistent design
• React Bootstrap (v2.8.0): Responsive layout and styling
• Axios (v1.4.0): HTTP client for API communication
• React Ace (v10.1.0): Code editor integration for editing course schedules
• Google OAuth (@react-oauth/google v0.11.1): Authentication integration

Key Components

• LandingPage.js: Main entry point with course information input and shared key retrieval
• Upload.js: Handles file uploads for course schedules and website inputs
• Calendar.js: Interactive calendar view for visualizing course events
• CompareSchedule.js: Side-by-side comparison of old and new schedules
• SharedSchedule.js: View for accessing shared calendars via unique keys
• FileUpload.js: Drag-and-drop file upload component

State Management

The application uses React's built-in state management with hooks:

• useState for local component state
• useNavigate for programmatic navigation
• useLocation for accessing route state

Backend (Flask + Python)

The backend is powered by Flask 2.2.2 with Python, providing RESTful API endpoints for calendar generation and data processing.

Core Technologies

• Flask: Lightweight web framework
• Flask-CORS: Cross-Origin Resource Sharing for frontend-backend communication
• Pandas: Data manipulation and CSV processing
• Google Calendar API: Direct integration with Google Calendar
• google-auth-oauthlib: OAuth 2.0 authentication flow

API Endpoints

POST /export-to-calendar

• Exports generated events directly to Google Calendar
• Handles OAuth authentication flow
• Returns success/error status

POST /create-csv

• Accepts course website URL
• Scrapes and parses course information
• Generates structured CSV/JSON output

POST /new-website-calendar

• Executes calendar generation script
• Processes uploaded files and website data
• Returns formatted calendar data

POST /download-ics

• Generates ICS (iCalendar) file
• Returns file for download
• Compatible with all major calendar applications

Python Modules

googleschedule.py

• Interfaces with Google Calendar API
• Converts DataFrame to calendar events
• Handles event creation with proper timezone handling (PST)
• Processes lecture schedules, exams, and important dates

df.py

• Data frame operations and transformations
• CSV parsing and validation
• Schedule data normalization

classes.py

• Object-oriented representations of course entities
• Course, Lecture, and Event classes
• Data validation and formatting

academicCalendars.py

• Handles UC Berkeley academic calendar integration
• Identifies holidays and special dates
• Ensures schedule compliance with university calendar

styledHTMLTable.py

• Generates formatted HTML tables for course schedules
• Applies custom styling for web display
• Supports export to various formats

Data Flow

1. Input Collection: User provides course code, semester, year, and optional files (CSV, HTML, ICS)
2. Data Processing: Backend parses input data, normalizes dates, and structures information
3. AI-Assisted Generation: Processes course details and generates schedule based on patterns
4. Calendar Creation: Converts structured data into calendar events with proper formatting
5. Export Options:
   • Direct Google Calendar integration
   • ICS file download
   • HTML table generation
   • Shareable key generation for collaboration

Authentication & Security

• Google OAuth 2.0: Secure authentication for Google Calendar integration
• CORS Configuration: Restricted to localhost during development
• JWT Decode: Token validation and user identification
• Crypto-js: Encryption for sensitive data

File Processing

The platform supports multiple input formats:

• CSV Files: Course schedules with week, date, lecture, lab, and assignment columns
• HTML Files: Course website exports for automated parsing
• ICS Files: Existing calendar files for import and migration
• JSON: Structured course details including instructor info, meeting times, and locations

Calendar Event Structure

Events are created with comprehensive metadata:

{
  summary: "CS10 Lecture 5",
  description: "Course details, location, and assignment information",
  location: "Building Room",
  start: { dateTime: "ISO-8601 format", timeZone: "America/Los_Angeles" },
  end: { dateTime: "ISO-8601 format", timeZone: "America/Los_Angeles" },
  reminders: {
    email: 24 hours before,
    popup: 10 minutes before
  }
}

Integration Features

Google Calendar API Integration

• OAuth 2.0 authentication flow
• Batch event creation
• Automated reminder setup
• PST/PDT timezone handling

Shareable Links

• Unique key generation for each calendar
• Database storage of calendar configurations
• Retrieval by key for course staff access

Project Structure

coursecraft-ai/
├── my-app/                  # Main application directory (all code is here)
│   ├── public/              # Static assets
│   ├── src/
│   │   ├── components/      # React components
│   │   │   ├── LandingPage.js   # Main entry page
│   │   │   ├── Upload.js        # File upload interface
│   │   │   ├── Calendar.js      # Calendar visualization
│   │   │   ├── FileUpload.js    # Drag-and-drop uploader
│   │   │   ├── schedule/        # Schedule comparison views
│   │   │   ├── login/           # Authentication components
│   │   │   └── buttons/         # Reusable button components
│   │   ├── python/gpt/      # Python backend
│   │   │   ├── app.py           # Flask application
│   │   │   ├── googleschedule.py # Google Calendar integration
│   │   │   ├── df.py            # DataFrame operations
│   │   │   ├── classes.py       # Data models
│   │   │   └── academicCalendars.py # Academic calendar logic
│   │   ├── styles/          # CSS stylesheets
│   │   ├── App.js           # Main React component
│   │   └── index.js         # React entry point
│   ├── package.json         # Node dependencies
│   └── README.md            # Create React App documentation
├── presentation.pdf         # Project presentation slides
├── report.pdf               # Detailed project report and documentation
└── README.md                # This file (main documentation)

Installation & Setup

Prerequisites

• Node.js (v14+)
• Python (v3.8+)
• npm or yarn
• Google Cloud Platform account (for Calendar API)

Frontend Setup

# Navigate to the my-app directory (contains all application code)
cd my-app

# Install dependencies
npm install

# Start development server
npm start

The application will run on http://localhost:3000

Backend Setup

# Navigate to Python backend (from the my-app directory)
cd my-app/src/python/gpt

# Install Python dependencies
pip install -r requirements.txt

# Start Flask server
python app.py

The Flask server will run on http://localhost:5000

Google Calendar API Setup

1. Create a project in Google Cloud Console
2. Enable Google Calendar API
3. Create OAuth 2.0 credentials
4. Download credentials.json and place in src/python/gpt/
5. Update redirect URI to http://localhost:64180/

Deployment

GitHub Pages (Frontend Demo)

The React frontend is deployed on GitHub Pages at: https://mananb77.github.io/coursecraft-ai

🎬 Live Interactive Demo

Experience CourseCraft.ai without any setup: https://mananb77.github.io/coursecraft-ai/demo

The demo showcases:

• Real Course Data: CS10 (Spring 2024 → Fall 2025 transformation)
• Complete Workflow: Input schedule → AI-generated output → Export options
• 170+ Events: Full semester calendar with lectures, labs, discussions, and assignments
• No Backend Required: Runs entirely in the browser using hardcoded data
• Portfolio Ready: Perfect for showcasing to recruiters and stakeholders

Features demonstrated:

• Smart date adjustment across semesters
• Holiday detection and schedule shifting
• Multiple export formats (Google Calendar, ICS, HTML, Sharing Keys)
• Side-by-side schedule comparison
• Real UC Berkeley CS10 course structure

Deploying Updates

To deploy updates to GitHub Pages:

cd my-app
npm run deploy

This will build the app and publish it to the gh-pages branch.

Note: The live demo works completely standalone. The main app requires backend setup for full functionality (Google Calendar integration, dynamic schedule generation).

Usage

Creating a New Schedule

1. Navigate to the landing page
2. Enter course information:
   • Class Code (e.g., CS10)
   • Semester (e.g., Spring)
   • Year (e.g., 2023)
3. Click "Confirm" to proceed to upload page
4. Upload relevant files:
   • Previous semester's schedule (CSV/HTML)
   • Course website URL
   • Additional calendar files (ICS)
5. Review and edit generated schedule
6. Export to desired format:
   • Google Calendar
   • ICS file
   • HTML table

Accessing a Shared Schedule

1. Obtain shared key from course coordinator
2. Enter key in "Get Existing Schedule" section
3. Click "Get Calendar From Key"
4. View, edit, and export shared calendar

Features in Detail

Intelligent Schedule Generation

• Automatically detects patterns from previous semesters
• Adjusts dates based on academic calendar
• Identifies and skips holidays
• Maintains consistent weekly structure

Flexible Export Options

• Google Calendar: Direct integration with personal calendars
• ICS Format: Compatible with Outlook, Apple Calendar, and others
• HTML Tables: Embed in course websites
• CSV Files: For further data processing

Collaboration Tools

• Generate unique sharing keys for each calendar configuration
• Share with entire course staff team
• Synchronized updates across all viewers

Customization

• Edit individual events in-browser
• Adjust recurring patterns
• Add custom notes and descriptions
• Modify location and time information

Technology Stack Summary

Frontend

• React 18.2.0
• Material-UI 5.14.4
• React Router 6.15.0
• Bootstrap 5.3.1
• Axios

Backend

• Flask 2.2.2
• Python 3.8+
• Pandas
• Google Calendar API
• OAuth 2.0

Development Tools

• Create React App
• React Scripts 5.0.1
• Webpack (via CRA)
• Babel (via CRA)

Browser Support

CourseCraft.ai supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Future Enhancements

• AI-powered conflict detection
• Multi-semester planning
• Student-facing calendar views
• Mobile application
• Integration with Berkeley's course management systems
• Automated announcement scheduling
• Office hours optimization

Project Documentation

This repository includes comprehensive documentation of the CourseCraft.ai project:

• Demo Video: Watch a complete walkthrough of CourseCraft.ai's features, showcasing the calendar generation process, user interface, and key functionality in action.
• presentation.pdf: Project presentation slides showcasing the problem statement, solution approach, user interface design, technical implementation, and demo of key features.
• report.pdf: Detailed project report documenting the development process, technical architecture, user research findings, design iterations, and evaluation results.

These resources provide additional context about the motivation, design decisions, and impact of CourseCraft.ai for the UC Berkeley teaching community.

Contributing

This project was developed as part of CS160 at UC Berkeley. For questions or contributions, please contact the development team.

License

This project is intended for educational use at UC Berkeley.

Acknowledgments

Developed for the UC Berkeley Computer Science and Data Science teaching community. Special thanks to all TAs and instructors who provided feedback on the pain points of course schedule management.

---

Built with dedication by students who understand the value of time spent building community over administrative tasks.