Improvement on local dev exp (#22)

Dockerfile.dev

@@ -0,0 +1,23 @@
+# syntax = docker/dockerfile:1
+
+# Use a specific Node.js version suitable for your project
+FROM node:22
+
+# Set the working directory
+WORKDIR /app
+
+# Copy only package.json and package-lock.json first for dependency installation
+COPY package*.json ./
+COPY prisma/ ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the project files
+COPY . .
+
+# Expose the development server port
+EXPOSE 3000
+
+# Set default command
+CMD ["npm", "run", "dev"]

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2024-2025 Owen Ou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,36 +1,62 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# jqplay
+
+A [jq](https://jqlang.github.io/jq) playground built with [Next.js](https://nextjs.org).
+Test your jq queries against JSON directly in your browser. All jq queries and HTTP requests to fetch JSON are processed **locally** in your browser. Snippets are sent to the server **only** if you choose to share them.
+
+✨ **Try it out at [jqplay.org](https://jqplay.org)!**
+
+## How It Works
+
+- **WebAssembly-Powered**: jqplay integrates the [jq-wasm](https://github.com/owenthereal/jq-wasm) package, a WebAssembly-based jq JSON processor for Node.js and browsers, with no native dependencies. This ensures that all jq queries run directly in your browser.
+- **Local Data Processing**: Your JSON input is processed locally in your browser, ensuring your data stays private and secure.
+- **Shareable Snippets**: If you share your jq query, a unique URL is generated on the server. Others can open the shared snippet, but the query will still run locally in their browser.
 
 ## Getting Started
 
-First, run the development server:
+Prerequisites
+
+- Node.js (>= 14.x recommended)
+- npm or yarn package manager
+- PostgreSQL (for storing shared snippets)
+
+## Running the App
+
+### 1. Clone the repository
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+```console
+git clone https://github.com/owenthereal/jqplay
+cd jqplay
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### 2. Start in Development Mode
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+To start the app in development mode with hot reload enabled and a local PostgreSQL database:
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+```console
+docker compose up
+```
+
+Open your browser to <http://localhost:3000> to explore jqplay.
+
+### 3. Run a Production Build
+
+For a production-ready build, use:
+
+```console
+npm run build
+npm run start
+```
 
-## Learn More
+Open your browser to <http://localhost:3000> to use jqplay locally in production mode.
 
-To learn more about Next.js, take a look at the following resources:
+## Contributing
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Contributions are welcome! 🎉 Whether you’re fixing bugs, adding features, or improving documentation, your help is appreciated.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## License
 
-## Deploy on Vercel
+📜 jqplay is licensed under the [MIT License](LICENSE).
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+---
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Happy querying! 🚀

compose.yaml

@@ -0,0 +1,38 @@
+version: '3.8'
+services:
+  jqplay:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    container_name: jqplay
+    environment:
+      NODE_ENV: development
+      DATABASE_URL: postgres://postgres:postgres@pg:5432/jqplay
+    command: >
+      sh -c "npx prisma migrate dev && npm run dev"
+
+    ports:
+      - "3000:3000"
+    depends_on:
+      pg:
+        condition: service_healthy
+    volumes:
+      - .:/app
+      - /app/node_modules
+      - /app/.next
+    restart: unless-stopped
+  pg:
+    image: postgres:16
+    container_name: pg
+    restart: always
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: jqplay
+    ports:
+      - "5432:5432"
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 5s
+      timeout: 5s
+      retries: 5

components/JSONEditor.tsx → src/components/JSONEditor.tsx

@@ -2,7 +2,6 @@ import { HttpMethodType, HttpType } from '@/workers/model';
 import Editor from './Editor';
 import HTTP from './HTTP';
 import TabList from './TabList';
-import { useState } from 'react';
 
 interface JSONEditorProps {
     json?: string;

components/SectionTitle.tsx → src/components/SectionTitle.tsx

@@ -1,5 +1,4 @@
-import { Box, Typography, useTheme, IconButton } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
+import { Box, Typography, useTheme } from '@mui/material';
 import { useDarkMode } from './ThemeProvider';
 
 interface SectionTitleProps {

components/ThemeProvider.tsx → src/components/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useState, ReactNode, useEffect, FC } from 'react';
-import { ThemeProvider as MuiThemeProvider, createTheme, Theme } from '@mui/material/styles';
+import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
 
 interface ThemeContextType {
     darkMode: boolean;

workers/index.ts → src/workers/index.ts

@@ -1,7 +1,6 @@
 import * as Comlink from "comlink";
 import type { WorkerInterface } from "./process";
 import { worker } from "./worker";
-import { z } from 'zod';
 import { Snippet, SnippetType } from "./model";
 
 export class JQWorker {
@@ -22,7 +21,7 @@ export class JQWorker {
 
     private initializeWorker(): void {
         try {
-            this.#webWorker = new Worker(new URL("/workers/process.ts", import.meta.url), { type: "module" });
+            this.#webWorker = new Worker(new URL("/src/workers/process.ts", import.meta.url), { type: "module" });
             this.#worker = Comlink.wrap<WorkerInterface>(this.#webWorker);
         } catch (error) {
             console.error("Failed to initialize Web Worker:", error);

tailwind.config.ts

@@ -3,9 +3,9 @@ import type { Config } from "tailwindcss";
 const config: Config = {
   darkMode: 'class',
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   plugins: [],
 };

tsconfig.json

@@ -24,7 +24,7 @@
     ],
     "paths": {
       "@/*": [
-        "./*"
+        "./src/*"
       ]
     }
   },