@beknurakhmed/webforge-cli 0.1.0

package/templates/overlays/portfolio/react/src/components/ContactForm.tsx

@@ -0,0 +1,29 @@
+export function ContactForm() {
+  return (
+    <section id="contact" className="contact-section">
+      <h2>Get In Touch</h2>
+      <p className="section-subtitle">Have a project in mind? Let's work together.</p>
+      <form className="contact-form" onSubmit={(e) => e.preventDefault()}>
+        <div className="form-row">
+          <div className="form-group">
+            <label htmlFor="name">Name</label>
+            <input type="text" id="name" placeholder="Your name" />
+          </div>
+          <div className="form-group">
+            <label htmlFor="email">Email</label>
+            <input type="email" id="email" placeholder="your@email.com" />
+          </div>
+        </div>
+        <div className="form-group">
+          <label htmlFor="subject">Subject</label>
+          <input type="text" id="subject" placeholder="Project inquiry" />
+        </div>
+        <div className="form-group">
+          <label htmlFor="message">Message</label>
+          <textarea id="message" rows={5} placeholder="Tell me about your project..." />
+        </div>
+        <button type="submit" className="btn btn-primary">Send Message</button>
+      </form>
+    </section>
+  );
+}

package/templates/overlays/portfolio/react/src/components/HeroSection.tsx

