Dockerized

Signed-off-by: Vimal Kumar <[email protected]>

README.md

@@ -37,6 +37,8 @@ A full-stack web application for generating and solving crossword puzzles with v
 
 ## Running the Application
 
+### Development Mode
+
 1. **Start the backend server**
    ```bash
    cd crossword-app/backend
@@ -53,6 +55,19 @@ A full-stack web application for generating and solving crossword puzzles with v
 
 3. **Open your browser** and navigate to `http://localhost:5173`
 
+### Docker Deployment
+
+**Build and run with Docker:**
+```bash
+cd crossword-app
+docker build -t crossword-app .
+docker run -p 7860:7860 -e NODE_ENV=production crossword-app
+```
+
+Open `http://localhost:7860` to access the application.
+
+**For Hugging Face Spaces:** Upload the `crossword-app/` directory to a new Docker Space.
+
 ## How to Use
 
 1. Select one or more topics from the available options
@@ -82,4 +97,9 @@ cross-words/
 
 - **Frontend**: React, Vite, CSS
 - **Backend**: Node.js, Express
-- **Algorithm**: Backtracking-based crossword generation
+- **Algorithm**: Backtracking-based crossword generation
+- **Deployment**: Docker (ready for Hugging Face Spaces)
+
+## Documentation
+
+For detailed technical documentation, deployment guides, and API specifications, see the [crossword-app README](./crossword-app/README.md).

crossword-app/.dockerignore

@@ -0,0 +1,67 @@
+# Node modules
+**/node_modules
+**/npm-debug.log*
+**/yarn-debug.log*
+**/yarn-error.log*
+
+# Build directories
+frontend/dist
+backend/public
+
+# Development files
+**/.git
+**/.gitignore
+**/.env.local
+**/.env.development
+**/.env.test
+**/.vscode
+**/.idea
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Logs
+**/logs
+**/*.log
+
+# Runtime data
+**/pids
+**/*.pid
+**/*.seed
+**/*.pid.lock
+
+# Coverage directory used by tools like istanbul
+**/coverage
+**/.nyc_output
+
+# Optional npm cache directory
+**/.npm
+
+# Optional eslint cache
+**/.eslintcache
+
+# Documentation
+**/docs
+**/README.md
+**/samples
+**/hack
+
+# Test files
+**/*.test.js
+**/*.spec.js
+**/test
+
+# Development only files
+**/nodemon.json
+**/.prettierrc
+**/.eslintrc*
+
+# Python virtual environment (if any)
+**/venv
+**/__pycache__

crossword-app/Dockerfile

