README.md

DevBoard

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.

---

Features

• Premium Canvas Sizes: Presets and custom dimensions for widgets
• Drag & Drop Elements: Text, images, containers, shapes, charts, progress bars, badges, buttons, QR codes
• GitHub Data Integration: Live stats, profile info, avatar, commits, and more
• Inline Editing: Double-click to edit text inline
• Layer Management: Organize, lock/unlock, toggle visibility
• Grid & Snap: Toggle grid, adjust size, snap-to-grid
• Theme Switching: Dark/light canvas themes
• SVG Export: Auto-generated, production-ready SVG code
• Save & Privacy: Save widgets, set privacy, add tags
• Undo/Redo: Robust history management

## Dependencies - Node.js (v18+ recommended) - npm or yarn - Docker (optional)

Dependencies

Running

Clone the repository:

git clone https://github.com/NitinTheGreat/devboard-frontend.git
cd devboard-frontend/devboard

Install dependencies:

npm install
# or
yarn install

Run the development server:

npm run dev
# or
yarn dev

Open 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:

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

Nitin Kumar Pandey

Made with ❤ by GDSC-VIT