PhotoMatic — Online Photobooth

Browser-based photobooth emulator with a retro movie-theater feel. Capture webcam photos, compose a classic strip, download PNG/JPEG or a print-ready PDF. Fully client-side.

Run locally

cd /Users/tanokri/Desktop/Photobooth
npm install
npm run dev

Then open http://localhost:5173 in Chrome or Safari.

Camera access requires a secure context. localhost works. For phones on your LAN, use the network URL Vite prints (or deploy over HTTPS).

Scripts

Command	Description
npm run dev	Local development server
npm run build	Production build
npm run preview	Preview production build

Flow

Sharing with friends (GitHub Pages — free)

Your live URL will be:

https://tanokri02.github.io/PhotoMatic/

What to push

Push the source project, not install/build junk:

Push	Do not push
src/, index.html, config files	node_modules/
package.json, package-lock.json	dist/
.github/workflows/	.env / secrets
README.md, .gitignore	nested .git folders

.gitignore already excludes node_modules and dist. GitHub Actions builds the site on every push to main.

Steps

1. Commit and push this repo to main on https://github.com/Tanokri02/PhotoMatic.
2. On GitHub: Settings → Pages.
3. Under Build and deployment, set Source to GitHub Actions.
4. Open the Actions tab, wait for Deploy to GitHub Pages to finish (green check).
5. Visit https://tanokri02.github.io/PhotoMatic/ and allow camera access.
6. Share that HTTPS link with friends.

Camera APIs require HTTPS. GitHub Pages provides that for free.

Local note

vite.config.ts sets base: '/PhotoMatic/' so assets load correctly on Pages. Local npm run dev still works the same.