Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Bilingual (EN/PL) digital business card + contact API — a reproducible AI-assisted delivery case study

License

Notifications You must be signed in to change notification settings

lukaszpiotrluczak/devfest-lodz-2025

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚠️ ARCHIVED REPOSITORY

This repository contains code and presentation materials prepared for the DevFest Łódź 2025 conference.

Status: Archived — this is a snapshot of an AI-assisted development experiment presented live during the conference.

👉 Active development of the production-ready version continues at: https://github.com/lukaszpiotrluczak/lukaszpiotrluczak.me

About This Archive

This repository documents an AI coding experiment conducted for the conference talk:

"Are Frontend Developers at Risk? AI Is Already Writing HTML for Us…"

Important context

  • The application was developed under strict time constraints and with a strong focus on process rather than completeness
  • The work was intentionally not finalized — several planned steps were left out
  • Existing imperfections and errors were left intentionally for educational and analytical purposes
  • The presentation itself was entirely generated using AI, including its inaccuracies, to transparently demonstrate current limitations of such tools
  • This codebase serves as a case study of an AI-assisted development workflow, including its strengths and weaknesses

Support this work: If you found this experiment valuable, feel free to buy me a coffee ☕


Digital Business Card — AI-Assisted, Production-Grade Web Platform

This repository contains the full source code, assets, AI prompts, and conversation logs for a production-ready digital business card platform built for Łukasz Piotr Łuczak.

The project demonstrates how generative AI can be used responsibly and effectively across the entire software delivery lifecycle — from discovery and design to architecture, implementation, security, and deployment.


✨ What is this project?

This is not a traditional website or blog.

It is a:

  • single-link digital business card
  • primary online contact hub
  • networking tool for conferences and meetups (QR / link / NFC)
  • routing point to social profiles, publications, events, and contact channels

The platform is:

  • mobile-first
  • bilingual (EN / PL)
  • SEO- and structured-data-optimized
  • built with real production standards

🎯 Goals

  1. Personal branding & thought leadership
  2. Conference networking
  3. Client acquisition
  4. Collaboration & recruitment
  5. Demonstrating AI-assisted software engineering best practices

🧠 AI-Assisted Workflow (Core Idea)

This project was built using AI as a collaborator, not a code generator.

AI was used to:

  • clarify requirements and scope
  • design information architecture
  • synthesize brand and visual identity
  • define system architecture
  • generate UI prototypes
  • scaffold infrastructure and tooling
  • iterate and refine implementation

All AI prompts, conversations, and generated assets are preserved to make the process transparent and reproducible.

For details on how pull requests and commit history are handled in this project, see AI-Assisted Pull Request Workflow.


🗂 Repository Structure

/
├─ app/                   # Application code (future: Astro + NestJS)
│
├─ docs/                  # Approved documentation and artifacts
│  ├─ project-spec.md     # Product specification
│  ├─ roadmap.md          # Delivery plan
│  ├─ design-profile.json # Design contract
│  ├─ prototypes/         # HTML/UI prototypes
│  ├─ theme/              # Theme CSS and tokens
│  └─ contributing/       # Contribution guides
│
├─ conversations/         # AI conversation logs (archived by phase)
│
├─ prompts/               # AI prompts used at each project phase
│  ├─ 01-discovery/
│  ├─ 02-branding/
│  ├─ 03-ui/
│  ├─ 04-architecture/
│  ├─ 05-backend/
│  └─ 06-seo/
│
├─ stacks/
│  └─ production/         # Coolify production stack
│
├─ dist/                  # Build artifacts (safe to delete)
│
├─ .devcontainer/         # Dev container configuration
├─ .vscode/               # VS Code workspace & settings
├─ .githooks/             # Git hooks (commit validation)
└─ .github/               # GitHub workflows and templates

🧩 Tech Stack

Frontend

  • Astro
  • Tailwind CSS 4.1
  • Semantic HTML, minimal JavaScript
  • Light / Dark mode
  • Full EN / PL i18n

Backend

  • NestJS
  • Contact form API
  • Security controls (rate-limit, honeypot, GDPR-compliant captcha)
  • Astro served as middleware

Infrastructure & DX

  • Docker / Podman agnostic
  • Coolify deployment
  • ESLint, Prettier, cspell
  • Conventional Commits
  • Git hooks & CI checks
  • Dev Container + VS Code workspace

🔐 Security & Privacy

  • No analytics
  • No tracking
  • No cookies
  • GDPR-aware by design
  • Minimal data collection
  • Structured input validation
  • Secure headers and CSP

🌍 SEO & Structured Data

