ArchViz Studio

ArchViz Studio is a deployment-ready interior design concept generator for architecture and construction interviews.

It demonstrates:

• A Next.js frontend with a polished, product-first interface
• A FastAPI backend that builds structured render prompts
• Replicate-based image generation through the HTTP API
• Practical construction metrics such as area and rough cost estimates
• Vercel and Render deployment paths that match real production workflows

Repo layout

• frontend/ Next.js app for the user experience
• backend/ FastAPI service for prompt generation and model calls
• scripts/dev.sh one-command local runner for both services
• .github/workflows/ci.yml GitHub Actions build validation

Local development

Backend:

cd backend
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt
cp -n .env.example .env
# set REPLICATE_API_TOKEN in backend/.env
uvicorn main:app --reload --host 0.0.0.0 --port 8000

Frontend:

cd frontend
npm install
cp -n .env.example .env.local
echo 'NEXT_PUBLIC_API_URL=http://localhost:8000' > .env.local
npm run dev

One-command local runner:

bash scripts/dev.sh

Smoke test:

bash scripts/smoke.sh

To include the sample /generate call as well:

RUN_GENERATE=1 bash scripts/smoke.sh

Deployment

Backend on Render

• Root directory: backend
• Build command: pip install -r requirements.txt
• Start command: uvicorn main:app --host 0.0.0.0 --port 10000
• Environment variables:
  • REPLICATE_API_TOKEN
  • ALLOWED_ORIGINS set to your Vercel URL

The backend/render.yaml file mirrors this setup.

Frontend on Vercel

• Root directory: frontend
• Build command: npm run build
• Output: default Next.js app route
• Environment variable:
  • NEXT_PUBLIC_API_URL pointing to your Render backend URL

Deployment sequence

1. Deploy backend to Render and confirm /health works.
2. Deploy frontend to Vercel with the backend URL set in env vars.
3. Open the frontend, submit a room spec, and verify the image and cost panel.

Useful checks

curl http://localhost:8000/health

cd frontend && npm run lint && npm run build

cd backend && . venv/bin/activate && python -m compileall app main.py

Interview notes

• The UI is intentionally product-like instead of a generic demo screen.
• The backend keeps prompt logic isolated from the frontend.
• The app includes cost awareness, which gives it construction context.
• Deployment mirrors a realistic split between Vercel and Render.