🌟 algoace (https://algoacee.vercel.app)

AI‑powered algorithm helper — fast, focused, and built with meaningful tech to serve your coding journey.

🛠️ Tech Stack & Architecture

Layer	Technologies	Why it matters
Front‑end	Next.js (React + SSR/SSG), Tailwind CSS, Chrome Extension framework	Blazing-fast UI with server-rendered reliability and beautiful, responsive design.
AI Backend	Node.js (Express), OpenAI API vX.x, secure token handling	Streams prompts securely, returning clean analysis and code—lightweight and scalable.
Hosting / Platform	Vercel + Serverless Functions, Chrome Web Store	Auto-deploys with every commit; fast global CDN ensures instant load time.
Utilities	ESLint + Prettier, Husky pre-commit hooks	Enforces code quality, consistency, and ensures clean commits.
CI / CD	GitHub Actions pipeline with linting + testing + zero-downtime deployment	Guarantees every push is ship-ready, without interrupting live users.
Monitoring	Sentry (errors) + Vercel logs	Spot and solve client/backend issues in real time—before your users notice.

---

🚀 Core Workflow (from code to extension)

1. React UI (Next.js) wraps everything—hotkey, overlay, modal—so it feels native in your coding flow.
2. Chrome Extension scaffolding injects a lightweight script into target coding platforms.
3. User triggers (e.g. Alt+Q) send the problem text via the content script to the front-end UI.
4. Frontend invokes a serverless endpoint, proxied via API route, passing the prompt.
5. Node.js backend formats prompt, communicates with OpenAI, parses response JSON back to front end.
6. UI displays the step-by-step breakdown and clean code snippet, with copy-to-clipboard.

---

🔧 Developer Setup

1. git clone https://github.com/aayushmishraaa/algoace.git

2. cd algoace && npm install

3. Copy .env.example → .env and add:

   OPENAI_API_KEY=your_key
   NEXT_PUBLIC_EXTENSION_ID=your_ext_id
   

4. npm run dev — runs both Next.js (3000) and watcher for extension build.

5. Load unpacked extension in Chrome (dist/extension) and navigate to localhost:3000.

6. Start pressing Alt+Q on any problem page and watch AI magic unfold.

---

✅ Developer Experience

• Type‑safe code across UI and server logic—ideal for debugging confidence.

• Pre‑commit formatting + linting ensure consistent style—no “works on my machine” weirdness.

• Modular directory layout:

  • /src/pages — front-end + API routes
  • /src/extension — Chrome scripts + manifest + build pipeline
  • /src/components — UI primitives
  • /src/lib — AI prompt logic, helper utils, clipboard functions

• Extensible prompt builder—easily add features like system‑design prompts, multilingual prompts, or batch evaluation.

---

🔭 Future Enhancements

• Local caching of solved problems for quick retrieval.
• User settings panel to customize prompt tone, model version, and snippet structure.
• Analytics/telemetry (opt‑in) to learn how users interact and improve experience.
• System‑design & database prompt modules, in addition to algorithm breakdowns.

---

❤️ Why this matters

Every part of the architecture is designed to reduce friction: no more pop-ups, no waits, no scaling bottlenecks—just prompt → solution. It leverages modern, well-supported tools while remaining nimble, secure, and focused on delivering real value to developers.

---

🧪 Contributing

1. Fork & clone
2. Create a feature branch: git checkout -b feature/your-cool-idea
3. npm test or npm run lint && npm run format
4. Open a PR, discuss, 🚀 deploy!

---