Network Setup

Overview

PhotoFlow is designed to work in offline network environments where multiple PCs need to access the same photography order management system. This guide explains how to set up the server-client architecture for your team.

The Problem PhotoFlow Solves

Many photography studios face these challenges:

No internet access - Working in environments without internet connectivity
Multiple workstations - Team members working from different PCs
Synchronization issues - Excel/spreadsheet conflicts when multiple users edit simultaneously
Real-time updates - Need to see changes immediately without manual refreshing

PhotoFlow solves this using a client-server architecture with Socket.io for real-time sync.

Architecture

Server PC

One PC runs the PhotoFlow server:

Hosts the application
Runs the PostgreSQL database
Handles all data operations
Broadcasts updates via Socket.io

Client PCs

Other PCs connect as clients:

Access via web browser
Send requests to server
Receive real-time updates
No local database needed

Real-Time Sync

Socket.io keeps all PCs synchronized:

Changes made on any PC
Saved to central database
Broadcast to all clients
All PCs update automatically

┌───────────────────────────┐
│     Local Network (Offline)    │
│                                │
│  ┌────────────────────┐  │
│  │   Server PC          │  │
│  │   - PhotoFlow App    │  │
│  │   - PostgreSQL       │  │
│  │   - Socket.io        │  │
│  │   192.168.1.100      │  │
│  └────────────────────┘  │
│           │                   │
│           │                   │
│  ┌────────┼───────────┐  │
│  │        │           │  │
│  v        v           v  │
│ PC 1    PC 2       PC 3  │
│ (Web Browser Access)      │
└───────────────────────────┘

No internet connection required! All communication happens within your local network.

Server Setup

Configure the PC that will act as the server:

Choose Server PC

Select a PC that:

Will remain powered on during work hours
Has adequate resources (see Requirements)
Is accessible to all team PCs on the network
Has a static or consistent IP address (recommended)

Find Server IP Address

Determine the server’s IP address:

Windows
Linux
macOS

ipconfig

Look for “IPv4 Address” under your active network adapter.

ip addr show
# or
ifconfig

Look for “inet” address (e.g., 192.168.1.100).

ifconfig

Look for “inet” under your active interface (en0, en1, etc.).

Your server IP will typically be in one of these ranges:

192.168.x.x (most common for home/office networks)
10.x.x.x
172.16.x.x - 172.31.x.x

Configure Static IP (Recommended)

Set a static IP to prevent the server address from changing:Router method (preferred):

Access your router’s admin interface
Find DHCP settings
Reserve the IP for your server’s MAC address

OS method: Configure static IP in network settings:

Windows: Network Settings → Change adapter options
Linux: Edit /etc/netplan/ or /etc/network/interfaces
macOS: System Preferences → Network → Advanced

Configure Firewall

Allow incoming connections on PhotoFlow’s port:

Windows
Linux (ufw)
Linux (firewalld)
macOS

netsh advfirewall firewall add rule name="PhotoFlow" dir=in action=allow protocol=TCP localport=4173

Or use Windows Firewall GUI:

Open Windows Defender Firewall
Advanced Settings → Inbound Rules
New Rule → Port → TCP 4173

sudo ufw allow 4173/tcp
sudo ufw reload

sudo firewall-cmd --permanent --add-port=4173/tcp
sudo firewall-cmd --reload

Default port is 4173 for production build. Use 5173 for development mode, or 3000 if configured in Docker.

Start PhotoFlow with Network Access

Launch PhotoFlow with the --host flag:

npm run preview -- --host

You should see:

➜  Local:   http://localhost:4173/
➜  Network: http://192.168.1.100:4173/

The --host flag is REQUIRED for network access. Without it, only the server PC can access PhotoFlow.

Configure Socket.io URL

Set the Socket.io connection URL in .env:

.env

VITE_SOCKET_URL="http://192.168.1.100:4173"

Replace 192.168.1.100 with your actual server IP.Then rebuild:

npm run build
npm run preview -- --host

Client Setup

Configure PCs that will access PhotoFlow as clients:

Verify Network Connection

Ensure the client PC is on the same network as the server.Test connectivity:

ping 192.168.1.100

You should see successful ping responses.

Access PhotoFlow

Open a web browser and navigate to:

http://192.168.1.100:4173

Replace 192.168.1.100 with your server’s IP.

Bookmark the URL

Save the URL as a bookmark for easy access.

Create a desktop shortcut:

Chrome/Edge: More Tools → Create Shortcut
Firefox: Drag URL to desktop

Verify Real-Time Sync

Test that updates sync correctly:

Create a task on the client PC
Check the server PC - task should appear immediately
Move a task on the server PC
Check the client PC - it should update without refresh

Network Requirements

Same Network

All PCs must be connected to the same local network (same router/switch).

TCP/IP

PCs must be able to communicate via TCP/IP (standard for all networks).

No Internet Required

PhotoFlow works completely offline - no internet connection needed.

Port Access

Port 4173 (or configured port) must be accessible on the server PC.

Testing Network Setup

Connectivity Test

From a client PC:

# Test if server is reachable
ping 192.168.1.100

# Test if port is open (requires telnet)
telnet 192.168.1.100 4173

