Nonograms

A browser-based Nonogram / Picross puzzle app built with React and Vite.

It lets you:

• browse saved puzzles
• create puzzles manually
• generate puzzles from photos
• solve puzzles from row/column clues
• play puzzles in a clean, interactive grid

All puzzle data is stored locally in the browser.

Features

Browse puzzles

• View all saved puzzles as cards with a grid thumbnail
• Filter by puzzle size
• Search by puzzle name
• Click a card to open it in Play mode

Create puzzles manually

• Pick a puzzle name and grid size
• Draw the solution on an editable grid
• Save the puzzle with generated clues

Create puzzles from photos

• Upload an image
• Adjust the brightness threshold
• Preview the processed image
• Generate and save a nonogram puzzle from the photo

Solve puzzles from clues

• Enter row and column clues
• Generate a solution grid
• Review unknown cells that require guessing
• Save the solved puzzle

Play puzzles

• Open a saved puzzle and solve it interactively
• Left click to fill a cell
• Right click or Shift+click to mark a cell as empty
• Check your solution and reset progress

Authentication

• Login/register flow is included
• Session state is stored locally in the browser
• This is a lightweight app-level auth system, not a backend identity provider

Tech stack

• React 19
• React Router
• Vite
• Tailwind CSS
• Browser localStorage for puzzle and session persistence

Getting started

Prerequisites

• Node.js 18+ recommended
• npm

Install

npm install

Run locally

npm run dev

Then open the local Vite URL shown in the terminal.

Build for production

npm run build

Preview the production build

npm run preview

Project structure

src/
  App.jsx                 # App routing and layout
  components/
    auth/                 # Login screen
    browse/                # Puzzle library
    create/                # Manual puzzle creation
    photo/                 # Photo-to-puzzle workflow
    play/                  # Puzzle gameplay
    solve/                 # Clue-based solver UI
    layout/                # Navbar and sidebar
    shared/                # Reusable UI components
  context/                # Auth, storage, notification providers
  lib/                    # Nonogram, solver, storage, photo processing helpers

Notes

• Puzzle data is saved in localStorage, so clearing browser data will remove saved puzzles.
• Photo-to-puzzle generation depends on image thresholding, so results may vary by image.
• The app is currently designed as a single-user local experience.

Helpful files

• QUICK-REFERENCE.md - short gameplay and feature guide
• load-sample-puzzles.html - utility for generating sample puzzles
• test-solver.html - solver test page
• generate-sample-puzzles.js - sample puzzle generator script

License

No license file is currently included.