Like many college students, when teachers provide us with syllabuses at the beginning of the semester, it's very tedious to go through the document looking for important dates to add to our calendar. So, we thought a tool that would streamline the process of adding course events (ie midterms, final exams, assignment due dates) would save time for many people.

What it does

DueLink is a web app that takes important dates from a class syllabus (in the form of a csv) and creates them as events in Google Calendar. It uses the Google Authentication API to get permission from the user for access to the calendar, and it uses the Google Calendar API for read and write access to the user's Google Calendar.

How we built it

We built DueLink using HTML, CSS, JS, jQuery, and python flask. We started our development process by setting up jQuery, JS, HTML, and CSS. Next, we read up on Google Cloud's documentation on authentication as well as Google Calendar API documentation in order to learn how to implement them into our web application. We used the Google Console to find our API keys, which allows the user to seamlessly click through the Google sign-in page and the page prompting the user to accept the requests for access to Google Calendar. We then had the Google Cloud APIs up and running on the website. We looked into how to create calendar events on the documentation of Google Calendar API. For the next steps, we split up the work. Anjali focused on backend aspects like running the html file through Python Flask. Akhilesh worked on parsing the CSV file. Charlie worked on the visual aesthetic of the website. Finally, we diligently debugged and made the rest of the index.html file able to parse CSVs and create calendar events.

Challenges we ran into

None of us had ever had experience in full-stack development like this before. None of us had ever programmed in javascript or python or configured Flask or used Google Cloud APIs. So naturally, we ran into many many challenges. We encountered one challenge trying to create an event on Google Calendar using JS. There were also many minor things we struggled with solving, like CSS styling and how to manage the uploaded file. However, the biggest challenge that we encountered was that we couldn’t figure out how to access the content of the uploaded .csv file. We had been able to access the metadata of the uploaded .csv file, but not the data in the file. After carefully reading many stack overflow posts, having several mentor discussions, and debugging with trial and error, we found a FileReader object in javascript. This was detailed

Accomplishments that we're proud of

Overall, we’re proud of successfully creating a tool that was just an idea for something to make life a little easier for students. We’re proud that we successfully used Google Cloud’s Authentication and Calendar APIs for a useful project.

What we learned

Two of our three members had never really worked with HTML before, so this was a first experience using it for web-app development. Also, this was a first for us in terms of using another API, which in this case is the Google Calendar API and authentication software. Overall this project had a lot of “firsts” for us: first Hackathon for all of us, first web-app, and first time using web development tools and understanding the organization of code.

What's next for DueLink

If we were to expand on our project, we would add functionality to upload PDFs and Word Documents instead of only accepting Comma Separated Value file formats. These file types are harder to read, but should be doable. Also, we would integrate natural language processing, connecting it to calendar events. For example, with NLP, a user could upload a PDF that contains text that says, “Programming midterm on Wednesday November 13th at 6 pm” and convert it to a calendar event. This is an important add on because dates in documents are written in natural language and aren’t consistently in the same order.

Share this project: