feat: add end-to-end development setup with Docker, use sharp package for image optimization, and make Playground component responsive

.dockerignore

@@ -0,0 +1,62 @@
+# Ignore IDE and editor config files
+.idea/
+.vscode/
+.env
+
+
+# Node dependencies - avoid copying node_modules (should be installed within the container)
+node_modules/
+.pnp
+.pnp.js
+.yarn/install-state.gz
+
+
+# Test coverage reports
+coverage/
+
+
+# Next.js build outputs (we usually build inside Docker container)
+.next/
+out/
+
+
+# Production build artifacts (we usually build inside Docker container)
+build/
+
+
+# Miscellaneous files
+.DS_Store
+*.pem
+
+
+# Debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+# Local environment files
+.env*.local
+
+
+# Vercel settings
+.vercel/
+
+
+# TypeScript build info files 
+*.tsbuildinfo
+next-env.d.ts
+
+
+# Additional common files and directories to exclude from Docker builds
+logs/
+*.log
+.cache/
+dist/
+tmp/
+
+
+# Dockerignore for Docker
+.dockerignore
+Dockerfile
+Dockerfile.dev

Dockerfile.dev

@@ -0,0 +1,20 @@
+# Use the official Node.js image as a base
+FROM node:18-alpine
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Expose the port on which the app will run
+EXPOSE 3000
+
+# Start the Next.js development server with hot reloading
+CMD ["npm", "run", "dev"]

README.md

@@ -70,6 +70,16 @@ services:
 docker-compose up
 ```
 
+## Step-by-Step Setup for End-to-End Development with Docker
+We have added `Dockerfile.dev` which is for development purposes, ensuring your Next.js application supports hot reloading and reflects code changes without requiring image rebuilds.
+
+`docker-compose.dev.yml` configures Docker Compose to build and run your Next.js app in development mode.
+
+```shell
+docker-compose -f docker-compose.dev.yml up --build
+```
+
+
 ## Building for Production
 
 To create a production build:

docker-compose.dev.yml

@@ -0,0 +1,32 @@
+version: '3.8'
+
+services:
+  dicedb:
+    image: dicedb/dicedb:latest
+    ports:
+      - "7379:7379"
+
+  backend:
+    build:
+      context: .
+      dockerfile: Dockerfile_Backend
+    ports:
+      - "8080:8080"
+    depends_on:
+      - dicedb
+    environment:
+      - DICE_ADDR=dicedb:7379
+
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    ports:
+      - "3000:3000"               
+    volumes:
+      - .:/app                    # Mount the entire project directory to /app inside the container
+      - /app/node_modules          # Prevent overwriting node_modules inside the container
+    environment:
+      - NODE_ENV=development
+    stdin_open: true
+    tty: true