Development Setup

git clone https://github.com/your-username/picpeak.git
cd picpeak

cd backend && npm install
cd ../frontend && npm install

cp .env.example .env
# Edit .env with development values

docker compose up

# Backend (from /backend)
npm run dev    # Starts with nodemon for hot reload
 
# Frontend (from /frontend)
npm run dev    # Starts Vite dev server

Project structure

• picpeak
  • backend
    • src
    • migrations
    • server.js
    • knexfile.js
  • frontend
    • src
    • App.tsx

Architecture overview

Backend

• Entry point: server.js --- Express app with Helmet, CORS, rate limiting, and JWT middleware.
• Routes (src/routes/): 20+ route files covering auth, admin operations, gallery access, and feedback.
• Services (src/services/): Business logic including image processing (Sharp), video processing (FFmpeg), email queue, backup service, and file watching.
• Database: Knex query builder with PostgreSQL (primary) and SQLite (fallback). Migrations in migrations/core/.

Frontend

• Entry: App.tsx --- React Router + TanStack Query + context providers for auth, theme, and maintenance mode.
• Components: admin/ (43 components), gallery/ (23 components), common/ (shared UI).
• API client (src/config/api.ts): Axios with interceptors for auth token injection and error handling.
• i18n: i18next with EN and DE locales in src/i18n/locales/.

Infrastructure

Development commands

Backend (from /backend)

npm run dev              # Hot reload with nodemon
npm run start            # Production start
npm run test             # Run Jest tests
npm run test -- --watch  # Watch mode
npm run test -- path/to/test.js  # Single test
npm run lint             # ESLint
npm run migrate          # Run database migrations
npm run migrate:safe     # Migrations with safety checks

Frontend (from /frontend)

npm run dev          # Vite dev server
npm run build        # Production build
npm run build:check  # TypeScript check + build
npm run lint         # ESLint
npm run test         # Vitest tests
npm run preview      # Preview production build

E2E tests (from root)

npm run test:e2e     # Playwright (Desktop and Mobile Chrome)

Key patterns

• JWT tokens have types (admin, gallery, refresh). Middleware validates the token type matches the endpoint.
• Gallery auth is slug-specific. Tokens are stored in session storage by slug.
• Photos are served through authenticated endpoints with access control.
• Image processing uses Sharp. Video processing uses FFmpeg (bundled via npm).