[4.4 Prototype] Navigation Bar - FEUP-MEIC-DS-2025-26/madeinportugal.store GitHub Wiki

Overview

The Navigation Bar prototype implements the main navigation bar for a storefront specializing in Portuguese national products.

This UI component is developed as an independent microfrontend, part of a larger microservice architecture. The system is composed of three main services: the frontend (the navigation bar microfrontend), a middleware (REST API), and a backend (gRPC service).

Purpose

The primary goal of this prototype is to demonstrate and validate a microfrontend and microservice architecture.

Specifically, it focuses on how a UI component (the navigation bar) can be served as a standalone application (Next.js), which fetches its data (e.g., the navigation links) from a decoupled backend service, via a middleware that acts as an intermediary.

Key Features

  • Microfrontend Architecture: The navigation bar is a standalone Next.js application, demonstrating the microfrontend pattern.

  • Dynamic Navigation: The navigation bar items and links are fetched dynamically through an API call to the middleware (GET /api/nav).

  • Microservice Integration: Demonstrates the full communication chain from the frontend to the backend.

  • Docker Orchestration: The entire system (frontend, middleware, backend) is easily started and managed with a single docker compose up command.

Architecture

This prototype uses a 3-tier microservice architecture. The communication flow is as follows:

  1. Frontend (Microfrontend): The user's browser loads the Next.js application. When it needs data (like navigation links), it makes an HTTP REST call to the Middleware.

  2. Middleware (API Gateway): The Express.js server receives the REST call. Its job is to act as an intermediary. It translates the simple REST request into a high-performance gRPC call to the Backend service.

  3. Backend (Microservice): The Node.js gRPC server receives the request, processes the business logic (e.g., fetches data from a database), and returns the data to the Middleware.

  4. Response: The Middleware receives the data from the Backend and sends it back to the Frontend as a standard JSON REST response.

This pattern decouples the frontend from the backend logic, allowing them to be developed, deployed, and scaled independently.

Technologies

The system architecture is broken down as follows:

Frontend (app/frontend)

Framework: Next.js 14 (Acts as the microfrontend rendering the UI)

Styling: Tailwind CSS (A utility-first CSS framework for rapid styling)

Middleware (app/middleware)

Framework: Express.js (Exposes a REST API for the frontend)

Communication: gRPC Client (Consumes the gRPC service from the backend)

Backend (app/backend)

Language: Node.js

Server: gRPC Server (Manages business logic and provides navigation and product data)

Infrastructure and Execution

Containerization: Docker (Each service—frontend, middleware, backend—has its own Dockerfile)

Local Orchestration: Docker Compose (Used to build, orchestrate, and manage the three services in a unified development environment with docker compose up)