Reorganize project structure with backend/ and frontend/ directories

Dockerfile

@@ -1,20 +1,42 @@
-FROM node:18-alpine
+# Multi-stage Dockerfile for production deployment
+FROM node:18-alpine AS base
 
-WORKDIR /app
-
-# Install git for cloning the bible repository
+# Install git for cloning bible repository
 RUN apk add --no-cache git
 
-# Copy package files
-COPY package*.json ./
-
-# Install dependencies
+# Backend stage
+FROM base AS backend
+WORKDIR /app/backend
+COPY backend/package*.json ./
 RUN npm ci --only=production
 
-# Copy application code
-COPY . .
+# Frontend build stage
+FROM base AS frontend-build
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+COPY frontend/tsconfig.json ./
+COPY frontend/tailwind.config.js ./
+COPY frontend/postcss.config.js ./
+RUN npm ci
+COPY frontend/public ./public
+COPY frontend/src ./src
+RUN npm run build
 
-# Clone ESV Bible markdown repository
+# Production stage
+FROM base AS production
+WORKDIR /app
+
+# Copy backend
+COPY backend ./backend
+COPY --from=backend /app/backend/node_modules ./backend/node_modules
+
+# Copy built frontend
+COPY --from=frontend-build /app/frontend/build ./frontend/build
+
+# Copy docker-compose configuration
+COPY docker-compose.yml ./
+
+# Clone ESV Bible repository
 RUN git clone https://github.com/lguenth/mdbible.git /tmp/mdbible && \
     mkdir -p /app/bible-data && \
     cp -r /tmp/mdbible/by_chapter/* /app/bible-data/ && \
@@ -23,5 +45,6 @@ RUN git clone https://github.com/lguenth/mdbible.git /tmp/mdbible && \
 # Expose port
 EXPOSE 3000
 
-# Start the application
+# Start backend server
+WORKDIR /app/backend
 CMD ["npm", "start"]

README.md

@@ -2,11 +2,31 @@
 
 A Docker-based web service for serving the ESV Bible in Markdown format with chapter-by-chapter organization.
 
+## Project Structure
+
+```
+esv-bible/
+├── backend/           # Backend API server
+│   ├── src/
+│   │   └── index.js   # Express server
+│   ├── package.json
+│   └── Dockerfile
+├── frontend/          # React frontend application
+│   ├── src/
+│   ├── public/
+│   ├── package.json
+│   └── ...
+├── bible-data/        # ESV Bible markdown files (auto-downloaded)
+├── docker-compose.yml
+└── README.md
+```
+
 ## Features
 
 - Complete ESV Bible text in Markdown format from [lguenth/mdbible](https://github.com/lguenth/mdbible)
 - Organized by book and chapter for easy navigation
 - Docker containerized for easy deployment
+- Modern React frontend with responsive design
 - RESTful API for accessing Bible content
 - Persistent volume storage for Bible data
 - Optimized for remote hosting
@@ -43,12 +63,20 @@ curl http://localhost:3000/books/Genesis/1
 
 ## Development
 
-For local development:
+### Backend Development
 ```bash
+cd backend
 npm install
 npm run dev
 ```
 
+### Frontend Development
+```bash
+cd frontend
+npm install
+npm start
+```
+
 ## Docker Deployment
 
 Build and run with Docker Compose:

backend/Dockerfile

@@ -0,0 +1,27 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Install git for cloning the bible repository
+RUN apk add --no-cache git
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy application code
+COPY . .
+
+# Clone ESV Bible markdown repository
+RUN git clone https://github.com/lguenth/mdbible.git /tmp/mdbible && \
+    mkdir -p /app/bible-data && \
+    cp -r /tmp/mdbible/by_chapter/* /app/bible-data/ && \
+    rm -rf /tmp/mdbible
+
+# Expose port
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]

backend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "esv-bible-markdown",
+  "version": "1.0.0",
+  "description": "ESV Bible in Markdown format served via Docker",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "nodemon src/index.js"
+  },
+  "keywords": ["bible", "esv", "markdown", "docker"],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.18.2",
+    "cors": "^2.8.5",
+    "helmet": "^7.1.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  }
+}

package.json

@@ -1,21 +1,26 @@
 {
-  "name": "esv-bible-markdown",
+  "name": "esv-bible-project",
   "version": "1.0.0",
-  "description": "ESV Bible in Markdown format served via Docker",
-  "main": "src/index.js",
+  "description": "ESV Bible application with React frontend and Node.js backend",
+  "main": "index.js",
   "scripts": {
-    "start": "node src/index.js",
-    "dev": "nodemon src/index.js"
+    "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
+    "dev:backend": "cd backend && npm run dev",
+    "dev:frontend": "cd frontend && npm start",
+    "install:all": "npm install && cd backend && npm install && cd ../frontend && npm install",
+    "build:frontend": "cd frontend && npm run build",
+    "docker:build": "docker-compose build",
+    "docker:up": "docker-compose up",
+    "docker:down": "docker-compose down"
   },
-  "keywords": ["bible", "esv", "markdown", "docker"],
+  "keywords": ["bible", "esv", "react", "docker", "markdown"],
   "author": "",
   "license": "MIT",
-  "dependencies": {
-    "express": "^4.18.2",
-    "cors": "^2.8.5",
-    "helmet": "^7.1.0"
-  },
   "devDependencies": {
-    "nodemon": "^3.0.1"
-  }
+    "concurrently": "^8.2.0"
+  },
+  "workspaces": [
+    "backend",
+    "frontend"
+  ]
 }