Quartz

Landing page. Here, developers can search through their past notes!
Developer notebook. Here, users can browse through past issues they've solved!
Quartz entry. Here, users can see their notes, an auto-generated summary, and the reference they used.
Editing Quartz entries. Developers have the option to edit their notes from this page.
Quartz VsCode Extension. Devs can add new Quartz entries with a streamlined UI entirely in VsCode!
Add an Issue. Programmers can also add new references for issues they've solved from their Quartz journal!
GitHub Auth. Users log in with their GitHub accounts.
Side bar.

Inspiration

When we first started HackIllinois, we were super excited to begin building. However, we soon realized that we'd forgotten the details of basically everything, like how to configure AWS or how to integrate MongoDB into our project. We scrolled through our old messages and browser history, but there was no chance of finding the guides we had followed before.

We realized that even though version control and note-taking apps exist, developers don't have an easy way to save what they've worked on and the resources they used.

Enter Quartz, a journal made for developers. Developers can add journal entries detailing how they solved the issues they've encountered. We designed Quartz to be simple, effective, and incredibly easy-to-use, generating entries directly from VSCode.

What it does

Quartz redefines code reusability. When a programmer encounters a difficult task, they can use the Quartz VSCode extension to log helpful references and add their notes. After they upload an entry, our AI agent parses the reference site and generates a detailed summary. Developers can search and browse through their past entries on the Quartz website, which is linked to their GitHub account. They can also edit their notes to provide additional context for future reference. Quartz makes it easy for programmers to re-implement what they already know, saving time, enhancing efficiency, and accelerating development.

How we built it

Quartz's main website is built on Next.JS, React, MongoDB Atlas, and Vercel. We chose to prioritize development speed, constantly iterating over different designs and finding what worked best. We used TailwindCSS to achieve Quartz's sleek look, and created a GitHub app to handle authentication.

Quartz's AI agent uses a RAG pipeline built on LangChain and Pinecone DB and hosted with AWS. When developers upload a reference link, we use beautiful-soup to scrape the web page and generate text embeddings that are fed into the RAG pipeline.

Challenges we ran into

Design: As computer engineering students without a design background, it was hard to make Quartz look good. Because it was our first time designing, we really focused on talking to other programmers to get an idea of what developers want and having a user-first mindset. We iterated over many designs and had to pivot multiple times, but we eventually landed on something we're proud of.

CORS/https and AWS: Between our HTTP localhost, our HTTPS Vercel deployment, and our Lightsail AWS Flask server, we ran into what seemed like never-ending CORSs errors. We'd dealt with these problems before, but without any references and only jumbled nginx/SSL config files to look at, we had no choice but to persevere (with the hope that making Quartz would prevent this from happening in the future).

RAG pipeline optimization: Because we wanted make Quartz super simple for the developer, a lot of the usual note-taking work was offloaded to our AI agent. This meant that we had to optimize every chance we had in order to save tokens, compute power, and generate the best results.

Accomplishments that we're proud of

We overcame our lack of design experience and successfully integrated several frameworks to make Quartz , but we're most proud of making a fully functional web-app that could be used today.

What we learned

We learned how to work as a team. Because we were a team of 2, we couldn't afford to work on the same project components. We had to communicate how we planned to link our individual sections and make sure we were always on the same page.

We also learned the importance of getting feedback and using it to drive production. Participating in the dev tools track at a hackathon has the unique advantage of being surrounded by other developers and potential users. We were able to see how big of a difference understanding user perspectives makes in influencing design decisions.

What's next for Quartz

We plan to expand Quartz by adding more flexibility for users. Currently, the notes section for a Quartz entry is plain text, but we hope to add more customizability by supporting features like markdown and code blocks.