3-Tier Microservice Pipeline Application

A Next.js application demonstrating a 3-tier microservice architecture simulation using the App Router and TypeScript.

Architecture

This application simulates a microservice pipeline with three services:

Service A - Frontend (UI Layer)

• Location: app/page.tsx
• Purpose: User interface with a "Start Data Pipeline" button
• Action: Initiates the pipeline by calling Service B at http://localhost:3000/api/process
• Technology: Next.js Client Component with React hooks

Service B - Processor (Business Logic Layer)

• Location: app/api/process/route.ts
• Purpose: Processes requests and forwards them to Service C
• Actions:
  • Logs "Service B: Received request"
  • Simulates processing with a 300ms delay
  • Forwards request to Service C at http://localhost:3000/api/store
• Technology: Next.js API Route with standard Web Request/Response APIs

Service C - Storage (Data Layer)

• Location: app/api/store/route.ts
• Purpose: Persists data (simulates CloudWatch storage)
• Actions:
  • Logs "Service C: Persisting data to CloudWatch"
  • Returns JSON success message: { status: 'Data Saved' }
• Technology: Next.js API Route with standard Web Request/Response APIs

Features

• ✅ Full absolute URLs for internal service-to-service calls (http://localhost:3000)
• ✅ TypeScript for type safety
• ✅ Tailwind CSS for modern, responsive UI
• ✅ App Router architecture
• ✅ Console logging for request tracing
• ✅ Error handling for all services

Getting Started

Prerequisites

• Node.js 18.x or higher
• npm

Installation

1. Navigate to the project directory:

cd microserviceapp

2. Install dependencies (already done during setup):

npm install

3. Run the development server:

npm run dev

4. Open your browser and navigate to:

http://localhost:3000

Usage

1. Click the "Start Data Pipeline" button on the homepage
2. Watch the status update as the request flows through the pipeline
3. Check the terminal console to see the logs from each service:
   • "Service B: Received request"
   • "Service C: Persisting data to CloudWatch"

Pipeline Flow

User Click → Service A (Frontend)
                ↓ POST http://localhost:3000/api/process
              Service B (Processor)
                ↓ 300ms delay
                ↓ POST http://localhost:3000/api/store
              Service C (Storage)
                ↓ Returns: { status: 'Data Saved' }
              Service B ← Response
                ↓
              Service A ← Response
                ↓
            User sees success message

OpenTelemetry Ready

All internal service-to-service calls use full absolute URLs (http://localhost:3000) instead of relative paths. This ensures that OpenTelemetry tracing can properly capture each "hop" in the microservice pipeline.

Project Structure

microserviceapp/
├── app/
│   ├── api/
│   │   ├── process/
│   │   │   └── route.ts      # Service B - Processor
│   │   └── store/
│   │       └── route.ts      # Service C - Storage
│   ├── page.tsx              # Service A - Frontend
│   ├── layout.tsx           # Root layout
│   └── globals.css          # Global styles
├── public/                   # Static assets
├── package.json             # Dependencies
├── tsconfig.json            # TypeScript config
├── tailwind.config.ts       # Tailwind config
└── next.config.ts           # Next.js config

Technologies Used

• Framework: Next.js 16.1.6 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Runtime: Node.js
• Package Manager: npm

Development

To build for production:

npm run build

To start the production server:

npm start

Notes

• The application uses Turbopack for faster development builds
• All API routes use standard Web Request/Response APIs
• Console logs help track the request flow through the pipeline
• The 300ms delay in Service B simulates real-world processing time

License

This is a demonstration project for learning microservice architectures with Next.js.