A project to analyze and visualize time spent on different topics using data from Google Calendar.
Ever since starting my major in Computer Science and Software Engineering, I've became an avid user of Google Calendar. Every single day on my calendar is filled with color-coded events and tasks. At the end of every week, I review my calendar to reflect on how productive (or unproductive) my week was to track how much I've have learned.
After many months, I wondered how I can best digest all the events on my calendar to see how much time I spend on learning specific topics. This inspired me to propose this project as part of Independent Studies at the university I attend.
Yes, I am sure there are existing resources that summarize Google Calendar events, but I wanted to build my solution and saw this as an opportunity to build my first, solo hands-on full-stack application.
| Technology | Description |
|---|---|
| React | Frontend library for creating an interactive UI. |
| Vite | Build tool with Hot Module Replacement and optimized builds for performance in production. |
| TypeScript | JavaScript with, among other features, static typing to avoid bugs during the development process. |
| Material UI | Provides prebuilt React UI components like buttons, modals and lists. |
| FullCalendar | React-compatible library that provides an interactive calendar to display and manage events. |
| Recharts | React-compatible library that provides responsive and customizable charts. |
| Java | Backend programming language used to write all the business logic. |
| Maven | Project management tool for building the project and installing dependencies. |
| Spring Boot | Java framework used to build the backend REST API. Handles HTTP requests, security, and communication with the database. |
| Supabase/PostgreSQL | Backend-as-a-Service to simplify the process of setting up a PostgreSQL database. |
- Create responsive web pages using the React library and potentially Tailwind or Material UI.
- Gain familiarity with popular JavaScript libraries like Recharts and FullCalendar and their APIs.
- Create a well-organized project structure.
- Connect the frontend UI to a backend database.
- Learn synchronization techniques like pushing and pulling.
- Basic understanding of protecting sensitive information across the internet.
- Learn how to deploy a website onto the internet.
Video Demo: https://www.youtube.com/watch?v=v2CAHiBrH5s
Visit the deployed web application here: https://calendar-analytics.netlify.app/