Draw&Puzzle

Draw&Puzzle is a web application for creating, sharing, and playing jigsaw-style puzzles. Users can browse existing puzzles, draw their own artwork, turn it into a puzzle, and then play it directly in the browser.

The project is split into a React frontend and an Express backend with a Prisma/MySQL database.

Overview

Draw&Puzzle supports the main puzzle workflow from creation to play:

• user registration and login
• browsing public puzzles on the home page
• filtering and searching puzzles
• creating custom drawings in the built-in drawing editor
• generating puzzle pieces from drawings or images
• playing puzzles with drag-and-drop interaction
• saving puzzle/game state in the database

Tech Stack

• Frontend: React, TypeScript, React Router, Material UI, dnd-kit
• Backend: Node.js, Express, TypeScript
• Database: MySQL with Prisma ORM
• Image/puzzle processing: Python helper scripts used by the backend

Project Structure

.
├── backend/      # Express API, Prisma schema, seeds, puzzle generation utilities
├── frontend/     # React application
└── doc/          # Project documentation and design documents

Prerequisites

Make sure you have the following installed:

• Node.js and npm
• MySQL
• Python 3

Backend Setup

1. Go to the backend folder:

cd backend

2. Install dependencies:

npm install

3. Create and activate a Python virtual environment for the backend helper scripts:

python3 -m venv venv
source venv/bin/activate

4. Install the Python packages used by the image and puzzle generation scripts:

pip install -r requirements.txt

Keep this virtual environment active in the same terminal where you start the backend. The backend calls Python scripts for image resizing, merging, transparent image creation, and puzzle piece generation.

5. Create a .env file in backend/ and set the database connection string:

DATABASE_URL="mysql://USER:PASSWORD@localhost:3306/draw_puzzle"
JWT_SECRET="your-secret-key"

Replace USER, PASSWORD, and the database name with your local MySQL setup. JWT_SECRET is used by the backend to sign and verify login tokens, so use any private string for local development.

6. Run database migrations and seed the database:

npx prisma migrate dev
npx prisma db seed

7. Start the backend server from the terminal where the virtual environment is active:

npm run dev

The backend runs on:

http://localhost:5050

Frontend Setup

Open a second terminal and run:

cd frontend
npm install
npm start

The frontend runs on:

http://localhost:3000

API requests from the frontend are proxied to the backend through /api.

Useful Commands

Backend:

npm run dev          # start backend in development mode
npm run db:reset     # reset the database
npm run db:refresh   # reset and seed the database

Frontend:

npm start            # start React development server
npm run build        # create production build

Notes

• Uploaded and generated images are stored in backend/uploads/.
• Seed images are stored in backend/prisma/seeds/images/.
• The backend expects MySQL to be running before Prisma commands or the API server are started.