Codecraft AI 🚀

AI-Powered Code Editor with Intelligent Assistance

(Add a banner image if available)

🔹 Overview

Codecraft AI is a lightweight, AI-assisted code editor designed to boost developer productivity with intelligent code suggestions, auto-completion, and quick fixes. Built with Next.js 15, Tailwind CSS, TypeScript, and ShadCN UI, it offers a seamless, intuitive coding experience.

🔹 Key Features:

• ✨ AI Assistance powered by Gemini AI (auto-completion, linting, documentation generation).
• 🔥 Modern UI with ShadCN UI for a sleek and responsive design.
• 🛡 Authentication with Clerk (Google OAuth, email login, 2FA).
• 🎨 Customizable Editor with syntax highlighting, themes, and word wrap.
• 🌐 Future Scope: Real-time collaboration with multi-user editing and live cursors.

🛠 Tech Stack

📸 Screenshots (Add actual screenshots here)

Code Editor	AI Assistance	Custom Themes

⚡ Features

🔹 1. Code Editor

✔ Syntax highlighting (multiple themes)
✔ Bracket matching & auto-indentation
✔ Line numbering & word wrap
✔ Collapsible file explorer

🤖 2. AI-Powered Code Assistance

✔ AI-driven auto-completion for function names & variables
✔ Quick fix suggestions for syntax errors
✔ AI-powered code documentation generation
✔ Code snippet suggestions

🔄 3. Future Scope: Real-Time Collaboration

✔ Multi-user live editing (via WebSockets)
✔ Live cursor tracking & in-editor comments
✔ Activity log & basic version control

🔐 4. Security & Authentication

✔ Clerk-based authentication (Google OAuth, email login, 2FA)
✔ Private & public workspaces
✔ Secure session management

🎨 5. User Experience & UI Enhancements

✔ Dark & light mode toggle
✔ Customizable font size & color themes
✔ Collapsible sidebar for maximum workspace

📦 Installation & Setup

1️⃣ Clone the Repository

git clone https://github.com/Vijaysingh1621/codecraft-ai.git
cd codecraft-ai

2️⃣ Install Dependencies

npm install

3️⃣ Configure Environment Variables

Create a .env.local file in the root directory and add the required API keys:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key

4️⃣ Run the Development Server

npm run dev

🚀 Open http://localhost:3000 to view it in your browser.

💡 Usage Guide

1️⃣ Sign In: Authenticate using Google OAuth or email.
2️⃣ Start Coding: Use the intelligent code editor with AI-powered assistance.
3️⃣ Get AI Suggestions: Click on AI recommendations for auto-completions & fixes.
4️⃣ Customize UI: Switch themes, adjust font size, and toggle dark/light mode.
5️⃣ Future (Real-Time Collaboration): Invite other users for multi-user editing.

🛠 Contributing

Contributions are welcome! Follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature-name)
3. Commit changes (git commit -m "Added new feature")
4. Push to the branch (git push origin feature-name)
5. Create a Pull Request

🎯 Roadmap

✅ MVP Features: AI-powered suggestions, syntax highlighting, authentication.
🔜 Next Steps: WebSockets for real-time multi-user editing.
📌 Future Enhancements: AI-based code refactoring, mobile-friendly UI, and more!

📄 License

This project is licensed under the MIT License – feel free to use and contribute!

📩 Contact & Support

📧 Email: your-email@example.com
🔗 LinkedIn: Your LinkedIn
🌍 GitHub: Your GitHub