# Or use curl
curl http://192.168.1.100:4173

Browser Test

Open browser on client PC
Navigate to http://[server-ip]:4173
Should see PhotoFlow dashboard
Check browser console (F12) for errors

Real-Time Sync Test

Open Two Windows

Open PhotoFlow in two different browsers or PCs.

Create Task

Create a new task in one window.

Verify Sync

The task should appear in the other window within 1-2 seconds without refreshing.

Test Drag-Drop

Drag a task to a different column in one window. Verify it moves in the other window automatically.

If sync doesn’t work, check Socket.io connection in browser console.

Troubleshooting

Can't access from client PC

Verify server PC IP address hasn’t changed
Check server PC is running PhotoFlow with --host
Test connectivity: ping [server-ip]
Verify firewall allows port 4173
Ensure both PCs are on same network/subnet
Try accessing from server PC first: http://localhost:4173

Real-time sync not working

Check VITE_SOCKET_URL in .env on server
Verify URL uses server IP, not “localhost”
Rebuild after changing .env: npm run build
Check browser console for Socket.io errors
Test WebSocket connection isn’t blocked by proxy/firewall

Connection drops frequently

Check network stability (weak WiFi signal?)
Verify no network equipment is blocking WebSocket
Check server PC isn’t going to sleep
Review server logs for errors

Slow performance on clients

Check network bandwidth/speed
Verify server PC has adequate resources
Reduce number of concurrent users
Consider upgrading server hardware
Check for network congestion

Different subnets

If PCs are on different subnets (e.g., 192.168.1.x and 192.168.2.x):

Configure router to allow inter-subnet routing
Or connect all PCs to same subnet
Verify firewall rules allow cross-subnet traffic

Security Considerations

Trusted Network Only

Only deploy on trusted internal networks. PhotoFlow doesn’t include authentication by default.

Firewall Configuration

Restrict port access to your local network only. Don’t expose to the internet.

Database Security

Use strong database passwords. Don’t use defaults in production.

Physical Security

Secure physical access to the server PC. It contains all business data.

PhotoFlow is designed for trusted internal networks. Don’t expose it to the internet without adding proper authentication and HTTPS.

Advanced Configuration

Using a Different Port

Change the port in package.json or use the flag:

npm run preview -- --port 3000 --host

Update firewall and VITE_SOCKET_URL accordingly.

Multiple Server Instances

For redundancy, you could run multiple instances:

Primary server on PC 1
Backup server on PC 2
Switch DNS/hosts file if primary fails

This requires additional configuration for database replication, which is beyond PhotoFlow’s default setup.

Load Balancing

For very large teams (20+ users):

Use a reverse proxy (nginx/HAProxy)
Balance load across multiple app instances
Use a shared PostgreSQL database
Configure Socket.io for clustering

Network Diagram Example

Office Network: 192.168.1.0/24

┌──────────────────────────────────────┐
│  Router (192.168.1.1)                    │
│  - No internet connection                │
│  - DHCP: 192.168.1.100-200               │
└──────────────────────────────────────┘
              │
     ┌────────┼────────────┐
     │        │             │
     v        v             v

  Server   Client 1    Client 2
   PC       PC          PC

.100:4173  Browser     Browser
PhotoFlow  Access      Access
+ Database

Next Steps

Environment Variables

Configure VITE_SOCKET_URL and other settings

Production Checklist

Security and performance best practices

Kanban Board

Learn about real-time synchronization features

Docker Deployment

Deploy with containers for easier management

Get Started

Installation

Core Features

Configuration

Deployment

Overview

The Problem PhotoFlow Solves

Architecture

Server Setup

Client Setup

Network Requirements

Same Network

TCP/IP

No Internet Required

Port Access

Testing Network Setup

Connectivity Test

Browser Test

Real-Time Sync Test

Troubleshooting

Security Considerations

Trusted Network Only

Firewall Configuration

Database Security

Physical Security

Advanced Configuration

Using a Different Port

Multiple Server Instances

Load Balancing

Network Diagram Example

Next Steps

Environment Variables

Production Checklist

Kanban Board

Docker Deployment

Build docs developers (and LLMs) love

Get Started

Installation

Core Features

Configuration

Deployment

​Overview

​The Problem PhotoFlow Solves

​Architecture

​Server Setup

​Client Setup

​Network Requirements

Same Network

TCP/IP

No Internet Required

Port Access

​Testing Network Setup

​Connectivity Test

​Browser Test

​Real-Time Sync Test

​Troubleshooting

​Security Considerations

Trusted Network Only

Firewall Configuration

Database Security

Physical Security

​Advanced Configuration

​Using a Different Port

​Multiple Server Instances

​Load Balancing

​Network Diagram Example

​Next Steps

Environment Variables

Production Checklist

Kanban Board

Docker Deployment

Build docs developers (and LLMs) love

Overview

The Problem PhotoFlow Solves

Architecture

Server Setup

Client Setup

Network Requirements

Testing Network Setup

Connectivity Test

Browser Test

Real-Time Sync Test

Troubleshooting

Security Considerations

Advanced Configuration

Using a Different Port

Multiple Server Instances

Load Balancing

Network Diagram Example

Next Steps