Frontend + Langgraph implementation for readme generation

README.md

@@ -2,64 +2,113 @@
 <a href="https://dscvit.com">
 	<img width="400" src="https://user-images.githubusercontent.com/56252312/159312411-58410727-3933-4224-b43e-4e9b627838a3.png#gh-light-mode-only" alt="GDSC VIT"/>
 </a>
-	<h2 align="center"> < Insert Project Title Here > </h2>
-	<h4 align="center"> < Insert Project Description Here > <h4>
+	<h2 align="center">DevBoard   </h2>
+	<h4 align="center">A modern, feature-rich GitHub widget builder and portfolio dashboard. Create beautiful, interactive widgets for your GitHub profile, visualize stats, and showcase your work with premium design tools inspired by Figma, Notion, and Linear.<h4>
 </p>
 
 ---
 [![Join Us](https://img.shields.io/badge/Join%20Us-Developer%20Student%20Clubs-red)](https://dsc.community.dev/vellore-institute-of-technology/)
-[![Discord Chat](https://img.shields.io/discord/760928671698649098.svg)](https://discord.gg/498KVdSKWR)
-
+
 [![DOCS](https://img.shields.io/badge/Documentation-see%20docs-green?style=flat-square&logo=appveyor)](INSERT_LINK_FOR_DOCS_HERE) 
   [![UI ](https://img.shields.io/badge/User%20Interface-Link%20to%20UI-orange?style=flat-square&logo=appveyor)](INSERT_UI_LINK_HERE)
 
-
 ## Features
-- [ ]  < feature >
-- [ ]  < feature >
-- [ ]  < feature >
-- [ ]  < feature >
+- [x] Premium Canvas Sizes: Presets and custom dimensions for widgets
+- [x] Drag & Drop Elements: Text, images, containers, shapes, charts, progress bars, badges, buttons, QR codes
+- [x] GitHub Data Integration: Live stats, profile info, avatar, commits, and more
+- [x] Inline Editing: Double-click to edit text inline
+- [x] Layer Management: Organize, lock/unlock, toggle visibility
+- [x] Grid & Snap: Toggle grid, adjust size, snap-to-grid
+- [x] Theme Switching: Dark/light canvas themes
+- [x] SVG Export: Auto-generated, production-ready SVG code
+- [x] Save & Privacy: Save widgets, set privacy, add tags
+- [x] Undo/Redo: Robust history management
 
-<br>
 
+<br>
 ## Dependencies
- - < dependency >
- - < dependency >
-
+- Node.js (v18+ recommended)
+- npm or yarn
+- Docker (optional)
 
+## Dependencies
 ## Running
 
-
-< directions to install > 
+Clone the repository:
 ```bash
-< insert code >
+git clone https://github.com/NitinTheGreat/devboard-frontend.git
+cd devboard-frontend/devboard
 ```
 
-< directions to execute >
+Install dependencies:
+```bash
+npm install
+# or
+yarn install
+```
 
+Run the development server:
 ```bash
-< insert code >
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+Create a `.env.local` file in the `devboard` directory and set:
+```
+NEXT_PUBLIC_API_BASE_URL=<your-backend-api-url>
+```
+## Running
+
+A sample `Dockerfile` is provided in `devboard/` for easy containerization:
+```Dockerfile
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN yarn install --frozen-lockfile || npm install
+COPY . .
+RUN yarn build || npm run build
+
+FROM node:18-alpine AS runner
+WORKDIR /app
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+RUN yarn install --production --frozen-lockfile || npm install --production
+ENV NODE_ENV=production
+ENV PORT=3000
+EXPOSE 3000
+CMD ["yarn", "start"]
 ```
 
+
 ## Contributors
 
+
 <table>
-	<tr align="center">
-		<td>
-		John Doe
+   <tr align="center">
+	   <td>
+	   Nitin Kumar Pandey
+<!-- 	   <p align="center">
+		   <img src = "https://media.licdn.com/dms/image/D4D03AQFQwQwQwQwQwQ/profile-displayphoto-shrink_200_200/0?e=1696464000&v=beta&t=QwQwQwQwQwQwQwQwQwQwQwQwQwQwQwQwQwQw" width="150" height="150" alt="Nitin Kumar Pandey">
+	   </p> -->
 		<p align="center">
-			<img src = "https://dscvit.com/images/dsc-logo-square.svg" width="150" height="150" alt="Your Name Here (Insert Your Image Link In Src">
+			   <a href = "https://github.com/NitinTheGreat">
+				   <img src = "http://www.iconninja.com/files/241/825/211/round-collaboration-social-github-code-circle-network-icon.svg" width="36" height = "36" alt="GitHub"/>
+			   </a>
+			   <a href = "https://www.linkedin.com/in/nitinkrpandey">
+				   <img src = "http://www.iconninja.com/files/863/607/751/network-linkedin-social-connection-circular-circle-media-icon.svg" width="36" height="36" alt="LinkedIn"/>
+			   </a>
+		   </p>
+	   </td>
+   </tr>
+</table>
 		</p>
-			<p align="center">
-				<a href = "https://github.com/person1">
-					<img src = "http://www.iconninja.com/files/241/825/211/round-collaboration-social-github-code-circle-network-icon.svg" width="36" height = "36" alt="GitHub"/>
-				</a>
-				<a href = "https://www.linkedin.com/in/person1">
-					<img src = "http://www.iconninja.com/files/863/607/751/network-linkedin-social-connection-circular-circle-media-icon.svg" width="36" height="36" alt="LinkedIn"/>
-				</a>
-			</p>
-		</td>
-	</tr>
+
+
+
 </table>
 
 <p align="center">

devboard/.env.example

@@ -0,0 +1,2 @@
+GEMINI_API_KEY=your api key
+NEXT_PUBLIC_API_BASE_URL=http://localhost:3000

devboard/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

devboard/Dockerfile

@@ -0,0 +1,36 @@
+# DevBoard Frontend Dockerfile
+# Build a production-ready container for Next.js frontend
+
+FROM node:18-alpine AS builder
+WORKDIR /app
+
+# Install dependencies
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN yarn install --frozen-lockfile || npm install
+
+# Copy source code
+COPY . .
+
+# Build Next.js app
+RUN yarn build || npm run build
+
+# Production image
+FROM node:18-alpine AS runner
+WORKDIR /app
+
+# Copy built assets from builder
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+
+# Install only production dependencies
+RUN yarn install --production --frozen-lockfile || npm install --production
+
+# Set environment variables (override in deployment)
+ENV NODE_ENV=production
+ENV PORT=3000
+
+EXPOSE 3000
+
+# Start Next.js server
+CMD ["yarn", "start"]

devboard/README.md

@@ -0,0 +1,130 @@
+ # DevBoard Frontend
+
+A modern, feature-rich GitHub widget builder and portfolio dashboard. DevBoard empowers developers to create beautiful, interactive widgets for their GitHub profiles, visualize stats, and showcase their work with premium design tools inspired by Figma, Notion, and Linear.
+
+---
+
+## 🚀 Features
+
+### Widget Builder
+- **Premium Canvas Sizes**: Choose from preset sizes (Badge, Stats Card, Banner, Square, Large Display) or set custom dimensions.
+- **Drag & Drop Elements**: Add text, images, containers, shapes (rectangle, circle, triangle, star), charts, progress bars, badges, buttons, and QR codes.
+- **GitHub Data Integration**: Fetch live GitHub stats (username, name, bio, followers, following, public repos, avatar, creation date, commits) and display them dynamically in widgets.
+- **Inline Editing**: Double-click elements to edit text inline with a beautiful, responsive editor.
+- **Layer Management**: Organize, lock/unlock, and toggle visibility for each element. View all layers in a sidebar.
+- **Grid & Snap**: Toggle grid visibility, adjust grid size, and enable snap-to-grid for precise placement.
+- **Theme Switching**: Instantly switch between dark and light canvas themes.
+- **SVG Export**: Auto-generates production-ready SVG code for your widget. Copy to clipboard with one click.
+- **Save & Privacy**: Save widgets to your dashboard, set them as private, and tag them for easy organization.
+- **Undo/Redo**: Robust history management for all canvas actions.
+
+### Portfolio Dashboard
+- **Profile Integration**: Connect your GitHub account and display widgets on your portfolio page.
+- **Widget Marketplace**: Discover, use, and remix widgets created by the community (coming soon).
+
+### UI/UX
+- **Modern Design**: Inspired by top design tools, with floating toolbars, draggable panels, and smooth transitions.
+- **Accessibility**: Keyboard shortcuts for quick actions, responsive layout for all devices.
+
+---
+
+## 🛠️ Getting Started
+
+### Prerequisites
+- Node.js (v18+ recommended)
+- npm or yarn
+- Docker (optional, for containerized deployment)
+
+### Installation
+
+1. **Clone the repository:**
+   ```sh
+   git clone https://github.com/NitinTheGreat/devboard-frontend.git
+   cd devboard-frontend/devboard
+   ```
+2. **Install dependencies:**
+   ```sh
+   npm install
+   # or
+   yarn install
+   ```
+3. **Run the development server:**
+   ```sh
+   npm run dev
+   # or
+   yarn dev
+   ```
+4. **Open in browser:**
+   Visit [http://localhost:3000](http://localhost:3000)
+
+### Environment Variables
+Create a `.env.local` file in the `devboard` directory and set:
+```
+NEXT_PUBLIC_API_BASE_URL=<your-backend-api-url>
+```
+
+---
+
+## 🐳 Docker Deployment
+
+A sample `Dockerfile` is provided for easy containerization. See below for details.
+
+---
+
+## 🧩 Project Structure
+
+- `devboard/app/` — Next.js app routes and pages
+- `devboard/components/` — UI components, widget builder, authentication, marketplace, etc.
+- `devboard/lib/` — Utility functions, context, types
+- `devboard/public/` — Static assets (SVGs, icons)
+- `devboard/types/` — TypeScript types
+
+---
+
+## ✨ Contributing
+
+We welcome contributions to DevBoard! To get started:
+
+1. **Fork the repository** and create your branch:
+   ```sh
+   git checkout -b feature/your-feature-name
+   ```
+2. **Make your changes** (see `devboard/components/widget-builder/index.tsx` for main logic).
+3. **Test locally** and ensure all features work as expected.
+4. **Commit and push**:
+   ```sh
+   git commit -m "Add: your feature description"
+   git push origin feature/your-feature-name
+   ```
+5. **Open a Pull Request** on GitHub. Please describe your changes clearly and reference any related issues.
+
+### Guidelines
+- Write clean, readable code and follow the existing style.
+- Document new features in the README if relevant.
+- Add tests if possible.
+- Be respectful and collaborative.
+
+---
+
+## 👤 Contributor
+
+- **Nitin Kumar Pandey**  
+  [LinkedIn](https://www.linkedin.com/in/nitinkrpandey)
+
+---
+
+## 📄 License
+
+This project is licensed under the MIT License. See [LICENSE](../LICENSE) for details.
+
+---
+
+## 💬 Questions & Support
+
+For questions, suggestions, or support, please open an issue or reach out via [LinkedIn](https://www.linkedin.com/in/nitinkrpandey).
+
+---
+
+## 🐳 Dockerfile Example
+
+See below for a ready-to-use Dockerfile to run DevBoard Frontend in a container.

devboard/app/api/llm/generate/route.ts

@@ -0,0 +1,5 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  return NextResponse.json({});
+}