Chrona

Your cosmic control center for college, an all-in-one dashboard that syncs your classes, assignments, grades, and calendars into one sleek, space-inspired orbit.

Comment

Inspiration

As college students, we’re constantly juggling Canvas announcements, scattered assignments, email threads, and too many tabs. We wanted a centralized, playful but powerful dashboard where you can see your entire academic universe, without the chaos.

Chrona is our answer to that: a space-inspired all-in-one academic dashboard that connects your syllabus, Google Calendar, Canvas data, and more, all through a sleek, interactive interface. You’re the pilot, Chrona is your spaceship.

What it does

Chrona is a smart academic dashboard that simplifies a student's life.

  • Syllabus Parsing: Automatically extracts key dates from your syllabi and adds them directly to your Google Calendar.
  • Canvas Integration: Syncs assignments, grades, and class information in real-time.
  • Unified Overview: Displays a clean daily and weekly view of your classes, tasks, and grades.
  • Dynamic Layouts: Lets you arrange widgets in customizable Orbital, Grid, Spiral, or Masonry layouts.
  • AI Assistant: Features a smart chatbot to answer questions like, “What do I have due today?” or “When is my next exam?” 🧑‍🚀

How we built it

We started with a Next.js foundation and iterated rapidly. We leveraged the Gemini API to parse natural language from syllabi and used the Google Calendar API to create events automatically. To sync with Canvas, we implemented OAuth to fetch real user data via the Canvas API.

The star of our front end is a custom layout engine built with Framer Motion, Zustand, and Tailwind CSS, which allows widgets to float, orbit, and align in beautiful, dynamic formations.

Challenges we ran into

  • CORS Issues: We initially started with a standard React.js setup but immediately ran into persistent CORS errors when making API calls. Migrating the project to Next.js resolved these issues by handling the requests on the server side.
  • Canvas Authentication: Our goal to implement a seamless "Login with Canvas" feature was blocked by the lengthy verification process required to become a trusted developer application, which was not feasible within the hackathon timeline.

Accomplishments that we're proud of

  • Successfully integrated the Canvas REST API into modular, interactive widgets.
  • Engineered a two-way sync with the Google Calendar API.
  • Leveraged Google Gemini to intelligently parse unstructured syllabus data and schedule critical events like midterms and finals.
  • Designed and built a beautiful, distraction-free user interface that puts the student in control.

What we learned

This project was a deep dive into customer obsession. Every feature was designed by asking one question: "What would make a student's life genuinely easier?" We learned to prioritize user-centric features and to pivot quickly when technical roadblocks appeared, always keeping the end-user's experience at the forefront.

What's next for Chrona

  • Streamlined Onboarding: Become a trusted Canvas application to enable "Sign-in with Canvas," making the login process seamless for users.
  • Personalization: Implement a database to save user settings, such as widget layouts and preferences.
  • Production-Ready Backend: Refactor and scale our backend APIs to handle more users and integrations reliably.
  • Scalable Frontend: Further modularize our React components to improve reusability and maintainability for future development.

Built With

  • canvas-lms-api
  • framer-motion
  • gemini-api-(google-generative-language-api)
  • google-calendar-api
  • google-oauth-2.0
  • next.js
  • shadcn-ui
  • tailwind-css
  • zustand
Share this project:

Updates