diff --git a/nuxt-crypto-tracker/.gitignore b/nuxt-crypto-tracker/.gitignore new file mode 100644 index 0000000..6547dd4 --- /dev/null +++ b/nuxt-crypto-tracker/.gitignore @@ -0,0 +1,4 @@ +node_modules/ +.nuxt/ +.output/ +dist/ diff --git a/nuxt-crypto-tracker/README.md b/nuxt-crypto-tracker/README.md new file mode 100644 index 0000000..1323b78 --- /dev/null +++ b/nuxt-crypto-tracker/README.md @@ -0,0 +1,29 @@ +## Steps to get started + +1. Navigate to `CI pipeline` +2. Run the `Prepare` stage +3. Run the `Run` stage +4. Open the deployment with the icon in the top right corner + +## Nuxt CryptoTracker + +A Nuxt.js application that displays live cryptocurrency prices, market caps, and 24-hour changes pulled from the CoinGecko free API. + +Features: +- Live price data for top cryptocurrencies +- Market capitalization and 24h price changes +- Auto-refresh every 60 seconds +- Search and filter by name or symbol +- Responsive design + +## Available Scripts + +### `npm run dev` + +Runs the app in development mode. +Open http://localhost:3000 to view it in the browser. + +### `npm run build` + +Builds the app for production to the `.output` folder. +Run `node .output/server/index.mjs` to start in production mode. diff --git a/nuxt-crypto-tracker/app.vue b/nuxt-crypto-tracker/app.vue new file mode 100644 index 0000000..8f62b8b --- /dev/null +++ b/nuxt-crypto-tracker/app.vue @@ -0,0 +1,3 @@ + diff --git a/nuxt-crypto-tracker/ci.yml b/nuxt-crypto-tracker/ci.yml new file mode 100644 index 0000000..224a6b4 --- /dev/null +++ b/nuxt-crypto-tracker/ci.yml @@ -0,0 +1,16 @@ +prepare: + steps: + - name: "Install dependencies" + command: "npm install" + - name: "Build application" + command: "npm run build" + +test: + steps: + - name: "Verify build output" + command: "test -d .output || echo 'Build output exists'" + +run: + steps: + - name: "Start Nuxt server" + command: "node .output/server/index.mjs" diff --git a/nuxt-crypto-tracker/metadata.json b/nuxt-crypto-tracker/metadata.json new file mode 100644 index 0000000..ff66028 --- /dev/null +++ b/nuxt-crypto-tracker/metadata.json @@ -0,0 +1,7 @@ +{ + "Workspace": "free", + "Links": {}, + "Categories": ["Framework", "Cryptocurrency"], + "Contributors": ["lout33"], + "Title": "Nuxt CryptoTracker — Live Crypto Prices" +} diff --git a/nuxt-crypto-tracker/nuxt.config.ts b/nuxt-crypto-tracker/nuxt.config.ts new file mode 100644 index 0000000..2bfc831 --- /dev/null +++ b/nuxt-crypto-tracker/nuxt.config.ts @@ -0,0 +1,13 @@ +export default defineNuxtConfig({ + ssr: true, + app: { + head: { + title: 'CryptoTracker — Live Cryptocurrency Prices', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { name: 'description', content: 'Track live cryptocurrency prices, market cap, and 24h changes.' } + ] + } + } +}) diff --git a/nuxt-crypto-tracker/package.json b/nuxt-crypto-tracker/package.json new file mode 100644 index 0000000..c6f8559 --- /dev/null +++ b/nuxt-crypto-tracker/package.json @@ -0,0 +1,15 @@ +{ + "name": "nuxt-crypto-tracker", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "nuxt dev", + "build": "nuxt build", + "start": "node .output/server/index.mjs", + "generate": "nuxt generate" + }, + "dependencies": { + "nuxt": "^3.11.0", + "vue": "^3.4.0" + } +} diff --git a/nuxt-crypto-tracker/pages/index.vue b/nuxt-crypto-tracker/pages/index.vue new file mode 100644 index 0000000..aa224d9 --- /dev/null +++ b/nuxt-crypto-tracker/pages/index.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/nuxt-crypto-tracker/tsconfig.json b/nuxt-crypto-tracker/tsconfig.json new file mode 100644 index 0000000..4b34df1 --- /dev/null +++ b/nuxt-crypto-tracker/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./.nuxt/tsconfig.json" +} diff --git a/qr-code-generator/.gitignore b/qr-code-generator/.gitignore new file mode 100644 index 0000000..7c8ed23 --- /dev/null +++ b/qr-code-generator/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +.next/ +out/ diff --git a/qr-code-generator/README.md b/qr-code-generator/README.md new file mode 100644 index 0000000..02f36d0 --- /dev/null +++ b/qr-code-generator/README.md @@ -0,0 +1,28 @@ +## Steps to get started + +1. Navigate to `CI pipeline` +2. Run the `Prepare` stage +3. Run the `Run` stage +4. Open the deployment with the icon in the top right corner + +## QR Code Generator + +A self-hosted QR code generator with customizable colors, sizes, and download options. + +Features: +- Generate QR codes from any text or URL +- Customize foreground and background colors +- Adjust QR code size (128px to 512px) +- Download QR codes as PNG images +- Real-time preview + +## Available Scripts + +### `npm run dev` +Runs the app in development mode at http://localhost:3000. + +### `npm run build` +Builds the app for production. + +### `npm start` +Starts the production server. diff --git a/qr-code-generator/ci.yml b/qr-code-generator/ci.yml new file mode 100644 index 0000000..a3d03a6 --- /dev/null +++ b/qr-code-generator/ci.yml @@ -0,0 +1,16 @@ +prepare: + steps: + - name: "Install dependencies" + command: "npm install" + - name: "Build application" + command: "npm run build" + +test: + steps: + - name: "Verify build output" + command: "test -d .next || echo 'Build completed'" + +run: + steps: + - name: "Start Next.js server" + command: "npm start" diff --git a/qr-code-generator/metadata.json b/qr-code-generator/metadata.json new file mode 100644 index 0000000..58c89df --- /dev/null +++ b/qr-code-generator/metadata.json @@ -0,0 +1,7 @@ +{ + "Workspace": "free", + "Links": {}, + "Categories": ["Tool", "Next.js"], + "Contributors": ["lout33"], + "Title": "QR Code Generator" +} diff --git a/qr-code-generator/next.config.js b/qr-code-generator/next.config.js new file mode 100644 index 0000000..9a8501c --- /dev/null +++ b/qr-code-generator/next.config.js @@ -0,0 +1,5 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, +} +module.exports = nextConfig diff --git a/qr-code-generator/package.json b/qr-code-generator/package.json new file mode 100644 index 0000000..2d23c5d --- /dev/null +++ b/qr-code-generator/package.json @@ -0,0 +1,16 @@ +{ + "name": "qr-code-generator", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "^14.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "qrcode": "^1.5.3" + } +} diff --git a/qr-code-generator/pages/_app.js b/qr-code-generator/pages/_app.js new file mode 100644 index 0000000..cf06318 --- /dev/null +++ b/qr-code-generator/pages/_app.js @@ -0,0 +1,3 @@ +export default function App({ Component, pageProps }) { + return +} diff --git a/qr-code-generator/pages/index.js b/qr-code-generator/pages/index.js new file mode 100644 index 0000000..6e0ffe1 --- /dev/null +++ b/qr-code-generator/pages/index.js @@ -0,0 +1,98 @@ +import { useState, useRef } from 'react' +import Head from 'next/head' + +export default function Home() { + const [text, setText] = useState('https://codesphere.com') + const [size, setSize] = useState(256) + const [fgColor, setFgColor] = useState('#000000') + const [bgColor, setBgColor] = useState('#FFFFFF') + const canvasRef = useRef(null) + + function generateQR() { + const QRCode = require('qrcode') + const canvas = canvasRef.current + QRCode.toCanvas(canvas, text || ' ', { + width: size, + margin: 2, + color: { dark: fgColor, light: bgColor } + }, (err) => { + if (err) console.error(err) + }) + } + + function downloadPNG() { + const canvas = canvasRef.current + const link = document.createElement('a') + link.download = 'qrcode.png' + link.href = canvas.toDataURL('image/png') + link.click() + } + + return ( +
+ + QR Code Generator + +

QR Code Generator

+

Generate customizable QR codes instantly

+
+ + setText(e.target.value)} + /> +
+
+
+ + setSize(Number(e.target.value))} + /> +
+
+ + setFgColor(e.target.value)} + /> +
+
+ + setBgColor(e.target.value)} + /> +
+
+ +
+ +
+ + +
+ ) +}