Oil on Canvas

Project Abstract

We'll build a browser extension that provides features for Canvas users, particularly students. Our main goal is to make Canvas easier to use for students by better organizing canvas assignments, providing a task manager, and generally improving Canvas UX for students. The part I focus more on is the Canvas OAUTH implementation, backend testing and database testing.

Specification

Technology Stack

flowchart RL
subgraph Front End
	A(JavaScript: React, Vite)
end

subgraph Back End
	B(Java: SpringBoot)
end

subgraph Database
	C[(MySQL)]
end

A <-->|REST API| B
B <--> C

Loading

Frontend Backend

Documentation: Backend implementation summary · Frontend API guide · Canvas Assistant flow · Canvas API guide

Database

Current status: MySQL integration is planned, but not implemented in the running backend yet (db/init.sql is currently a placeholder).

Planned tables:

• ooc_user | Unique IDs for each OOC user
• canvas_instance | Base URLs for different schools
• canvas_connection | Map OOC users to canvas accounts auth credentials
• course_cache | User enrolled courses (cached)
• assignment_cache | Assignment data (cached)
• assignment_additions | Generated suggestions and information for assignments
• todo_item | Upcoming and overdue assignments

Class Diagram

classDiagram
	direction TB
	class SessionController {
		+startSession(request: SessionRequest) SessionResponse
	}
	class SessionService {
		+startSession(request: SessionRequest) SessionResponse
	}
	class SessionRequest
	class SessionResponse
	SessionController --> SessionService
	SessionController ..> SessionRequest
	SessionController ..> SessionResponse

Loading

classDiagram
	direction TB
	class TaskController {
		+createTask(request: TaskRequest) TaskResponse
		+getTasksForWeek(week: String) List~TaskResponse~
	}
	class TaskService {
		+createTask(request: TaskRequest) TaskResponse
		+getTasksForWeek(week: String) List~TaskResponse~
	}
	class TaskRequest
	class TaskResponse

	TaskController --> TaskService
	TaskController ..> TaskRequest
	TaskController ..> TaskResponse

Loading

classDiagram
	direction TB
	class AnalyzeController {
		+analyze(request: AnalyzeRequest) AnalyzeResponse
	}
	class AnalyzeService {
		+analyze(request: AnalyzeRequest) AnalyzeResponse
	}
	class AnalyzeRequest
	class AnalyzeResponse

	AnalyzeController --> AnalyzeService
	AnalyzeController ..> AnalyzeRequest
	AnalyzeController ..> AnalyzeResponse

Loading

classDiagram
	direction TB
	class RecommendController {
		+recommend(request: RecommendRequest) RecommendResponse
	}
	class RecommendService {
		+recommend(request: RecommendRequest) RecommendResponse
	}
	class RecommendRequest
	class RecommendResponse

	RecommendController --> RecommendService
	RecommendController ..> RecommendRequest
	RecommendController ..> RecommendResponse

Loading

classDiagram
	direction TB
	class HealthController {
		+health() HealthResponse
	}
	class HealthResponse

	HealthController ..> HealthResponse

Loading

Flowchart

flowchart TB
	A[Student uses Chrome extension]
	B[Send request to backend API]
	C{Request type}
	D[Session endpoint]
	E[Task endpoint]
	F[Analyze endpoint]
	G[Recommend endpoint]
	H[Controller validates request]
	I[Service executes placeholder logic]
	J[(Database integration planned)]
	K[Build response DTO]
	L[Return JSON response to extension]
	M[Extension updates UI]

	A --> B --> C
	C --> D --> H
	C --> E --> H
	C --> F --> H
	C --> G --> H
	H --> I --> K --> L --> M
	I -. future .-> J

Loading

Behavior

• Session Management: Extension can call /api/sessions; current response is a placeholder DTO.
• Task Management: Extension can call /api/tasks (POST/GET); current responses are placeholder DTO(s).
• Content Analysis: Extension can call /api/analyze; current response is a placeholder DTO.
• Recommendations: Extension can call /api/recommend; current response is a placeholder DTO.
• Current implementation note: Business logic and persistence are planned; database integration is not implemented yet.

Sequence Diagram

sequenceDiagram
	participant E as Extension
	participant B as Backend API
	participant SC as SessionController
	participant SS as SessionService
	participant TC as TaskController
	participant TS as TaskService

	E->>B: POST /api/sessions
	B->>SC: startSession(request)
	SC->>SS: startSession(request)
	SS-->>SC: SessionResponse (placeholder)
	SC-->>B: ResponseEntity<SessionResponse>
	B-->>E: JSON response

	E->>B: POST /api/tasks
	B->>TC: createTask(request)
	TC->>TS: createTask(request)
	TS-->>TC: TaskResponse (placeholder)
	TC-->>B: ResponseEntity<TaskResponse>
	B-->>E: JSON response

	E->>B: GET /api/tasks?week=1
	B->>TC: getTasksForWeek(week)
	TC->>TS: getTasksForWeek(week)
	TS-->>TC: List<TaskResponse> (placeholder)
	TC-->>B: ResponseEntity<List<TaskResponse>>
	B-->>E: JSON response

	Note over SS,TS: Future: Service layer -> Repository -> MySQL

Loading

Standards & Conventions

Style Guide & Conventions