🏦 Full-Stack Banking Simulator Portal

A modern full-stack banking portal built with a responsive React frontend, a secure JWT-authenticated Spring Boot REST backend, and MongoDB storage. Dispatches asynchronous balance notifications and handles dynamic statement compiling.

---

🏗️ Project Architecture

User (Browser)
    │
    ▼
[ Vercel: React Frontend ]
    │
    ▼ (HTTPS REST API / JSON)
[ Render: Docker JRE Container (Spring Boot) ]
    │
    ▼ (MongoDB Java Driver)
[ MongoDB Atlas (Cloud Database) ]

---

🗂️ Project Directory Layout

/BankingSimulator-Java (Root Git Repository)
│
├── pom.xml                 # Maven parent aggregator settings
│
├── backend/                # Spring Boot REST API Service
│   ├── Dockerfile          # Multi-stage production build configuration
│   ├── pom.xml             # Spring Boot Maven dependencies & build settings
│   └── src/                # Java source and configurations
│       ├── main/java/com/bank/  # layered backend logic (controllers, services, entities...)
│       └── main/resources/      # application.yml settings and email templates
│
└── frontend/               # React client workspace
    ├── package.json        # NPM dependencies
    ├── vite.config.js      # Dev-server configuration
    ├── .env.development    # Local development API endpoint routing
    └── src/                # React visual pages, components, & authentication contexts

---

🚀 Local Development Setup

1. Database

Ensure MongoDB is running locally on port 27017 (or launch via Docker: docker run -d -p 27017:27017 --name local-mongo mongo:latest).

2. Start the Backend

1. Navigate to the backend folder:

   cd backend

2. Build and launch the server using the Maven wrapper:

   ./mvnw spring-boot:run

3. The server will boot on port 8085. Verify the API status by visiting: http://localhost:8085/api/health
4. Interactive Swagger documentation is available at: http://localhost:8085/swagger-ui/index.html

3. Start the Frontend

1. Open a new terminal and navigate to the frontend folder:

   cd frontend

2. Install dependencies:

   npm install

3. Start the Vite server:

   npm run dev

4. Access the web interface at http://localhost:5173.

---

🌐 Production Deployment Steps

1. Database: MongoDB Atlas

1. Sign in to MongoDB Atlas.
2. Create a free shared cluster.
3. Go to Security -> Database Access and create a read/write user credentials.
4. Go to Security -> Network Access and whitelist access. (Add 0.0.0.0/0 to allow Render's dynamic container IPs to connect to your database).
5. Copy your connection URI (e.g., mongodb+srv://<user>:<password>@cluster0.aj2xzyo.mongodb.net/?appName=Cluster0).

2. Backend: Render + Docker

1. Push your monorepo repository to GitHub.
2. Sign in to Render and click New -> Web Service.
3. Select your repository.
4. Configure the following parameters:
   • Name: banking-simulator-backend
   • Runtime: Docker
   • Dockerfile Path: backend/Dockerfile
   • Context Directory: backend
5. Go to the Environment tab and add your deployment secrets (no values should be committed in the codebase):
   • MONGODB_URI: Your rotated MongoDB Atlas connection string
   • JWT_SECRET: A secure randomly generated 256-bit hex string
   • FRONTEND_URL: Your Vercel URL (e.g., https://banking-portal.vercel.app)
   • SENDER_EMAIL: Your Gmail account
   • APP_PASSWORD: Your Google App Password
6. Render will read the Dockerfile, build the multi-stage JAR, and boot the web service dynamically.

3. Frontend: Vercel

1. Sign in to Vercel and click Add New -> Project.
2. Select your repository.
3. Configure the build parameters:
   • Root Directory: frontend
   • Framework Preset: Vite
   • Build Command: vite build
   • Output Directory: dist
4. Add the following Environment Variable:
   • VITE_API_BASE_URL: Your Render backend URL followed by /api (e.g., https://banking-backend.onrender.com/api)
5. Click Deploy. Vercel will bundle the React production assets and assign your domain.