diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..772f38e --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 RootDeveloperDS + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index c0d89d4..c0da1d0 100644 --- a/README.md +++ b/README.md @@ -1 +1,207 @@ -# Visar Dev KIT +
+ +# VisarDevKit + +### AI-Powered Developer Toolkit + +**7 intelligent code tools, one sleek interface โ€” supercharge your development workflow with Google Gemini.** + +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE) +[![Next.js](https://img.shields.io/badge/Next.js-15-black?logo=nextdotjs)](https://nextjs.org/) +[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)](https://www.typescriptlang.org/) +[![Tailwind CSS](https://img.shields.io/badge/TailwindCSS-3-38bdf8?logo=tailwindcss)](https://tailwindcss.com/) +[![Genkit](https://img.shields.io/badge/Genkit-1.13-orange)](https://firebase.google.com/docs/genkit) +[![Gemini](https://img.shields.io/badge/Gemini-2.0%20Flash-4285F4?logo=google)](https://ai.google.dev/) +[![Firebase](https://img.shields.io/badge/Firebase-App%20Hosting-FFCA28?logo=firebase)](https://firebase.google.com/docs/app-hosting) + +
+ +--- + +## โœจ Overview + +**VisarDevKit** is a futuristic, AI-powered web application built with Next.js and Google Gemini. It provides seven specialized tools that help developers write better code faster โ€” from adding comments and extracting dependencies, to comparing snippets and generating tests. All tools are powered by the Gemini 2.0 Flash model via the Genkit AI framework and accessible through a single, beautifully themed interface. + +--- + +## ๐Ÿš€ Features + +| # | Tool | Description | +|---|------|-------------| +| 1 | ๐Ÿค– **Comment Enhancer** | Automatically adds smart, concise inline comments to uncommented code to improve readability and maintainability. | +| 2 | ๐Ÿ”€ **Code Comparator** | Compares two code snippets side-by-side and produces an AI-generated summary of their functional and logical differences. | +| 3 | ๐Ÿ”„ **Style Converter** | Converts code between naming conventions (e.g., `snake_case` โ†’ `camelCase`) or formatting styles (compact โ†’ readable). | +| 4 | ๐Ÿ“„ **Pseudocode Generator** | Translates code logic into plain-language pseudocode โ€” ideal for tutorials, documentation, or onboarding. | +| 5 | ๐Ÿงช **Unit Test Generator** | Generates a 10-question multiple-choice quiz to test a developer's understanding of a given code snippet. | +| 6 | โœ๏ธ **Rename Suggestion** | Suggests meaningful, descriptive names for poorly named variables or functions, with an explanation for each suggestion. | +| 7 | ๐Ÿ“ฆ **Dependency Extractor** | Analyzes a code snippet and returns only the required import/require statements needed for it to run. | + +All tools also support **Copy to Clipboard** with a toast confirmation notification. + +--- + +## ๐Ÿ› ๏ธ Tech Stack + +| Layer | Technology | +|-------|------------| +| **Framework** | [Next.js 15](https://nextjs.org/) (App Router, Turbopack) | +| **Language** | TypeScript 5 | +| **Styling** | Tailwind CSS 3, `tailwindcss-animate` | +| **UI Components** | [shadcn/ui](https://ui.shadcn.com/) (Radix UI primitives) | +| **AI Runtime** | [Google Genkit](https://firebase.google.com/docs/genkit) + `@genkit-ai/googleai` | +| **AI Model** | Gemini 2.0 Flash (`googleai/gemini-2.0-flash`) | +| **Schema Validation** | [Zod](https://zod.dev/) | +| **Forms** | React Hook Form + `@hookform/resolvers` | +| **Charts** | Recharts | +| **Fonts** | Space Grotesk (UI), Source Code Pro (code) | +| **Deployment** | Firebase App Hosting | + +--- + +## ๐Ÿ“ Project Structure + +``` +VISAR-Dev-Kit/ +โ”œโ”€โ”€ docs/ +โ”‚ โ””โ”€โ”€ blueprint.md # Original feature & design specification +โ”œโ”€โ”€ src/ +โ”‚ โ”œโ”€โ”€ ai/ +โ”‚ โ”‚ โ”œโ”€โ”€ genkit.ts # Genkit + Gemini model configuration +โ”‚ โ”‚ โ”œโ”€โ”€ dev.ts # Genkit development entry point +โ”‚ โ”‚ โ””โ”€โ”€ flows/ # Server-side AI flow definitions (one per tool) +โ”‚ โ”‚ โ”œโ”€โ”€ enhance-code-comments.ts +โ”‚ โ”‚ โ”œโ”€โ”€ code-comparator.ts +โ”‚ โ”‚ โ”œโ”€โ”€ style-converter.ts +โ”‚ โ”‚ โ”œโ”€โ”€ pseudocode-generator.ts +โ”‚ โ”‚ โ”œโ”€โ”€ unit-test-generator.ts +โ”‚ โ”‚ โ”œโ”€โ”€ rename-suggestion.ts +โ”‚ โ”‚ โ””โ”€โ”€ dependency-extractor.ts +โ”‚ โ”œโ”€โ”€ app/ +โ”‚ โ”‚ โ”œโ”€โ”€ layout.tsx # Root layout (fonts, metadata, Toaster) +โ”‚ โ”‚ โ”œโ”€โ”€ page.tsx # Home page entry point +โ”‚ โ”‚ โ””โ”€โ”€ globals.css # Global styles & CSS variables +โ”‚ โ”œโ”€โ”€ components/ +โ”‚ โ”‚ โ”œโ”€โ”€ features/ # One React component per tool + PageContent +โ”‚ โ”‚ โ”œโ”€โ”€ common/ # Shared UI (FeatureCard, OutputCard, etc.) +โ”‚ โ”‚ โ””โ”€โ”€ ui/ # shadcn/ui component library +โ”‚ โ”œโ”€โ”€ hooks/ # Custom React hooks (e.g., use-toast) +โ”‚ โ””โ”€โ”€ lib/ +โ”‚ โ”œโ”€โ”€ gemini.ts # API key resolution utility +โ”‚ โ””โ”€โ”€ utils.ts # Tailwind class utilities +โ”œโ”€โ”€ apphosting.yaml # Firebase App Hosting configuration +โ”œโ”€โ”€ next.config.ts +โ”œโ”€โ”€ tailwind.config.ts +โ”œโ”€โ”€ tsconfig.json +โ””โ”€โ”€ package.json +``` + +--- + +## ๐Ÿ”‘ API Key Handling + +VisarDevKit uses a priority-based system to resolve the Gemini API key at runtime: + +1. **URL query parameter** โ€” `?apikey=YOUR_KEY` (highest priority, client-side) +2. **Settings dialog** โ€” Click the โš™๏ธ gear icon in the top-right corner to paste your key directly into the UI. It is stored only in memory and never persisted. +3. **Environment variable** โ€” `GEMINI_API_KEY` in your `.env` file (server-side fallback) + +If no valid key is found, the app displays an error: _"Gemini API key not found."_ + +--- + +## โš™๏ธ Getting Started + +### Prerequisites + +- Node.js โ‰ฅ 18 +- npm โ‰ฅ 9 +- A [Google Gemini API key](https://aistudio.google.com/app/apikey) + +### Installation + +```bash +# 1. Clone the repository +git clone https://github.com/RootDeveloperDS/VISAR-Dev-Kit.git +cd VISAR-Dev-Kit + +# 2. Install dependencies +npm install + +# 3. Set up environment variables +cp .env.example .env +# Then edit .env and add your Gemini API key: +# GEMINI_API_KEY=your_api_key_here + +# 4. Start the development server +npm run dev +``` + +Open [http://localhost:9002](http://localhost:9002) in your browser. + +> **Tip:** You can also pass your key directly in the URL: +> `http://localhost:9002?apikey=YOUR_GEMINI_KEY` + +--- + +## ๐Ÿ“œ Available Scripts + +| Command | Description | +|---------|-------------| +| `npm run dev` | Start the Next.js dev server with Turbopack on port **9002** | +| `npm run build` | Create a production build | +| `npm run start` | Start the production server | +| `npm run lint` | Run Next.js ESLint checks | +| `npm run typecheck` | Run TypeScript type checking without emitting files | +| `npm run genkit:dev` | Start the Genkit developer UI | +| `npm run genkit:watch` | Start the Genkit developer UI in watch mode | + +--- + +## ๐ŸŽจ Design System + +| Element | Value | +|---------|-------| +| **Background** | Very dark purple `#17051C` | +| **Primary** | Electric purple `#BE29EC` | +| **Accent** | Fuchsia `#F02CEB` | +| **Body / Headline font** | Space Grotesk | +| **Code font** | Source Code Pro | +| **Effects** | Subtle glowing borders and button animations | +| **Theme** | Dark mode only | + +--- + +## โ˜๏ธ Deployment + +The project is configured for **Firebase App Hosting** via `apphosting.yaml`. To deploy: + +```bash +# Install Firebase CLI (if not already installed) +npm install -g firebase-tools + +# Login and deploy +firebase login +firebase deploy +``` + +The `apphosting.yaml` limits the backend to **1 instance** by default. Adjust `maxInstances` to scale for higher traffic. + +--- + +## ๐Ÿค Contributing + +Contributions are welcome! Please open an issue or submit a pull request with your proposed changes. + +1. Fork the repo +2. Create a feature branch: `git checkout -b feature/my-feature` +3. Commit your changes: `git commit -m "feat: add my feature"` +4. Push to your branch: `git push origin feature/my-feature` +5. Open a pull request + +--- + +## ๐Ÿ“„ License + +This project is open source and licensed under the **[MIT License](./LICENSE)**. + +You are free to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of this software. See the [LICENSE](./LICENSE) file for full details. diff --git a/package.json b/package.json index 7c484bd..e6eec30 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "nextn", "version": "0.1.0", - "private": true, + "license": "MIT", "scripts": { "dev": "next dev --turbopack -p 9002", "genkit:dev": "genkit start -- tsx src/ai/dev.ts",