Preecode

Practice. Code. Improve. Without leaving VS Code.

Comment

Inspiration

Coding practice is important, but most developers lose focus by constantly switching between their IDE and browser-based platforms. We wanted to remove that friction and make coding practice part of the developer's existing workflow.

That led us to build Preecode — an AI-powered coding practice platform that brings problem generation, hints, code review, debugging assistance, and progress tracking directly into VS Code.

What it does

Preecode helps developers practice coding without leaving their development environment.

Users can generate AI-powered coding problems based on their preferred language and difficulty, receive contextual hints when stuck, chat with an AI assistant, review their code, and track their coding activity and progress.

The VS Code extension automatically tracks practice sessions and synchronizes progress with the web dashboard, where users can view statistics, streaks, submissions, language distribution, and difficulty breakdowns.

How we built it

Preecode consists of three main components: a VS Code extension, a web dashboard, and a backend API.

The VS Code extension is built with TypeScript and the VS Code Extension API. The web application uses Vanilla JavaScript, Tailwind CSS, and Monaco Editor. The backend is built with Node.js and Express.js, with MongoDB for data persistence.

AI functionality is integrated through an AI API to power question generation, contextual chat, hints, and code reviews. Authentication uses JWT and OAuth, while secure storage is used for sensitive session data.

We designed the system so that activity from the VS Code extension can be synchronized with the cloud and reflected on the user's dashboard.

Challenges we ran into

One of our biggest challenges was connecting the VS Code extension, web application, backend, database, and AI services into one seamless experience.

Authentication and secure token handling across the browser and VS Code extension required careful implementation. We also had to handle AI API rate limits and reliability while keeping the experience responsive.

Another challenge was making AI assistance useful without simply giving users the solution. Our hint and review systems were designed to encourage developers to understand the problem and improve their own code.

Accomplishments that we're proud of

We are proud of building a complete end-to-end developer platform rather than just an AI chatbot.

Preecode combines AI-powered practice, contextual assistance, code review, automatic activity tracking, progress analytics, authentication, cloud synchronization, and a VS Code extension into one product.

Most importantly, developers can practice while staying inside the environment where they already write and run their code.

What we learned

We learned that building an AI product involves much more than connecting an LLM to an application.

We gained practical experience with API architecture, authentication, database design, VS Code extension development, AI integration, rate limiting, state management, cloud deployment, and designing AI interactions around an actual user workflow.

We also learned the importance of reducing friction in a product. Even a powerful feature becomes less useful if users have to constantly leave their workflow to use it.

What's next for Preecode

We want to make Preecode a complete AI-powered coding development environment.

Our roadmap includes a Jupyter Notebook mode for data science practice, response caching to reduce AI costs, improved token refresh and session management, and team/organization accounts for bootcamps and companies.

Our long-term goal is to help developers build consistent coding habits and continuously improve their problem-solving skills without breaking their development workflow.

Built With

Share this project:

Updates