Skip to main content

​
Get Started in Minutes

This guide will help you set up PhotoFlow from scratch and create your first task. By the end, you’ll have a fully functional Kanban board running on your local machine.
This quickstart focuses on local development. For production deployment, see the Docker deployment guide.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (version 20 or higher) - Download here
  • PostgreSQL (version 15 or higher) - Required for data storage
  • Git - For cloning the repository

​
Installation Steps

1

Clone the Repository

Clone PhotoFlow to your local machine:
git clone https://github.com/DomenicWalther/PhotoFlow.git
cd PhotoFlow
If you prefer not to use Git:
  1. Visit the PhotoFlow GitHub repository
  2. Click the green “Code” button
  3. Select “Download ZIP”
  4. Extract the ZIP file to your desired location
  5. Navigate to the extracted folder in your terminal
2

Install Dependencies

Install all required Node.js packages:
npm install
This will install all dependencies including:
  • SvelteKit framework
  • Prisma ORM
  • Socket.io for real-time sync
  • All UI components and utilities
3

Configure Database

Create a .env file in the project root with your PostgreSQL connection string:
.env
DATABASE_URL="postgresql://photoflow:photoflow_password@localhost:5432/photoflow"
Make sure PostgreSQL is running and the database user has appropriate permissions to create databases and tables.
Adjust the connection string based on your PostgreSQL setup:
  • photoflow - database username
  • photoflow_password - database password
  • localhost:5432 - database host and port
  • photoflow - database name
4

Initialize Database

Create the database schema using Prisma migrations:
npx prisma migrate dev --name init
This command will:
  • Create the photoflow database if it doesn’t exist
  • Generate the database schema (tasks and comments tables)
  • Create the Prisma client for type-safe database access
If you see a success message, your database is ready to go!
5

Build the Application

Build PhotoFlow for production:
npm run build
This compiles your SvelteKit application and optimizes it for performance.
6

Start PhotoFlow

Launch the application with network access enabled:
npm run preview -- --host
The --host flag is crucial - it allows other PCs on your network to access PhotoFlow. Without it, only your local machine can use the application.
You should see output similar to:
➜  Local:   http://localhost:4173/
➜  Network: http://192.168.1.100:4173/
7

Access PhotoFlow

Open your web browser and navigate to:
http://localhost:4173
You should see the PhotoFlow dashboard with an empty Kanban board!
Other PCs on your network can access PhotoFlow using the Network URL (e.g., http://192.168.1.100:4173)

​
Create Your First Task

Now that PhotoFlow is running, let’s create your first task:
1

Navigate to Dashboard

On the main page, you’ll see the Kanban board with default columns.
2

Add a Task

Click the ”+ Neue Aufgabe hinzufügen” (Add New Task) button in any column.
3

Fill Task Details

In the modal that appears, enter:
  • Task name - e.g., “Wedding Photography - Smith Family”
  • Description - Additional details about the order
  • Due date - When the task should be completed
  • Status - Current status of the task
4

Save and View

Click save, and your task will appear in the Kanban column. You can now:
  • Drag the task between columns
  • Click to edit details
  • Add comments for collaboration

​
Development Mode (Optional)

If you want to modify PhotoFlow and see changes in real-time: 
npm run dev
This starts the development server with hot module replacement. Changes to your code will automatically refresh in the browser.

​
Verify Real-Time Sync

To test Socket.io synchronization:
  1. Open PhotoFlow in two different browser windows
  2. Create or move a task in one window
  3. Watch it update automatically in the other window - no refresh needed!

​
Next Steps

Explore the Kanban Board

Learn about drag-and-drop workflows and column management

Configure Network Setup

Set up multi-PC access for your team

Import Existing Data

Migrate your existing orders via CSV import

Deploy with Docker

Set up a production-ready environment

​
Troubleshooting

Ensure PostgreSQL is running:
# On macOS with Homebrew
brew services start postgresql

# On Ubuntu/Debian
sudo systemctl start postgresql
Verify your DATABASE_URL in .env matches your PostgreSQL configuration.
Another application is using port 4173. Either:
  • Stop the other application
  • Change the port in svelte.config.js
  • Use a different port: npm run preview -- --port 3000 --host
Make sure you:
  • Used the --host flag when starting the server
  • Have the correct Network URL (shown in terminal output)
  • Your firewall allows incoming connections on port 4173
If migrations fail:
# Reset the database (WARNING: deletes all data)
npx prisma migrate reset

# Then run migrations again
npx prisma migrate dev --name init

​
Getting Help

If you encounter issues not covered here:

Build docs developers (and LLMs) love

Get started for freeTalk to us