JS Demons Payments Portal

A sleek and modern international payment system designed for banks.

JS Demons Payments Portal empowers customers to securely log in, register, and make international payments using the SWIFT method. This system prioritizes data security and integrity with robust encryption and validation.

👥 Team

• Malik Mannan - ST10091422
• Thato Sebelemetja - ST10067544

✨ Features

• Secure Authentication: User registration and login with robust password hashing.
• International Payments: SWIFT-based payments with support for various currencies.
• Responsive UI: Sleek and professional design built with React and Material UI.
• Real-time Processing: Integrated system for secure payment data storage.
• Employee Dashboard: Admin panel for payment verification and management.

Note: Other payment methods (Mastercard, PayPal, EFT) are currently unavailable in this release, with SWIFT as the primary method.

How To Run: You can follow the steps below or watch the video tutorial HERE:

📸 Screenshots

Feature	Screenshot
Home Page
Login Page
Customer Dashboard
Payment Information
Payment Details
Employee Dashboard

🚀 Quick Start

1. Clone the Repository:

git clone https://github.com/IIEWFL/apds7311-part-2-js-demons.git
cd globalPaymentsPlatform

2. Install Dependencies:

Navigate to the frontend folder and install the dependencies:

cd frontend && npm install
cd ../backend && npm install

3. Run the App:

   • Frontend:

    cd globalPaymentsPlatform/frontend
    npm start

   The React app will now run at http://localhost:3000/.

   • Backend:

    cd ../backend
    npm run dev

   The backend API will run at http://localhost:5000/.

🤔 How It Works

Once the app is up and running, access it at http://localhost:3000/. Login using the preconfigured credentials provided in the test.http file.

Customer Workflow

• Dashboard: View and manage your payments.
• Add Payment: Enter payment details, including amount, currency, and SWIFT information.
• Payment Confirmation: Review and confirm your payment.

Employee Workflow

• Dashboard: View all payments made by users.
• Verify Payments: Confirm legitimate payments and mark them as "verified."
• Revert Payments: Revert payments to "pending" status if needed.

💻 Tech Stack

• Validation: Regex
• Security: bcrypt, JWT, Nodemon (for development)

📂 Project Structure

├── globalPaymentsPlatform
│   ├── backend               # Node.js/Express backend
│   │   ├── db                
│   │   ├── keys              # Private and public keys for the SSL Certificates
│   │   ├── middleWare
│   │   ├── models            # Data models (for storing users, payments)
│   │   └── routes            # API routes (login, register, payment)
│   └── frontend              # Node.js frontend
│       ├── public            # Public assets like index.html
│       └── src               # React components and assets
└── README.md                 # Project documentation

🧪 Testing

Continuous Integration and Code Quality

This project utilizes CircleCI for continuous integration and SonarQube (SonarCloud) for code quality analysis.

• CircleCI: Automates the build, test, and deployment process. View the CircleCI pipelines for this project here
• SonarQube: Provides static code analysis to identify bugs, vulnerabilities, and code smells. View the SonarQube report for this project here

Note: A separate repo (https://github.com/ST10067544-Thato/JS-Demons-Payment-Portal) was used for testing due to GitHub Classroom visibility settings.