Canvas Dash Pro

A complete overhaul of the most popular learning platform's dashboard. This Chrome extension makes catching up with school much easier with elegant design, smartly placed info, and AI integration.

Comment 1

Inspiration

With Canvas' open-source APIs, we found the potential to improve the Canvas dashboard to evolve the learning experience with better visual design, layout, and smart analysis using AI.

Canvas Dash Pro overhauls the Canvas home to make it more like a true dashboard, instead of just an area you go to click on your classes. Information is much more glance-able, and important announcements and due dates are much easier to notice and read.

What it does

  • Gone are the days of the cluttered 'Todo' list, better visualization/layout of data, making everything much more readable.
  • Easy access to upcoming assignments and recent grades, categorized per class.
  • AI Analysis of difficulty/time required on assignments, quizzes, and tests.
  • AI Analysis of PDF file assignment instructions.
  • Most recent announcements summarized and displayed in a much easier to read manner.
  • Saving the best for last, a warm personal greeting on startup!

How we built it

We first set up a bare bones "Hello World" Chrome extension project (our very first). We then used Vite, React, and Typescript on our front-end to create out elegant UI. We also used Python and Flask on our back-end, which connects to Cloudflare's generative AI endpoints to process all of our AI needs.

We decided to use the llama 3-8b-instruct model available on Cloudflare as our LLM to computer assignment time estimations, difficulty, and summarize documents/announcements.

Challenges we ran into

Making the AI read and analyze PDF files on Canvas for assignments that only have a downloadable PDF file containing instructions.

Setting up a Chrome Extension for the first ever time, which thankfully proved to be much simpler than we thought it would be.

Integrating the front-end with the back-end, and coming across a few of the issues that didn't appear while both were tested in isolation (e.x. CORS issues, messy data from Canvas)

Accomplishments that we're proud of

Everything from how the front-end looks to how the back-end can successfully talk to the Cloudflare APIs are all things we're super proud of.

We genuinely believe we made a product that students would actually want to use, as it provides such an improvement over the default Canvas dashboard.

What we learned

How to use LLM APIs in applications and its limitations. How to write APIs to connect front-end to back-end server.

What's next for Canvas Dash Pro

Make more UI, train the LLM to be more precise and accurate on its approximations, and add more personal customization for Canvas to make the learning experience more fun.

Share this project:

Updates