@@ -0,0 +1,36 @@
+# Use Node.js 18 as base image
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files for both frontend and backend
+COPY frontend/package*.json ./frontend/
+COPY backend/package*.json ./backend/
+
+# Install dependencies for both frontend and backend
+RUN cd frontend && npm ci
+RUN cd backend && npm ci --only=production
+
+# Copy source code
+COPY frontend/ ./frontend/
+COPY backend/ ./backend/
+
+# Build the React frontend
+RUN cd frontend && npm run build
+
+# Copy built frontend files to backend public directory
+RUN mkdir -p backend/public && cp -r frontend/dist/* backend/public/
+
+# Set working directory to backend for runtime
+WORKDIR /app/backend
+
+# Expose port 7860 (Hugging Face Spaces standard)
+EXPOSE 7860
+
+# Set environment to production
+ENV NODE_ENV=production
+ENV PORT=7860
+
+# Start the backend server
+CMD ["npm", "start"]

crossword-app/README.md

@@ -1,3 +1,13 @@
+---
+title: Crossword Puzzle Generator
+emoji: 🧩
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+license: mit
+---
+
 # Crossword Puzzle Generator
 
 A full-stack web application that generates custom crossword puzzles based on selected topics using React frontend and Node.js backend.
@@ -164,6 +174,42 @@ curl -X POST http://localhost:3000/api/generate \
 
 ## Deployment
 
+### Docker (Hugging Face Spaces/Local)
+
+**Build and run locally:**
+```bash
+# Build the Docker image
+docker build -t crossword-app .
+
+# Run the container (production mode)
+docker run -p 7860:7860 -e NODE_ENV=production crossword-app
+
+# Or run in background
+docker run -d -p 7860:7860 -e NODE_ENV=production --name crossword-app crossword-app
+```
+
+**Test the deployment:**
+```bash
+# Test API endpoint
+curl http://localhost:7860/api/topics
+
+# Test frontend (should return HTML)
+curl http://localhost:7860/
+
+# View container logs
+docker logs crossword-app
+
+# Stop and cleanup
+docker stop crossword-app && docker rm crossword-app
+```
+
+The app will be available at http://localhost:7860
+
+**For Hugging Face Spaces:**
+1. Create a new Space with "Docker" SDK
+2. Upload the entire `crossword-app/` directory
+3. The container will build automatically and deploy on port 7860
+
 ### Frontend (Vercel/Netlify)
 ```bash
 cd frontend
@@ -181,9 +227,9 @@ cd backend
 ### Environment Variables for Production
 ```bash
 NODE_ENV=production
-DATABASE_URL=postgresql://user:pass@host:port/db
-CORS_ORIGIN=https://your-frontend-domain.com
-JWT_SECRET=your-secure-secret
+PORT=7860
+DATABASE_URL=postgresql://user:pass@host:port/db (optional)
+CORS_ORIGIN=https://your-frontend-domain.com (for separate deployments)
 ```
 
 ## Contributing

crossword-app/backend/package.json

@@ -7,6 +7,8 @@
   "scripts": {
     "start": "node src/app.js",
     "dev": "nodemon src/app.js",
+    "build:frontend": "cd ../frontend && npm run build",
+    "build": "npm run build:frontend && mkdir -p public && cp -r ../frontend/dist/* public/",
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "eslint src/",

crossword-app/backend/src/app.js

@@ -2,18 +2,31 @@ const express = require('express');
 const cors = require('cors');
 const helmet = require('helmet');
 const rateLimit = require('express-rate-limit');
+const path = require('path');
 const apiRoutes = require('./routes/api');
 
 const app = express();
-const PORT = process.env.PORT || 3000;
+const PORT = process.env.PORT || 7860;
 
 app.use(helmet());
 
-const corsOptions = {
-  origin: process.env.CORS_ORIGIN || ['http://localhost:5173', 'http://localhost:3000'],
-  credentials: true,
-  optionsSuccessStatus: 200
-};
+// CORS configuration
+let corsOptions;
+if (process.env.NODE_ENV === 'production') {
+  // In production, allow same origin (since frontend is served from same server)
+  corsOptions = {
+    origin: true,
+    credentials: true,
+    optionsSuccessStatus: 200
+  };
+} else {
+  // Development mode - allow dev servers
+  corsOptions = {
+    origin: process.env.CORS_ORIGIN || ['http://localhost:5173', 'http://localhost:3000'],
+    credentials: true,
+    optionsSuccessStatus: 200
+  };
+}
 app.use(cors(corsOptions));
 
 const limiter = rateLimit({
@@ -42,19 +55,32 @@ app.use((req, res, next) => {
 app.use('/api/generate', generateLimiter);
 app.use('/api', apiRoutes);
 
-app.get('/', (req, res) => {
-  res.json({
-    message: 'Crossword Puzzle API',
-    version: '1.0.0',
-    endpoints: {
-      topics: 'GET /api/topics',
-      generate: 'POST /api/generate',
-      validate: 'POST /api/validate',
-      words: 'GET /api/words/:topic',
-      health: 'GET /api/health'
-    }
+// Serve static files in production
+if (process.env.NODE_ENV === 'production') {
+  const staticPath = path.join(__dirname, '../public');
+  app.use(express.static(staticPath));
+  
+  // Handle React Router routes - serve index.html for non-API routes
+  app.get('*', (req, res) => {
+    res.sendFile(path.join(staticPath, 'index.html'));
   });
-});
+} else {
+  // Development mode - show API info
+  app.get('/', (req, res) => {
+    res.json({
+      message: 'Crossword Puzzle API',
+      version: '1.0.0',
+      mode: 'development',
+      endpoints: {
+        topics: 'GET /api/topics',
+        generate: 'POST /api/generate',
+        validate: 'POST /api/validate',
+        words: 'GET /api/words/:topic',
+        health: 'GET /api/health'
+      }
+    });
+  });
+}
 
 app.use((req, res) => {
   res.status(404).json({
@@ -87,7 +113,12 @@ if (require.main === module) {
   app.listen(PORT, () => {
     console.log(`Server running on port ${PORT}`);
     console.log(`Environment: ${process.env.NODE_ENV || 'development'}`);
-    console.log(`CORS enabled for: ${JSON.stringify(corsOptions.origin)}`);
+    if (process.env.NODE_ENV === 'production') {
+      console.log(`Serving React app from /public directory`);
+      console.log(`CORS enabled for same origin`);
+    } else {
+      console.log(`CORS enabled for: ${JSON.stringify(corsOptions.origin)}`);
+    }
   });
 }
 

crossword-app/frontend/src/hooks/useCrossword.js

@@ -6,7 +6,7 @@ const useCrossword = () => {
   const [error, setError] = useState(null);
   const [topics, setTopics] = useState([]);
 
-  const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000';
+  const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || (import.meta.env.PROD ? '' : 'http://localhost:3000');
 
   const fetchTopics = useCallback(async () => {
     try {