OopsFixer is an AI-powered debugging assistant designed to help developers analyze, detect, and fix code errors effortlessly. With its sleek interface and seamless integration with Gemini flash 2.0 's cutting-edge technology, OopsFixer makes debugging smarter and faster!
✅ AI-Powered Code Review – Get instant feedback on your code with AI-driven analysis.
✅ Syntax Highlighting – Readable, structured, and beautifully formatted code.
✅ Real-Time Debugging Insights – Identify issues and optimize your code instantly.
✅ Responsive UI – Fully optimized for all devices, ensuring a smooth experience.
✅ Dark & Light Mode – Enjoy coding in your preferred theme.
✅ Fast & Scalable Backend – Deployed on Vercel with seamless API integration.
🔗 Frontend (Netlify): OopsFixer Live
Frontend:
- ⚛ React – JavaScript library for building UI components
- 🎨 Tailwind CSS 4.0 – Utility-first CSS framework for styling
- 📝 react-simple-code-editor – Lightweight code editor component
- 🌈 PrismJS – Syntax highlighting for code blocks
- 📄 react-markdown – Renders Markdown content
- 🔍 rehype-highlight – Syntax highlighting for Markdown-rendered code
- 🔄 Axios – HTTP client for API requests
Backend:
- 🔄 CORS & Body-Parser
- 🟢 Node.js – JavaScript runtime for server-side logic
- ⚡ Express.js – Web framework for handling API requests
- 🔐 dotenv – Manages environment variables
- 🤖 Google Gemini AI – AI model used for generating code reviews
git clone https://github.com/iamafridi/oopsfixer.git
cd oopsfixer cd backend
npm install # Install dependenciesCreate a .env file in the backend/ directory and add:
GEMINI_API_KEY=your_GEMINI_api_keyRun the backend locally:
npm run dev cd ../frontend
npm install # Install dependenciesRun the frontend locally:
```sh
npm run dev
1️⃣ Enter your code in the editor.
2️⃣ Click "Review Code" to get AI-powered feedback.
3️⃣ Read the analysis and implement fixes.
4️⃣ Enjoy bug-free, optimized code! 🎉
🔗 Portfolio: iamafridi-portfolio
If you found OopsFixer helpful, please give it a ⭐ on GitHub!
Happy Debugging! 🚀