OopsFixer 🚀

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!

🔥 Features

✅ 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.

🌎 Live Demo

🔗 Frontend (Netlify): OopsFixer Live

🛠️ Tech Stack

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

🚀 Installation & Setup

1️⃣ Clone the Repository

 git clone https://github.com/iamafridi/oopsfixer.git
 cd oopsfixer

2️⃣ Set Up Backend

 cd backend
 npm install  # Install dependencies

Create a .env file in the backend/ directory and add:

GEMINI_API_KEY=your_GEMINI_api_key

Run the backend locally:

npm run dev

3️⃣ Set Up Frontend

 cd ../frontend
 npm install  # Install dependencies

Run the frontend locally:
```sh
npm run dev

🎯 Usage Guide

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! 🎉

📞 Contact

🔗 Portfolio: iamafridi-portfolio

⭐ Show Your Support!

If you found OopsFixer helpful, please give it a ⭐ on GitHub!

Happy Debugging! 🚀