The platform implements:

  • OpenGraph & Twitter cards
  • hreflang (EN / PL)
  • JSON-LD for:
    • Person
    • Organization
    • Event
    • ScholarlyArticle

This makes the site suitable as a primary identity reference point for search engines and external links.


🚀 Getting Started (Local Development)

Prerequisites

  • Node.js 20+ (LTS)
  • pnpm 9+ (package manager)
  • Docker or Podman (optional, for Dev Container)
  • VS Code (recommended, for workspace configuration)

Option 1: Using Dev Container (recommended)

This method provides a fully configured development environment with all tools pre-installed:

  1. Open the repository in VS Code
  2. Install the Dev Containers extension if not already installed
  3. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
  4. Select "Dev Containers: Reopen in Container"
  5. Wait for the container to build and dependencies to install automatically

The Dev Container includes:

  • Node.js 20
  • pnpm pre-configured
  • All VS Code extensions (ESLint, Prettier, Tailwind, Astro, cspell)
  • Git hooks enabled automatically
  • Timezone set to Europe/Warsaw

Option 2: Manual setup

If you prefer to work without a container:

# Install dependencies
pnpm install

# Run quality checks
pnpm run validate

# Run linting
pnpm run lint

# Format code
pnpm run format:fix

# Spell check
pnpm run spell

Development Workflow

Running the Development Server

# Start in development mode (watches for changes, hot reload)
pnpm run dev

# Start on a custom port
PORT=3100 pnpm run dev

# Using .env file (copy .env.example to .env first)
cp .env.example .env
# Edit .env to set PORT and other variables
pnpm run dev

The dev server runs from TypeScript source files and automatically recompiles on changes.

Building for Production

# Build both Astro frontend and NestJS backend
pnpm run build

# Start the production build
pnpm run start:prod

# Or just run the built output (requires build first)
pnpm run start

Note: pnpm run start requires that you've run pnpm run build first. It will fail with a clear error message if the build artifacts are missing.

Environment Variables

The application supports the following environment variables:

Variable Default Description
PORT 3000 Port for the NestJS backend server
NODE_ENV development Application environment (development, production)

Examples:

# Development with custom port
PORT=3100 pnpm run dev

# Production mode
NODE_ENV=production pnpm run start

See .env.example for all available configuration options.

Git Hooks Setup

Git hooks are automatically configured via the prepare script when you run pnpm install.

To manually set up hooks:

# The hooks are stored in .githooks/
git config core.hooksPath .githooks

To skip hooks temporarily:

SKIP_HOOKS=true git commit -m "message"

🧪 Quality Gates & CI

This repository enforces strict quality gates from day one:

Local Checks (via npm scripts)

pnpm run lint        # ESLint validation
pnpm run format      # Prettier format check
pnpm run spell       # cspell spell check
pnpm run validate    # Run all checks

Commit Message Validation

All commits must follow Conventional Commits:

type(scope): subject

body

footer

Allowed types: feat, fix, docs, style, refactor, test, chore, ci, build, perf, revert

Example:

feat(dx): add ESLint and Prettier configuration

Establishes code quality gates with flat config ESLint supporting
TypeScript and Astro, and Prettier for consistent formatting.

This is enforced via git hooks and CI validation.

See docs/contributing/commit-messages.md for detailed guidance.

CI Pipeline

On every push and pull request, GitHub Actions runs:

  1. Install dependencies (pnpm with caching)
  2. ESLint validation
  3. Prettier format check
  4. cspell spell check
  5. Repository structure validation

All checks must pass before merging.


📦 Deployment

Production deployment is handled via Coolify using the stack defined in:

stacks/production/

The application is deployed under:


🎤 Conference Context

This project is used as a live case study in the talk:

EN: “Are Frontend Developers at Risk? AI Is Already Writing HTML for Us…”

PL: „Czy programiści frontendu są zagrożeni? AI już pisze HTML za nas…”

The repository intentionally exposes the entire AI-assisted process, including mistakes, refinements, and architectural decisions.


📜 License

MIT — feel free to reuse the ideas, structure, and workflow.


🤝 Contributing

This is a personal project, but issues and discussions are welcome — especially around:

  • AI-assisted development workflows
  • frontend architecture
  • developer experience
  • security-by-design

🧠 Author

Łukasz Piotr Łuczak Software Architect • Consultant • Researcher • Speaker Managing Partner @ Luczak Consulting

About

Bilingual (EN/PL) digital business card + contact API — a reproducible AI-assisted delivery case study

Topics

Resources

License

Contributing

Security policy

Stars

Watchers

Forks

Sponsor this project

  •  

Contributors 2

  •  
  •