AI-powered coding practice and skill-building platform directly inside VS Code.
🚀 Now powered by OpenRouter API for enhanced AI capabilities
Preecode helps developers practice consistently, review code with AI assistance, and improve problem-solving skills without leaving their editor. It combines coding workflows, guidance, and progress-oriented tooling in one extension.
Website: https://preecode.vercel.app
Preecode is built to help developers learn and practice coding while staying inside their development environment.
Instead of switching between platforms, Preecode integrates practice, debugging assistance, code explanations, and AI-powered review directly into VS Code.
The project consists of three main parts:
• VS Code Extension • Backend API Server • Frontend Website
These components work together to provide authentication, AI services, progress tracking, and the user interface.
• AI-assisted coding practice directly in VS Code • Quick debugging and code explanation tools • AI code review assistance • Integrated login system connected with the Preecode platform • Control Center inside VS Code for focused workflow • Backend integration for user data and progress • Configurable backend and frontend URLs for development and production
Preecode
│
├ preecode-backend → Node.js backend API
├ preecode-frontend → Web platform frontend
├ preecode-extension → VS Code extension
└ .vscode → Workspace configuration
- Open VS Code
- Open Extensions panel
- Search for Preecode
- Click Install
If installing manually:
code --install-extension preecode-0.0.1.vsix
- Open VS Code
- Open Command Palette
Ctrl + Shift + P
- Run:
Preecode: Open Control Center
- Login using:
Preecode: Login
- Start practicing, debugging, and reviewing code.
• Preecode: Open Control Center • Preecode: Login • Preecode: Logout • Preecode: Practice • Preecode: Debug Selection • Preecode: Explain Selection • Preecode: Review Code
To run the project locally you need to start backend, frontend, and extension.
git clone https://github.com/Prashantpd7/Preecode.git
cd Preecode
Backend
cd preecode-backend
npm install
Frontend
cd ../preecode-frontend
npm install
Extension
cd ../preecode-extension
npm install
Inside backend folder:
cd preecode-backend
Create environment file:
cp .env.example .env
Fill required variables.
Example:
PORT=5001
MONGO_URI=mongodb://localhost:27017/preecode
JWT_SECRET=random_secret
FRONTEND_URL=http://localhost:5173
BACKEND_URL=http://localhost:5001
NODE_ENV=development
GOOGLE_CLIENT_ID=test
GOOGLE_CLIENT_SECRET=test
Important rules:
• Never commit .env
• Always use environment variables
• Never hardcode API keys or URLs
cd preecode-backend
npm run dev
Backend runs on:
http://localhost:5001
cd preecode-frontend
npm run dev
Frontend runs on:
http://localhost:5173
Open the extension folder in VS Code.
Press F5 to launch Extension Development Host.
This will open a new VS Code window where the extension can be tested.
Contributions are welcome.
Please follow these steps.
Never work directly on main.
git checkout -b feature/your-feature-name
Work inside:
preecode-backend
preecode-frontend
preecode-extension
Important rules:
• Do not hardcode API keys
• Do not commit .env
• Always use environment variables
• Keep changes small and focused
Before pushing ensure:
• Backend works • Frontend loads correctly • Extension commands work • No console errors appear
git add .
git commit -m "Add feature: description"
git push origin feature/your-feature-name
Create a PR to the main branch.
Include:
• Clear title • Description of feature • Testing notes
• Never commit .env
• Never push secrets or API keys
• Never hardcode URLs
• Always use environment variables
• Always create a branch before coding
• Always test locally before pushing
MIT License