Bug: Setup Hyperswitch Web & Control center



# Context 

Developer experience is one of the key tenets at Hyperswitch. Setting up and running Hyperswitch should be fun, fast and easy for all developers out there !!

However, when we fully open sourced Hyperswitch in Nov 2023, we had to create three repositories to easily manage Hyperswitch product suite from a compliance and from a developer productivity perspective. We feel that there is a lot of scope for optimixing the local setup of a multi-repository product suite like Hyperswitch.

# Problem Statement
As of now, our Docker Compose setup within the [juspay/hyperswitch](https://github.com/juspay/hyperswitch) repository only covers the backend services of the Hyperswitch apps server. The current setup lacks inclusion of the web client and the control center. Docker Compose setup needs to be extended to include these components seamlessly.

You can find the documentation for setting up the Hyperswitch app server (and other services including database, Redis, monitoring services) [here](https://github.com/juspay/hyperswitch/blob/main/docs/try_local_system.md#run-hyperswitch-using-docker-compose), and the Docker Compose file [here](https://github.com/juspay/hyperswitch/blob/main/docker-compose.yml)

# How to Get Started

## Web Client Setup
- The [web client](https://github.com/juspay/hyperswitch-web) and React demo app don't have a Docker-based setup yet.
- Start by creating a Docker-based setup for the web client. Utilize a node-based Docker image to run the SDK and demo app

## Control Center
- The control center setup is simple, you can just include another service in the Docker Compose file to pull the control center image from Docker Hub
- Please Note: The control center however requires you to run the web client beforehand, and the web client URL must be configured in the control center configuration to be able to run it

## Integration
- Once Docker setups for both the web client and control center are available, integrate them into the existing Docker Compose setup.
- Ensure that the control center configuration references the web client URL correctly, and that the web client and React demo app configuration references the app server URL correctly.

# Expected outcome

Submit a pull request to the [juspay/hyperswitch](https://github.com/juspay/hyperswitch) repository with the following changes:
- Modify the Docker Compose file to include three new services: the web client, the React demo app (for the web client), and the control center.
- The pull request should enable anyone trying out Hyperswitch to set up all three components seamlessly, enhancing client adoption.

### Brownie points 
- Providing clear and comprehensive technical documentation along with the Docker setup
Addressing these blockers will not only streamline the Docker Compose setup process but also enhance the overall user experience for developers integrating Hyperswitch. It is crucial for ensuring smooth adoption of Hyperswitch

_Originally posted by @NarsGNA in https://github.com/juspay/hyperswitch/discussions/4110_
diff --git a/docker-compose.yml b/docker-compose.yml
index e55008f1e34..32a7a6ef2f8 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -122,6 +122,39 @@ services:
     labels:
       logs: "promtail"
 
+### Web Client
+  hyperswitch-web:
+    ports:
+      - "9050:9050"
+      - "9060:9060"
+      - "5252:5252"
+    build:
+      context: ./docker
+      dockerfile: web.Dockerfile
+    environment:
+      - HYPERSWITCH_PUBLISHABLE_KEY=$HYPERSWITCH_PUBLISHABLE_KEY
+      - HYPERSWITCH_SECRET_KEY=$HYPERSWITCH_SECRET_KEY
+      - HYPERSWITCH_SERVER_URL=${HYPERSWITCH_SERVER_URL:-http://hyperswitch-server:8080}
+      - HYPERSWITCH_CLIENT_URL=${HYPERSWITCH_CLIENT_URL:-http://localhost:9050}
+      - SELF_SERVER_URL=${SELF_SERVER_URL:-http://localhost:5252}
+      - SDK_ENV=${SDK_ENV:-local}
+      - ENV_SDK_URL=${ENV_SDK_URL:-http://localhost:9050}
+      - ENV_BACKEND_URL=${ENV_BACKEND_URL:-http://localhost:8080}
+      - ENV_LOGGING_URL=${ENV_LOGGING_URL:-http://localhost:3100}
+    labels:  
+      logs: "promtail"  
+
+  ### Control Center
+  hyperswitch-control-center:
+    image: juspaydotin/hyperswitch-control-center:latest
+    ports:
+      - "9000:9000"
+    environment:
+      - apiBaseUrl=http://localhost:8080
+      - sdkBaseUrl=http://localhost:9050/HyperLoader.js
+    labels:  
+      logs: "promtail" 
+
   ### Clustered Redis setup
   redis-cluster:
     image: redis:7
diff --git a/docker/web.Dockerfile b/docker/web.Dockerfile
new file mode 100644
index 00000000000..532ce28fb7c
--- /dev/null
+++ b/docker/web.Dockerfile
@@ -0,0 +1,15 @@
+FROM node:lts
+
+RUN npm install concurrently -g
+
+WORKDIR /hyperswitch-web
+
+RUN git clone https://github.com/juspay/hyperswitch-web --depth 1 .
+
+RUN npm install
+
+EXPOSE 9050
+EXPOSE 5252
+EXPOSE 9060
+
+CMD concurrently "npm run re:build && npm run start" "npm run start:playground"
\ No newline at end of file

## Type of Change
<!-- Put an `x` in the boxes that apply -->

- [ ] Bugfix
- [x] New feature
- [ ] Enhancement
- [ ] Refactoring
- [ ] Dependency updates
- [ ] Documentation
- [ ] CI/CD

## Description
Added web client and control center services to docker-compose.yml
REF : #4110 


### Additional Changes

- [ ] This PR modifies the API contract
- [ ] This PR modifies the database schema
- [x] This PR modifies application configuration/environment variables