DevPod in Action

Shemanti — Sat, 20 Apr 2024 06:34:57 +0000

30 days back we started working on Quill-An AI Powered code critic Application for helping the developers and organisations in code analysis & debugging. Going through the Tracks of Rebase<01>, we found out about DevPod-an open-source development environment . Our entire development journey took place within DevPod that proved incredibly beneficial. Its lightning-fast performance ensured seamless application development, whether solo or in collaborative mode. DevPod facilitated feature discussions and streamlined our workflow, thanks to its intuitive UI and lightweight CLI. Remarkably, it operated smoothly even on outdated or lower-spec hardware.

One standout feature of DevPod was its ability to clone both private and public repositories, offering unparalleled convenience for working on confidential projects. With minimal setup required, we effortlessly integrated Docker, which was already installed on our systems. Opting for VS Code was a natural choice, its familiarity and compatibility perfectly complemented our workflow, eliminating the need for alternative environments. Everything was specified in a file called devcontainer.json, this is the key file with all the configuration.

Harnessing the power of the cloud, we rapidly initiated our project, leveraging DevPod's efficiency to kickstart development within minutes. We recognize improved performance, nearly zero setup and security to be primary advantages of remote development environments. Devpod comes with a Ready to use IDE of choice–preconfigured VS Code or JetBrains IDE with preloaded indices.

Running the application:

Crafting An AI-Powered Code Critic

Shemanti — Fri, 19 Apr 2024 14:33:45 +0000

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.

Public Code Repo

https://github.com/Shemantipal/quill

Demo Link

Recording of Application

DEV Community: Shemanti