Inspiration

A common experience among many developers working with software is the constant need to find online resources to inform their work. Whether it is watching a YouTube video about deploying a SpringBoot Application on GCP App Engine or sifting through Stack Overflow forums, information is truly publicly available to anyone that works with software.

While developing a software product, one of the most satisfying moments is the feeling of finding that one forum that helped you debug your code or provided you with the correct syntax.

**However, it is too easy to forget where and how the solution was found. Another few hours must be spent to find that same forum among the haystack of online resources.**

Codecrumbs aims to change that by allowing developers to track their search history alongside their commits in a visual manner so that code, as well as the developer's thought process, are never forgotten.

What it does

So what is Codecrumbs? Codecrumbs is a browser extension that tracks your search history as you progress through the development process. Tracking history is organized into projects and projects can be linked to GitHub repositories. When a solution is found, a search can be "starred" and it will be emphasized in the history view.

After a user creates an account, they have the option to start tracking their website search history and link these searches to specific software projects they are working on. Codecrumbs automates this process and provides users easy access to websites they have visited in the past and customize them through leaving notes/comments for themselves.

How we built it

Here is a quick run-down of the technologies that we used, separated into frontend and backend.

Frontend: React, Firebase Firestore & storage & authentication, HTML, JS, CSS, Sketch (for design) Backend: Java, GCP Cloud Functions & Google Cloud Storage & GCP Appengine, Firestore, Spring MVC

Frontend:

  • Framework: React
  • Firebase Authentication was used to handle secure sign up and login
  • The Chrome extension records history and sends it to our API for processing. It serves as the primary method of user interaction
  • The history website displays the history alongside any GitHub commits that were made during that timespan

Backend:

  • Framework: SpringBoot
  • Spring was used to host the APIs called by the extension in the frontend
  • A NoSQL database schema (for Firebase) was drawn out before implementation to ensure structured, hierarchical storage of user data
  • All APIs were deployed onto App Engine
  • GCP Cloud Storage and GCP Cloud NLP and GCP Document AI were used to extract keywords from websites that users visit

Challenges we ran into

  • Dealing with react build issues
  • Optimizing timely responses for database queries
  • Creating the NLP pipeline: engineering a pipeline for discreetly taking screenshots of websites, extracting the words from the image, and performing saliency analysis was particularly difficult yet rewarding
  • Learning the GitHub API

Accomplishments that we're proud of

  • Being able to incorporate a wide variety of major GCP tools
  • Becoming comfortable with building functional and well-styled React apps for Chrome extensions
  • Incorporating Machine Intelligence into our project

What we learned

  • How to host using App Engine and other GCP tools
  • Putting the needs of the user first, keeping the user in mind when designing

What's next for Codecrumbs

We would like to see Codecrumbs as a fully integrated tool with platforms such as GitHub and GitLab so that users can see their documentation history right alongside any code they commit to these major platforms. With this idea in hand and an abundance of need for such a tool, it would be a major selling point to such companies.

Built With

Share this project:

Updates