RU EN
← Other projects

printacopy

Development Diary

About the project

Pain: need to quickly print something, but no printer nearby. Setting up a printer for one page is not cost-effective. Meanwhile, there are plenty of places around with almost unused printers — in offices, coworking spaces, cafes, with private individuals.

Hence the idea: connect those who need to print with those who have a printer.

What's next?

First thought about an app and complex system with registration, but quickly came to the understanding that this is excessive.

Main thing now — check demand and collect database.

So the idea simplified to landing page with form, where you can leave contacts:

Read more

Current implementation at: https://printacopy.pages.dev

Table of Contents

Stage 2: Email Integration and Additional Features

What was needed

After creating basic landing page, needed to add:

  • Multilingual support (Russian, English, German)
  • City autocomplete
  • Email integration for sending confirmations
  • UX improvements (favicon, language switcher)

Solution

1. Multilingual Support

Added support for three languages (DE/EN/RU) with automatic language detection by:

  • URL parameter (?lang=de)
  • Saved settings in localStorage
  • Browser language
  • IP address (via ipapi.co)
Language switcher (EN)
Language switcher (EN)
Language switcher (RU)
Language switcher (RU)

2. City Autocomplete

Added directory of 80+ German cities with autocomplete on input. Default city set to "Konstanz".

City autocomplete (EN)
City autocomplete (EN)
City autocomplete (RU)
City autocomplete (RU)

3. Email Integration via Cloudflare Worker + Resend

Implemented email confirmation sending via Cloudflare Worker using Resend API:

  • In test mode, all emails go to admin email
  • Admin receives notifications about new registrations with all data for table
  • User sees alert: "We received your email and will contact you"
Email form (EN)
Email form (EN)
Email form (RU)
Email form (RU)

4. Additional Improvements

  • Added favicon (SVG with letter "P")
  • Updated German translations (using "du" and impersonal forms)
  • Added dynamic page title depending on language

Why this solution

  • Cloudflare Worker + Resend: Simple setup, free limit 3,000 emails/month, no domain needed for test mode
  • Multilingual via URL parameters: Simple solution without server logic, easy to test and deploy
  • Autocomplete via datalist: Native HTML solution, no external libraries needed

Pros

  • ✅ Full multilingual support without additional dependencies
  • ✅ Working email integration (test mode)
  • ✅ Improved UX (autocomplete, favicon, language switcher)
  • ✅ Automatic user language detection
  • ✅ All data saved for subsequent manual mailing

Cons

  • ❌ In test mode Resend emails are not sent to users (only to admin)
  • ❌ For production need to verify domain in Resend
  • ❌ No automatic mailing to users (need manual)

Gotchas

  • Resend in test mode limits sending only to verified email
  • Solution: all emails go to admin for now, who collects data in table for manual mailing
  • IP language detection may be inaccurate, so cascade used: URL → localStorage → browser → IP → default (DE)

What was done

  • Added support for three languages (DE/EN/RU)
  • Implemented language switcher (dropdown)
  • Added automatic language detection
  • Implemented city autocomplete (80+ German cities)
  • Set "Konstanz" as default city
  • Integrated Cloudflare Worker for email sending
  • Configured Resend API for sending emails
  • Added favicon
  • Updated translations (German to "du"/impersonal forms)
  • Dynamic page title
← Previous stage: Stage 2: Email Integration and Additional Features

Stage 1: Creating Static Landing Page

What was needed

Needed to create a simple static landing site that sells the service idea to both sides (users and printer owners).

Solution

Created single-page landing with 4 main blocks:

  • Header with call to action and two buttons
Main page (RU)
Main page (RU)
Main page (EN)
Main page (EN)
  • User block (form: city + email + file upload)
User section (RU)
User section (RU)
User section (EN)
User section (EN)
  • Printer owner block (form: name + email + city + color printer checkbox)
Printer section (RU)
Printer section (RU)
Printer section (EN)
Printer section (EN)
  • "How it works" block with simple process diagram
How it works (RU)
How it works (RU)
How it works (EN)
How it works (EN)

Mobile version:

Mobile view (RU)
Mobile view (RU)
Mobile view (EN)
Mobile view (EN)

Why this solution

  • Static site without dependencies — fast loading and simple deployment
  • Vanilla JavaScript and CSS — no build process needed, can open file directly
  • LocalStorage for storing form data — allows testing functionality without backend
  • Responsive design — works on all devices
  • Modern UI with gradients and animations — attractive appearance

Pros

  • ✅ Fast development and deployment
  • ✅ No dependencies, no build process
  • ✅ Can open file directly in browser for testing
  • ✅ Easy to customize and modify
  • ✅ Good performance (small file size)

Cons

  • ❌ Form data stored only locally (in browser LocalStorage)
  • ❌ No real data sending to server
  • ❌ No server-side validation
  • ❌ No spam protection

Gotchas

  • Considered that this is MVP for demonstrating idea, not full product
  • Forms work "fake" — show alert and save to LocalStorage
  • Will need to add backend for real data processing in future
  • Made responsive design from start to avoid redoing later

What was done

  • Created single-page landing (index.html)
  • Implemented all 4 blocks according to requirements
  • Added two working forms (for users and printer owners)
  • Implemented responsive design for mobile devices
  • Added smooth scrolling to sections
  • Forms save data to LocalStorage (demo mode)
  • Modern UI with gradients and animations