@@ -0,0 +1,24 @@
+export function HeroSection() {
+  return (
+    <header className="portfolio-hero">
+      <nav className="portfolio-nav">
+        <div className="logo">{{projectName}}</div>
+        <div className="nav-links">
+          <a href="#projects">Projects</a>
+          <a href="#skills">Skills</a>
+          <a href="#contact">Contact</a>
+        </div>
+      </nav>
+      <div className="hero-content">
+        <span className="hero-greeting">Hi, I'm</span>
+        <h1>Beknur</h1>
+        <p className="hero-role">Frontend Developer & Software Engineer</p>
+        <p className="hero-desc">I craft pixel-perfect, user-centric web experiences with modern technologies. Passionate about clean code and great design.</p>
+        <div className="hero-actions">
+          <a href="#projects" className="btn btn-primary">View My Work</a>
+          <a href="#contact" className="btn btn-outline">Get In Touch</a>
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/overlays/portfolio/react/src/components/PortfolioFooter.tsx

@@ -0,0 +1,14 @@
+export function PortfolioFooter() {
+  return (
+    <footer className="portfolio-footer">
+      <div className="footer-content">
+        <div className="footer-links">
+          <a href="https://github.com/beknurakhmed" target="_blank" rel="noopener noreferrer">GitHub</a>
+          <a href="#">LinkedIn</a>
+          <a href="#">Twitter</a>
+        </div>
+        <p>&copy; 2025 {{projectName}}. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+}

package/templates/overlays/portfolio/react/src/components/Projects.tsx

@@ -0,0 +1,33 @@
+const projects = [
+  { title: 'E-commerce Platform', description: 'A full-featured online store with cart, checkout, and payment integration.', tags: ['React', 'Node.js', 'Stripe'], image: '🛒' },
+  { title: 'Task Management App', description: 'Collaborative task management with real-time updates and team features.', tags: ['Vue.js', 'Firebase', 'Tailwind'], image: '📋' },
+  { title: 'Weather Dashboard', description: 'Beautiful weather visualization with 5-day forecasts and location search.', tags: ['TypeScript', 'API', 'Chart.js'], image: '🌤️' },
+  { title: 'Social Media App', description: 'Social networking platform with posts, comments, and real-time messaging.', tags: ['Next.js', 'PostgreSQL', 'WebSocket'], image: '💬' },
+  { title: 'Portfolio Website', description: 'Responsive portfolio with animations and dark mode support.', tags: ['React', 'Framer Motion', 'SCSS'], image: '🎨' },
+  { title: 'Blog CMS', description: 'Content management system with markdown editor and SEO optimization.', tags: ['Nuxt', 'MongoDB', 'Markdown'], image: '📝' },
+];
+
+export function Projects() {
+  return (
+    <section id="projects" className="projects-section">
+      <h2>Featured Projects</h2>
+      <p className="section-subtitle">A selection of my recent work</p>
+      <div className="projects-grid">
+        {projects.map((project, i) => (
+          <div key={i} className="project-card">
+            <div className="project-image">{project.image}</div>
+            <div className="project-info">
+              <h3>{project.title}</h3>
+              <p>{project.description}</p>
+              <div className="project-tags">
+                {project.tags.map((tag, j) => (
+                  <span key={j} className="tag">{tag}</span>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/overlays/portfolio/react/src/components/Skills.tsx

@@ -0,0 +1,27 @@
+const skillGroups = [
+  { category: 'Frontend', skills: ['React', 'Vue.js', 'Angular', 'TypeScript', 'Next.js', 'Nuxt'] },
+  { category: 'Styling', skills: ['Tailwind CSS', 'SCSS', 'Material UI', 'Styled Components', 'CSS Modules'] },
+  { category: 'Backend', skills: ['Node.js', 'Express', 'PostgreSQL', 'MongoDB', 'REST API', 'GraphQL'] },
+  { category: 'Tools', skills: ['Git', 'Docker', 'Vite', 'Webpack', 'Figma', 'VS Code'] },
+];
+
+export function Skills() {
+  return (
+    <section id="skills" className="skills-section">
+      <h2>Skills & Technologies</h2>
+      <p className="section-subtitle">Technologies I work with on a daily basis</p>
+      <div className="skills-grid">
+        {skillGroups.map((group, i) => (
+          <div key={i} className="skill-group">
+            <h3>{group.category}</h3>
+            <div className="skill-tags">
+              {group.skills.map((skill, j) => (
+                <span key={j} className="skill-tag">{skill}</span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/react/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF9640"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/react/src/App.css

@@ -0,0 +1,11 @@
+.app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}

package/templates/react/src/App.tsx

@@ -0,0 +1,12 @@
+import './App.css';
+
+function App() {
+  return (
+    <div className="app">
+      <h1>{{projectName}}</h1>
+      <p>Welcome to your new project!</p>
+    </div>
+  );
+}
+
+export default App;

package/templates/react/src/index.css

@@ -0,0 +1,42 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100vh;
+}
+
+a {
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}

package/templates/react/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/react/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/templates/state/mobx/deps.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "mobx": "^6.13.0",
+    "mobx-react-lite": "^4.0.0"
+  }
+}

package/templates/state/mobx/react/src/store/AppStore.ts

@@ -0,0 +1,15 @@
+import { makeAutoObservable } from 'mobx';
+
+class AppStore {
+  count = 0;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  increment() { this.count++; }
+  decrement() { this.count--; }
+  reset() { this.count = 0; }
+}
+
+export const appStore = new AppStore();

package/templates/state/ngrx/angular/src/app/store/app.state.ts

@@ -0,0 +1,22 @@
+import { createAction, createReducer, createFeatureSelector, createSelector, on } from '@ngrx/store';
+
+// Actions
+export const increment = createAction('[Counter] Increment');
+export const decrement = createAction('[Counter] Decrement');
+export const reset = createAction('[Counter] Reset');
+
+// State
+export interface CounterState { count: number; }
+const initialState: CounterState = { count: 0 };
+
+// Reducer
+export const counterReducer = createReducer(
+  initialState,
+  on(increment, (state) => ({ ...state, count: state.count + 1 })),
+  on(decrement, (state) => ({ ...state, count: state.count - 1 })),
+  on(reset, () => initialState)
+);
+
+// Selectors
+export const selectCounter = createFeatureSelector<CounterState>('counter');
+export const selectCount = createSelector(selectCounter, (state) => state.count);

package/templates/state/ngrx/deps.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "@ngrx/store": "^19.0.0",
+    "@ngrx/effects": "^19.0.0",
+    "@ngrx/store-devtools": "^19.0.0"
+  }
+}

package/templates/state/pinia/deps.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "pinia": "^2.3.0"
+  }
+}

package/templates/state/pinia/vue/src/store/useAppStore.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    count: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.count * 2,
+  },
+  actions: {
+    increment() { this.count++; },
+    decrement() { this.count--; },
+    reset() { this.count = 0; },
+  },
+});

package/templates/state/redux/deps.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.5.0",
+    "react-redux": "^9.2.0"
+  }
+}

package/templates/state/redux/react/src/store/counterSlice.ts

@@ -0,0 +1,20 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+interface CounterState {
+  value: number;
+}
+
+const initialState: CounterState = { value: 0 };
+
+const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment: (state) => { state.value += 1; },
+    decrement: (state) => { state.value -= 1; },
+    incrementByAmount: (state, action: PayloadAction<number>) => { state.value += action.payload; },
+  },
+});
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions;
+export default counterSlice.reducer;

package/templates/state/redux/react/src/store/index.ts

@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit';
+import counterReducer from './counterSlice';
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

package/templates/state/rxjs/angular/src/app/services/app-state.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+interface AppState {
+  count: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AppStateService {
+  private state$ = new BehaviorSubject<AppState>({ count: 0 });
+
+  get state() { return this.state$.asObservable(); }
+  get currentState() { return this.state$.getValue(); }
+
+  increment() { this.state$.next({ ...this.currentState, count: this.currentState.count + 1 }); }
+  decrement() { this.state$.next({ ...this.currentState, count: this.currentState.count - 1 }); }
+  reset() { this.state$.next({ count: 0 }); }
+}

package/templates/state/rxjs/deps.json

@@ -0,0 +1,3 @@
+{
+  "dependencies": {}
+}

package/templates/state/zustand/deps.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "zustand": "^5.0.0"
+  }
+}

package/templates/state/zustand/react/src/store/useStore.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface AppState {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
+}
+
+export const useStore = create<AppState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+  reset: () => set({ count: 0 }),
+}));

