Skip to content

Commit 3f83fff

Browse files
dk-a-devdk-a-dev
authored
Merge pull request #1 from NitinTheGreat/dev
2 parents c2333e9 + 101b3ea commit 3f83fff

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+15175
-32
lines changed

‎README.md‎

Lines changed: 81 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,64 +2,113 @@
22
<a href="https://dscvit.com">
33
<img width="400" src="https://user-images.githubusercontent.com/56252312/159312411-58410727-3933-4224-b43e-4e9b627838a3.png#gh-light-mode-only" alt="GDSC VIT"/>
44
</a>
5-
<h2 align="center"> < Insert Project Title Here > </h2>
6-
<h4 align="center"> < Insert Project Description Here > <h4>
5+
<h2 align="center">DevBoard </h2>
6+
<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>
77
</p>
88

99
---
1010
[![Join Us](https://img.shields.io/badge/Join%20Us-Developer%20Student%20Clubs-red)](https://dsc.community.dev/vellore-institute-of-technology/)
11-
[![Discord Chat](https://img.shields.io/discord/760928671698649098.svg)](https://discord.gg/498KVdSKWR)
12-
11+
1312
[![DOCS](https://img.shields.io/badge/Documentation-see%20docs-green?style=flat-square&logo=appveyor)](INSERT_LINK_FOR_DOCS_HERE)
1413
[![UI ](https://img.shields.io/badge/User%20Interface-Link%20to%20UI-orange?style=flat-square&logo=appveyor)](INSERT_UI_LINK_HERE)
1514

16-
1715
## Features
18-
- [ ] < feature >
19-
- [ ] < feature >
20-
- [ ] < feature >
21-
- [ ] < feature >
16+
- [x] Premium Canvas Sizes: Presets and custom dimensions for widgets
17+
- [x] Drag & Drop Elements: Text, images, containers, shapes, charts, progress bars, badges, buttons, QR codes
18+
- [x] GitHub Data Integration: Live stats, profile info, avatar, commits, and more
19+
- [x] Inline Editing: Double-click to edit text inline
20+
- [x] Layer Management: Organize, lock/unlock, toggle visibility
21+
- [x] Grid & Snap: Toggle grid, adjust size, snap-to-grid
22+
- [x] Theme Switching: Dark/light canvas themes
23+
- [x] SVG Export: Auto-generated, production-ready SVG code
24+
- [x] Save & Privacy: Save widgets, set privacy, add tags
25+
- [x] Undo/Redo: Robust history management
2226

23-
<br>
2427

28+
<br>
2529
## Dependencies
26-
- < dependency >
27-
- < dependency >
28-
30+
- Node.js (v18+ recommended)
31+
- npm or yarn
32+
- Docker (optional)
2933

34+
## Dependencies
3035
## Running
3136

32-
33-
< directions to install >
37+
Clone the repository:
3438
```bash
35-
< insert code >
39+
git clone https://github.com/NitinTheGreat/devboard-frontend.git
40+
cd devboard-frontend/devboard
3641
```
3742

38-
< directions to execute >
43+
Install dependencies:
44+
```bash
45+
npm install
46+
# or
47+
yarn install
48+
```
3949

50+
Run the development server:
4051
```bash
41-
< insert code >
52+
npm run dev
53+
# or
54+
yarn dev
55+
```
56+
57+
Open [http://localhost:3000](http://localhost:3000) in your browser.
58+
59+
Create a `.env.local` file in the `devboard` directory and set:
60+
```
61+
NEXT_PUBLIC_API_BASE_URL=<your-backend-api-url>
62+
```
63+
## Running
64+
65+
A sample `Dockerfile` is provided in `devboard/` for easy containerization:
66+
```Dockerfile
67+
FROM node:18-alpine AS builder
68+
WORKDIR /app
69+
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
70+
RUN yarn install --frozen-lockfile || npm install
71+
COPY . .
72+
RUN yarn build || npm run build
73+
74+
FROM node:18-alpine AS runner
75+
WORKDIR /app
76+
COPY --from=builder /app/.next ./.next
77+
COPY --from=builder /app/public ./public
78+
COPY --from=builder /app/package.json ./package.json
79+
RUN yarn install --production --frozen-lockfile || npm install --production
80+
ENV NODE_ENV=production
81+
ENV PORT=3000
82+
EXPOSE 3000
83+
CMD ["yarn", "start"]
4284
```
4385

86+
4487
## Contributors
4588

89+
4690
<table>
47-
<tr align="center">
48-
<td>
49-
John Doe
91+
<tr align="center">
92+
<td>
93+
Nitin Kumar Pandey
94+
<!-- <p align="center">
95+
<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">
96+
</p> -->
5097
<p align="center">
51-
<img src = "https://dscvit.com/images/dsc-logo-square.svg" width="150" height="150" alt="Your Name Here (Insert Your Image Link In Src">
98+
<a href = "https://github.com/NitinTheGreat">
99+
<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"/>
100+
</a>
101+
<a href = "https://www.linkedin.com/in/nitinkrpandey">
102+
<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"/>
103+
</a>
104+
</p>
105+
</td>
106+
</tr>
107+
</table>
52108
</p>
53-
<p align="center">
54-
<a href = "https://github.com/person1">
55-
<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"/>
56-
</a>
57-
<a href = "https://www.linkedin.com/in/person1">
58-
<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"/>
59-
</a>
60-
</p>
61-
</td>
62-
</tr>
109+
110+
111+
63112
</table>
64113

65114
<p align="center">

‎devboard/.env.example‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
GEMINI_API_KEY=your api key
2+
NEXT_PUBLIC_API_BASE_URL=http://localhost:3000

‎devboard/.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

‎devboard/Dockerfile‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# DevBoard Frontend Dockerfile
2+
# Build a production-ready container for Next.js frontend
3+
4+
FROM node:18-alpine AS builder
5+
WORKDIR /app
6+
7+
# Install dependencies
8+
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
9+
RUN yarn install --frozen-lockfile || npm install
10+
11+
# Copy source code
12+
COPY . .
13+
14+
# Build Next.js app
15+
RUN yarn build || npm run build
16+
17+
# Production image
18+
FROM node:18-alpine AS runner
19+
WORKDIR /app
20+
21+
# Copy built assets from builder
22+
COPY --from=builder /app/.next ./.next
23+
COPY --from=builder /app/public ./public
24+
COPY --from=builder /app/package.json ./package.json
25+
26+
# Install only production dependencies
27+
RUN yarn install --production --frozen-lockfile || npm install --production
28+
29+
# Set environment variables (override in deployment)
30+
ENV NODE_ENV=production
31+
ENV PORT=3000
32+
33+
EXPOSE 3000
34+
35+
# Start Next.js server
36+
CMD ["yarn", "start"]

‎devboard/README.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# DevBoard Frontend
2+
3+
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.
4+
5+
---
6+
7+
## 🚀 Features
8+
9+
### Widget Builder
10+
- **Premium Canvas Sizes**: Choose from preset sizes (Badge, Stats Card, Banner, Square, Large Display) or set custom dimensions.
11+
- **Drag & Drop Elements**: Add text, images, containers, shapes (rectangle, circle, triangle, star), charts, progress bars, badges, buttons, and QR codes.
12+
- **GitHub Data Integration**: Fetch live GitHub stats (username, name, bio, followers, following, public repos, avatar, creation date, commits) and display them dynamically in widgets.
13+
- **Inline Editing**: Double-click elements to edit text inline with a beautiful, responsive editor.
14+
- **Layer Management**: Organize, lock/unlock, and toggle visibility for each element. View all layers in a sidebar.
15+
- **Grid & Snap**: Toggle grid visibility, adjust grid size, and enable snap-to-grid for precise placement.
16+
- **Theme Switching**: Instantly switch between dark and light canvas themes.
17+
- **SVG Export**: Auto-generates production-ready SVG code for your widget. Copy to clipboard with one click.
18+
- **Save & Privacy**: Save widgets to your dashboard, set them as private, and tag them for easy organization.
19+
- **Undo/Redo**: Robust history management for all canvas actions.
20+
21+
### Portfolio Dashboard
22+
- **Profile Integration**: Connect your GitHub account and display widgets on your portfolio page.
23+
- **Widget Marketplace**: Discover, use, and remix widgets created by the community (coming soon).
24+
25+
### UI/UX
26+
- **Modern Design**: Inspired by top design tools, with floating toolbars, draggable panels, and smooth transitions.
27+
- **Accessibility**: Keyboard shortcuts for quick actions, responsive layout for all devices.
28+
29+
---
30+
31+
## 🛠️ Getting Started
32+
33+
### Prerequisites
34+
- Node.js (v18+ recommended)
35+
- npm or yarn
36+
- Docker (optional, for containerized deployment)
37+
38+
### Installation
39+
40+
1. **Clone the repository:**
41+
```sh
42+
git clone https://github.com/NitinTheGreat/devboard-frontend.git
43+
cd devboard-frontend/devboard
44+
```
45+
2. **Install dependencies:**
46+
```sh
47+
npm install
48+
# or
49+
yarn install
50+
```
51+
3. **Run the development server:**
52+
```sh
53+
npm run dev
54+
# or
55+
yarn dev
56+
```
57+
4. **Open in browser:**
58+
Visit [http://localhost:3000](http://localhost:3000)
59+
60+
### Environment Variables
61+
Create a `.env.local` file in the `devboard` directory and set:
62+
```
63+
NEXT_PUBLIC_API_BASE_URL=<your-backend-api-url>
64+
```
65+
66+
---
67+
68+
## 🐳 Docker Deployment
69+
70+
A sample `Dockerfile` is provided for easy containerization. See below for details.
71+
72+
---
73+
74+
## 🧩 Project Structure
75+
76+
- `devboard/app/` — Next.js app routes and pages
77+
- `devboard/components/` — UI components, widget builder, authentication, marketplace, etc.
78+
- `devboard/lib/` — Utility functions, context, types
79+
- `devboard/public/` — Static assets (SVGs, icons)
80+
- `devboard/types/` — TypeScript types
81+
82+
---
83+
84+
## ✨ Contributing
85+
86+
We welcome contributions to DevBoard! To get started:
87+
88+
1. **Fork the repository** and create your branch:
89+
```sh
90+
git checkout -b feature/your-feature-name
91+
```
92+
2. **Make your changes** (see `devboard/components/widget-builder/index.tsx` for main logic).
93+
3. **Test locally** and ensure all features work as expected.
94+
4. **Commit and push**:
95+
```sh
96+
git commit -m "Add: your feature description"
97+
git push origin feature/your-feature-name
98+
```
99+
5. **Open a Pull Request** on GitHub. Please describe your changes clearly and reference any related issues.
100+
101+
### Guidelines
102+
- Write clean, readable code and follow the existing style.
103+
- Document new features in the README if relevant.
104+
- Add tests if possible.
105+
- Be respectful and collaborative.
106+
107+
---
108+
109+
## 👤 Contributor
110+
111+
- **Nitin Kumar Pandey**
112+
[LinkedIn](https://www.linkedin.com/in/nitinkrpandey)
113+
114+
---
115+
116+
## 📄 License
117+
118+
This project is licensed under the MIT License. See [LICENSE](../LICENSE) for details.
119+
120+
---
121+
122+
## 💬 Questions & Support
123+
124+
For questions, suggestions, or support, please open an issue or reach out via [LinkedIn](https://www.linkedin.com/in/nitinkrpandey).
125+
126+
---
127+
128+
## 🐳 Dockerfile Example
129+
130+
See below for a ready-to-use Dockerfile to run DevBoard Frontend in a container.

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { NextRequest, NextResponse } from 'next/server';
2+
3+
export async function POST(req: NextRequest) {
4+
return NextResponse.json({});
5+
}

0 commit comments

Comments
 (0)