Course Schedule App (course-schedule)

A concise and efficient course schedule management application designed to help users easily view and manage their weekly class arrangements. This app is integrated with Feishu (Lark), enabling seamless data synchronization and workflow connection with Feishu ecosystem.

Key Features

• Intuitively displays weekly course arrangements with support for distinguishing between single and double weeks

• Automatically highlights the current week and today's courses

• Real-time marking of ongoing courses and upcoming courses

• Course details preview on hover

• Support for filtering courses by week number

• Visually distinct course colors for better readability

• Feishu Integration: Sync course data with Feishu Calendar (automatically add courses to Feishu Calendar), and receive course reminders via Feishu Messages

• Feishu OAuth Login: Securely log in using Feishu account to access personalized course data

• Feishu Sheet Sync: Import course information from Feishu Sheet with one click, eliminating manual input

Tech Stack

• Frontend: JavaScript, HTML, CSS

• Development Tools:

  • Wrangler (Cloudflare Workers Development Tool)

  • Vitest (Unit Testing Framework)

• Dependencies:

  • axios (HTTP Client)

  • oauth4webapi (OAuth Authentication, for Feishu OAuth flow)

  • concurrently (Run multiple commands in parallel)

  • @larksuiteoapi/node-sdk: Official Feishu API SDK for integrating Feishu Calendar, Messages, and Sheet services

Installation & Usage

Prerequisites

• Node.js (v14+)

• npm or yarn

• A Feishu Developer Account (to set up API credentials for integration)

• Feishu App (created in Feishu Developer Platform, with Calendar, Message, and Sheet API permissions enabled)

Installation Steps

1. Clone the repository

git clone https://github.com/Krual-T/course-schedule.git

cd course-schedule

1. Install dependencies

npm install

\# Or

yarn install

1. Configure Feishu Integration

FEISHU\_APP\_ID=your\_feishu\_app\_id

FEISHU\_APP\_SECRET=your\_feishu\_app\_secret

FEISHU\_REDIRECT\_URI=your\_redirect\_uri (e.g., http://localhost:3000/feishu/callback)

• Go to Feishu Developer Platform and create a new app

• Enable "Calendar API", "Message API", and "Sheet API" in the app's "API Permissions" section

• Get your App ID and App Secret from the app's "Credentials & Basic Info" page

• Create a .env file in the project root directory and add the following:

1. Local Development

npm run dev

\# Or

yarn dev

\# Visit http://localhost:3000 in your browser, then log in with Feishu account to use the app

1. Deployment

npm run deploy

\# Or

yarn deploy

\# The app will be deployed to Cloudflare Workers (configure your Cloudflare account in wrangler.jsonc first)

1. Run Tests

npm test

\# Or

yarn test

Feature Details

• Course Display: Courses are arranged by Monday to Friday and class periods, clearly showing course name, location, teacher, and other details

• Time Highlighting: Automatically identifies the current time, highlights today's date column and ongoing courses

• Week Filtering: Filter courses by week number to automatically hide courses that do not match the current week

• Course Details: Hover over a course to view complete course information (including credit hours, course type, etc.)

• Visual Differentiation: Different courses are marked with different colors to improve readability

• Feishu Calendar Sync: After logging in with Feishu, click the "Sync to Feishu Calendar" button to add all courses to your Feishu Calendar. The sync supports automatic updates when courses are modified

• Feishu Message Reminders: Set up course reminders (e.g., 10 minutes before class starts) to receive notifications via Feishu Messages

• Feishu Sheet Import: Import course data from a Feishu Sheet (use the pre-defined template provided in the app) to quickly create your course schedule without manual entry

Project Structure

• public/: Static resource files

  • js/: JavaScript scripts

    • CalendarSync.js: Logic for syncing courses with Feishu Calendar

    • CourseSchedule.js: Core logic for course schedule display and management

    • FeishuAuth.js: Feishu OAuth login and API authentication logic

    • FeishuSheetImport.js: Logic for importing course data from Feishu Sheet

  • app.js: Main application entry logic

• src/: Source code (including Cloudflare Workers handlers and Feishu API service functions)

• test/: Unit test files (test cases for course logic and Feishu API integration)

• package.json: Project configuration and dependencies

• wrangler.jsonc: Cloudflare Workers deployment configuration

• .env: Environment variables (Feishu API credentials, etc.)

Development Notes

• This project uses Cloudflare Workers as the deployment target. Use the Wrangler tool for local development and deployment (configure your Cloudflare account in wrangler.jsonc first)

• For Feishu integration, ensure your Feishu app has the correct API permissions. If you encounter authentication errors, check the "Permission Management" and "OAuth Settings" in the Feishu Developer Platform

• The Vitest framework is used for unit testing, covering core functions such as course filtering, time highlighting, and Feishu API data parsing

• When modifying the Feishu API logic, refer to the official Feishu API documentation for the latest interface specifications

License

MIT