package/templates/styling/angular-material/deps.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@angular/material": "^19.0.0",
+    "@angular/cdk": "^19.0.0"
+  }
+}

package/templates/styling/ant-design/deps.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "antd": "^5.22.0"
+  }
+}

package/templates/styling/chakra-ui/deps.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@chakra-ui/react": "^3.3.0"
+  }
+}

package/templates/styling/css-modules/deps.json

@@ -0,0 +1,3 @@
+{
+  "devDependencies": {}
+}

package/templates/styling/material-ui/deps.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "@mui/material": "^6.4.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0"
+  }
+}

package/templates/styling/scss/deps.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "sass": "^1.80.0"
+  }
+}

package/templates/styling/styled-components/deps.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "styled-components": "^6.1.0"
+  }
+}

package/templates/styling/tailwind/config/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/templates/styling/tailwind/config/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx,vue}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/templates/styling/tailwind/deps.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0"
+  }
+}

package/templates/vanilla/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vanilla/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0"
+  }
+}

package/templates/vanilla/src/main.ts

@@ -0,0 +1,9 @@
+import './style.css';
+
+const app = document.querySelector<HTMLDivElement>('#app')!;
+app.innerHTML = `
+  <div class="app">
+    <h1>{{projectName}}</h1>
+    <p>Welcome to your new project!</p>
+  </div>
+`;

package/templates/vanilla/src/style.css

@@ -0,0 +1,36 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100vh;
+}
+
+.app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+  }
+}

package/templates/vanilla/vite.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({});

package/templates/vue/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vue/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/vue/src/App.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="app">
+    <h1>{{projectName}}</h1>
+    <p>Welcome to your new project!</p>
+  </div>
+</template>
+
+<style scoped>
+.app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+</style>