• CloudApp - Interactive Next.js 14 App Shell and Micro Frontend: Experience the sleek Next.js interface designed to interact seamlessly with the backend services. Explore the frontend.
  • A micro frontend setup with an app shell solution to enable independently deployable front-end modules, improving scalability and maintainability. Check details
• Microservices Architecture: Dive into backend API services crafted during my Nanodegree. More about backend services: cloudapp, petstore, vehicles-api, jira-proxy.
• Load Balancer and Reverse Proxy: Utilize Nginx to efficiently distribute traffic among servers and enhance performance and reliability of applications. Read more.
• Advanced ML Pipeline: Leverage my Python-based machine learning pipeline for dynamic customer segmentation, developed during my Predictive Analytics Nanodegree. See ML details.
• Integrated External APIs: Enhance functionality with third-party services like OpenAI and Jira through customized proxy APIs to navigate CORS issues. Details on API integration.
• Real-Time Kafka Chat: Engage with the Kafka-powered chat application, demonstrating real-time messaging capabilities. Chat interface.
• Efficient Logging and CI/CD: Implement robust logging with Log4j and streamline deployments using Jenkins. Learn about CI/CD processes.

Example view with ML customer segmentation pipeline and other tabs:

Note: minimum 16 GB memory is needed to make sure all services can run.

brew install docker
brew install docker-compose

Setup and start databases and esential services with docker-compose:

docker-compose -f docker-compose-infrastructure.yml up -d

Build and start the Java based services, the Python based ml-pipeline and the Next.js based frontend:

docker-compose -f docker-compose-app.yml up -d

Runs the app in the production mode.
Open http:https://localhost:5001 to view it in your browser. For development mode check instructions here.

If everything is correctly started, you should see a login page with optional Dark Mode:

And you should be able to register and log in, after starting the backend services, cloudapp is a must, the rest is optional, and see the current front-end of the api integrations from the services above:

MLOps interface for Customer Segmentation API, the user is able to auto trigger the whole customer segmentation process and generate the latest segmentation plots with these options:

• Add new customer data point to the database.
• Sample reference database with user specified samples.
• Sample reference database with predefined 10-20-50-100-200 amount of samples.

View results:

• Pictures: correlation between parameters and the different segments.
• Table: current list of customers from postgres db.

The module is built as Micro Frontend:

1. Left side main CloudApp-Shell as App Shell using the MLOps micro frontend:
   http:https://localhost:5001/mlops
2. Right side module federated MLOps micro frontend:
   http:https://localhost:5005

The user is able to:

• Create new items.
• Add existing items to the cart.
• See and clear the cart.
• Submit cart and check order history.

Shop API documentation:

• Items
• Cart
• Order

The module is built as Micro Frontend:

1. Left side main CloudApp-Shell as App Shell using the Petstore micro frontend:
   http:https://localhost:5001/petstore
2. Right side module federated Petstore micro frontend:
   http:https://localhost:5006

The user is able to:

• Add new customer.
• Add a new Pet to existing customers.
• Add new employees with skills and schedules.
• Check availability based on skills and schedules.
• Plan a new schedule for an employee and assign it to a pet.

The module is built as Micro Frontend:

1. Left side main CloudApp-Shell as App Shell using the Maps micro frontend:
   http:https://localhost:5001/maps
2. Right side module federated Maps micro frontend:
   http:https://localhost:5002

Map interface for integrating Open Street Map with the Vehicle location service's REST API. The user is able to:

• Click on the map to add new vehicle locations.
• Click on existing locations and check basic info and delete the location.

Vehicels API documentation

OpenAI interface for communicating with the OpenAI API, the user is able to:

• Send a prompt to ChatGPT and receive a response.
• Send a prompt to DallE and receive an image response.

The module is built as Micro Frontend:

1. Left side main CloudApp-Shell as App Shell using the OpenAI micro frontend:
   http:https://localhost:5001/openai
2. Right side module federated OpenAI micro frontend:
   http:https://localhost:5004

Jira interface for communicating with the Jira API, to use it:

• Register
• Create Personal Access Token
• Use it for requests

The user is able to:

• Create/list/update/delete Jira ticket

1. Left side main CloudApp-Shell as App Shell using the Jira micro frontend:
   http:https://localhost:5001/jira
2. Right side module federated Jira micro frontend:
   http:https://localhost:5003

A service for creating personal notes and uploading personal files.

• Notes API documentation
• Files API documentation

A Kafka based chat service, the user is able to:

• Create new chat rooms, furthermore share and enter chat room id

• Talk to other users in chat rooms

If OpenAI and Jira functionality is to be used, follow the instructions below:

Comment out this in the docker-compose-app.yml file in root directory:

NEXT_PUBLIC_OPENAI_KEY: sk-za-------YOUR-API-KEY------8Ie

Comment out these in the docker-compose-app.yml file in root directory:

NEXT_PUBLIC_JIRA_DOMAIN: 'https://your-jira-instance.atlassian.net'
NEXT_PUBLIC_JIRA_KEY: Y3NhYmFqYWthYm-------YOUR-API-KEY------SDA9REUzRjY4N0M=

NOTE: the next-frontend Docker image needs to be rebuilt after editing the .env file.

Web Development Nanodegree certficiate

Predictive Analytics for Business Nanodegree certficiate