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
This repository documents an AI coding experiment conducted for the conference talk:
"Are Frontend Developers at Risk? AI Is Already Writing HTML for Us…"
- 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 ☕
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.
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
- Personal branding & thought leadership
- Conference networking
- Client acquisition
- Collaboration & recruitment
- Demonstrating AI-assisted software engineering best practices
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.
/
├─ 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
- Astro
- Tailwind CSS 4.1
- Semantic HTML, minimal JavaScript
- Light / Dark mode
- Full EN / PL i18n
- NestJS
- Contact form API
- Security controls (rate-limit, honeypot, GDPR-compliant captcha)
- Astro served as middleware
- Docker / Podman agnostic
- Coolify deployment
- ESLint, Prettier, cspell
- Conventional Commits
- Git hooks & CI checks
- Dev Container + VS Code workspace
- No analytics
- No tracking
- No cookies
- GDPR-aware by design
- Minimal data collection
- Structured input validation
- Secure headers and CSP
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.
- Node.js 20+ (LTS)
- pnpm 9+ (package manager)
- Docker or Podman (optional, for Dev Container)
- VS Code (recommended, for workspace configuration)
This method provides a fully configured development environment with all tools pre-installed:
- Open the repository in VS Code
- Install the Dev Containers extension if not already installed
- Press
Cmd+Shift+P(Mac) orCtrl+Shift+P(Windows/Linux) - Select "Dev Containers: Reopen in Container"
- 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
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# 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 devThe dev server runs from TypeScript source files and automatically recompiles on changes.
# 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 startNote: 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.
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 startSee .env.example for all available configuration options.
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 .githooksTo skip hooks temporarily:
SKIP_HOOKS=true git commit -m "message"This repository enforces strict quality gates from day one:
pnpm run lint # ESLint validation
pnpm run format # Prettier format check
pnpm run spell # cspell spell check
pnpm run validate # Run all checksAll 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.
On every push and pull request, GitHub Actions runs:
- Install dependencies (pnpm with caching)
- ESLint validation
- Prettier format check
- cspell spell check
- Repository structure validation
All checks must pass before merging.
Production deployment is handled via Coolify using the stack defined in:
stacks/production/
The application is deployed under:
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.
MIT — feel free to reuse the ideas, structure, and workflow.
This is a personal project, but issues and discussions are welcome — especially around:
- AI-assisted development workflows
- frontend architecture
- developer experience
- security-by-design
Łukasz Piotr Łuczak Software Architect • Consultant • Researcher • Speaker Managing Partner @ Luczak Consulting
- Website: https://lukasz.luczak.org
- LinkedIn: https://www.linkedin.com/in/lukaszpiotrluczak/
- GitHub: https://github.com/lukaszpiotrluczak