Crafting An AI-Powered Code Critic

#rebase01 #gdsciiitkalyani #loftlabs #ai

Project Name- QUILL
Live App Link

Team Details

Ankita Chakraborty - @alienimnida
Shemanti Pal - @ShemantiPal

Description of Project

Developer's favourite Code Reviewer application that releases you from the boundaries of opening multiple tabs to debug and just switch to a single application to analyse not just errors but also your code quality. Apart from Devs, the application is build for escalating interview rounds at organisations rather than spending hours to review candidate's code cleanliness & robustness.

Submission Track:

-AI/ML
-DEVPOD

Overview of My Submission

In the vibrant pulse of a hackathon, we both embarked on a mission to revolutionize the world of code review. Fed up with tedious code reviews & debugging,we dreamed up Quill to make reviews a breeze—efficient, effective, and even enjoyable. From designing the user interface to implementing complex backend algorithms, every aspect of Quill was meticulously crafted keeping the end user in mind.
Instead of opening a bundle of tabs together simply click QUILL and get your Errors, Bugs , Suggestions , the Correct Code & Marks based on your code quality.

Tech Stack

DevPod: This is our coding playground in the cloud! No need to install anything, we can just jump in and code together. Super handy for working on projects with friends.

Vite: This is our super fast build tool. Speed up React setup with Vite for lightning-fast development.It lets us see our code changes almost instantly in the browser, which makes development way faster.
ReactJs: The library we used to build the user interface (UI) of our application.
TypeScript: JavaScript on steroids, spotting errors before we hit run—like having a code spelling bee, but way cooler!
Express: Tool we used to build the backend of our application.
Node.js: This is the JavaScript runtime environment that makes Express possible, the foundation that lets Express do its thing.
Tailwind CSS: Our styling toolkit, kind of like having a pre-made wardrobe for our web pages.
React router: Navigation between different parts of our application, made easy, like a super cool map for our app that lets users jump around to different sections easily.
Clerk: The tool that handles user authentication for our app. The security guard that checks IDs to make sure only the right people can get in.

Vercel: This is where we deployed our application by hosting the client and server separately.

Challenges We Faced

Well, this was the first time us choosing to integrate AI in a project. Just as a beginner would do, we landed up in openAI's site looking to get free credits to start with. Funny part being we kept generating secret tokens & obviously landed up getting errors as openAI stopped giving free credits actually. That was a time we regret choosing this project. Our mentor informed us about Anthropic's ClaudeAI API and trust me that was a life-saver as we received our free credits and yup, here we are.
Secondly , we did struggle choosing the perfect UI for our application but Aceternity UI,Three.js paved a smooth path.
The client & server were working fine locally but we faced some CORS error while deploying , so basically we went to server & configured CORS origin so that it can accept request from any domain.
We faced minor issues in coming out with the perfect prompt by doing reverse prompt engineering.