DEV Community: Emmanuel Ndeze Bonheur

Dev Log: Understanding N-Tier Architecture as a Backend Developer

Emmanuel Ndeze Bonheur — Wed, 14 Oct 2026 19:43:10 +0000

While taking the Coursera Python Backend Engineer course, covering Django, Django REST Framework (DRF), and FastAPI, I came across N-tier architecture. I was already familiar with client-server architecture, as well as three-tier and four-tier architectures, but this helped me connect the concepts and understand how they fit together in real applications.

What Happened?

As I continued learning backend development, I started thinking beyond writing API endpoints and connecting databases. I wanted to understand how the different parts of an application are organized and how they communicate in a production environment.

The important distinction I learned was between layers and tiers.

Layers are logical separations of responsibilities within an application, such as presentation, business logic, and data access.
Tiers are physically or infrastructurally separated parts of an application, often deployed on different servers or services.

For example, a Django project can have separate views, services, and models while running on a single server. These are logical layers, not necessarily separate tiers.

From Client-Server to N-Tier

Client-server architecture describes the relationship between a client and a server. The client sends a request, the server processes it, and a response is returned over a protocol such as HTTP.

N-tier architecture takes this further by separating application responsibilities across multiple deployment environments.

A typical three-tier application looks like this:

flowchart TD
    Client([Client / Browser]) -->|HTTP| App[Application Server]
    App -->|SQL| DB[(Database Server)]

The three tiers are:

Presentation tier: The interface users interact with.
Application tier: The backend code and business logic.
Data tier: The database that stores application data.

A four-tier architecture can introduce a separate delivery tier, such as a Content Delivery Network (CDN), to serve static assets like JavaScript, CSS, and images closer to users.

The key takeaway for me was that N-tier architecture is not limited to three or four tiers. The number depends on how an application is structured and deployed.

The Solution / Workaround

To make the concept practical, I mapped it to the kind of backend application I build with Django or FastAPI.

Consider a simple API for retrieving products from a database:

flowchart TD
    Client([Browser / Frontend]) --> API[Django REST Framework API]
    API --> BL[Business Logic / Services]
    BL --> DB[(Database)]

In this example, the diagram shows logical responsibilities. They do not automatically represent four separate physical tiers.

A simplified Django REST Framework endpoint might look like this:

from rest_framework.response import Response
from rest_framework.views import APIView

from .models import Product


class ProductListView(APIView):
    def get(self, request):
        products = Product.objects.all()
        data = [
            {"id": p.id, "name": p.name}
            for p in products
        ]
        return Response(data)

The view handles the HTTP request and returns a response, while Django's ORM handles database access. In a larger project, I could move business rules into a service module to keep the view focused on HTTP handling.

With FastAPI, the same basic idea applies:

from fastapi import FastAPI

app = FastAPI()


@app.get("/products")
def list_products():
    return [
        {"id": 1, "name": "Router"},
        {"id": 2, "name": "Switch"},
    ]

These examples demonstrate backend responsibilities, but they do not by themselves create a multi-tier deployment. To achieve that, I would deploy the frontend, API, and database separately, potentially adding a CDN or reverse proxy where needed.

Thoughts & Next Steps

What I found useful is that architecture is not simply about splitting code into folders. It is also about deciding where components run, how they communicate, and how they can be scaled and secured independently.

N-tier architecture can improve maintainability, security, and scalability, but it also introduces additional deployment and networking complexity. Separating every component is not always necessary for a small application.

My next step is to apply these ideas to a Django REST Framework or FastAPI project, starting with a clean separation of responsibilities before considering a more distributed deployment.

[x] Reviewed the difference between layers and tiers.
[x] Connected client-server architecture with three-tier and four-tier designs.
[x] Explored how Django and FastAPI fit into a layered backend.
[ ] Build a small API with a separately deployed frontend, backend, and database.
[ ] Explore how reverse proxies, caching, and containerization support production deployments.

Django Design Patterns and Best Practices: Building Maintainable Production-Ready Applications

Emmanuel Ndeze Bonheur — Sun, 20 Sep 2026 00:00:00 +0000

A comprehensive guide on clean service layers, domain boundaries, QuerySet optimization, background workers, and scalable production architecture in modern Django.

Django Application Design: From Requirements to a Production-Ready Project

Emmanuel Ndeze Bonheur — Sat, 19 Sep 2026 00:00:00 +0000

A comprehensive guide on requirements gathering, modular monolith architecture, app boundaries, package evaluation, and production readiness in modern Django.

🚀 Day 2: Stack Navigation in React Native with Expo

Emmanuel Ndeze Bonheur — Wed, 02 Jul 2025 16:48:03 +0000

Today I added multi-screen navigation to my React Native app using React Navigation. In this post, I’ll walk through the steps and code to help beginners understand how to do the same.

📦 Prerequisites

You should already have a React Native + Expo project set up. I did that on Day 1.

🪜 Step-by-Step: Add Stack Navigation

✅ 1. Install React Navigation

Run the following commands:

npx expo install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npx expo install @react-navigation/native-stack

This installs the core navigation library and dependencies needed to support native behavior.

✅ 2. Create Two Screens
I already had a HomeScreen. Now I added a new file:
📄 src/screens/ProfileScreen.tsx

import React from "react";
import { View, Text, StyleSheet } from "react-native";

export default function ProfileScreen() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>👤 Profile Screen</Text>
            <Text style={styles.subtitle}>This is the Profile Screen</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
        backgroundColor: "#fff"
    },
    title: {
        fontSize: 24,
        fontWeight: "bold",
        marginBottom: 12,
    },
    subtitle: {
        fontSize: 16,
        color: "#666"
    }
});

✅ 3. Create a Stack Navigator
📄 src/navigation/StackNavigator.tsx

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../screens/HomeScreen";
import ProfileScreen from "../screens/ProfileScreen";

const Stack = createNativeStackNavigator();

export default function StackNavigator() {
    return (
        <Stack.Navigator initialRouteName="Home">
            <Stack.Screen
                name="Home"
                component={ HomeScreen }
                options={{ title: 'Welcome' }} />
            <Stack.Screen 
                name="Profile" 
                component={ProfileScreen}
                options={{ title: 'PRofile'}} />
        </Stack.Navigator>
    );
}

✅ 4. Wire it all in App.tsx

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import StackNavigator from "./src/navigation/StackNavigator";

export default function App() {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
}

🧠 NavigationContainer is the root context that enables navigation in the entire app.

✅ 5. Add Navigation Logic in HomeScreen

import React from "react";
import { View, Text, StyleSheet, Button } from "react-native";
import { NativeStackScreenProps } from "@react-navigation/native-stack";

type RootStackParamList = {
  Home: undefined;
  Profile: undefined;
};

type Props = NativeStackScreenProps<RootStackParamList, "Home">;

export default function HomeScreen({ navigation }: Props) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>👋 Welcome to My First React Native App</Text>
      <Text style={styles.subtitle}>Day 2 - Getting Started 🚀</Text>

      <Button title="Go to Profile" onPress={() => navigation.navigate("Profile")} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
    backgroundColor: "#f8f8ff",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 14,
  },
  subtitle: {
    fontSize: 16,
    color: "#666",
    marginBottom: 20,
  },
});

🧠 Here, we use navigation.navigate("Profile") to move to the Profile screen.
The Props type ensures TypeScript catches mistakes if we pass wrong route names.

🧠 Recap: What I Learned

How to install and configure @react-navigation/native with Expo
How stack-based navigation works
How to use navigation.navigate("ScreenName")
Organizing screens and navigation into folders
Adding type safety with NativeStackScreenProps

🔗 GitHub Repo
👉 View Source Code on GitHub

🚀 Day 1: My React Native Journey Begins!

Emmanuel Ndeze Bonheur — Mon, 30 Jun 2025 19:55:35 +0000

Today I officially started my React Native adventure. In this post, I’m not just logging progress—I’ll walk you through what I set up and how the code works, so you can follow along step-by-step.

✅ What I Did Today

Created a new Expo + TypeScript app:

npx create-expo-app my-first-app --template blank (TypeScript)

Initialized a GitHub repo for version control.
Built a simple HomeScreen to display a welcome message.
Committed and pushed all code.
Captured a screenshot of the app running on Android.

🧱 Code Breakdown — My `HomeScreen`

import React from "react";
import { View, Text, StyleSheet } from "react-native";

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>👋 Welcome to My First React Native App</Text>
      <Text style={styles.subtitle}>Day 1 – Getting Started 🚀</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,  
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
    backgroundColor: "#f8f8ff",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 12,
  },
  subtitle: {
    fontSize: 16,
    color: "#666",
  },
});

🧠 What This Code Does

StyleSheet.create keeps styles clean and performant.
container uses Flexbox to center content.
backgroundColor, fontSize, and margin make the UI visually appealing and readable.

📍 Connecting the Screen in `App.tsx`

import React from "react";
import { SafeAreaView } from "react-native";
import HomeScreen from "./src/screens/HomeScreen";

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <HomeScreen />
    </SafeAreaView>
  );
}

🧠 What This Code Does

We wrap the app in SafeAreaView to handle notches and status bars.
Flex styling ensures the screen fills the device display.

🧩 Putting It All Together

HomeScreen uses React Native components like View, Text.
StyleSheet defines reusable styles.
App.tsx renders the screen within a safe layout.

Once saved, simply run:

npx expo start

You’ll see your welcome screen

🔗 Repo

Check out today’s code here:

👉 GitHub - My First React Native App

🖼 Screenshot

🔭 Day 2 Preview

Next up: adding React Navigation—we’ll create a second screen and navigate between them using a stack navigator. Be ready for multi-screen flow!

Follow me if you want to join me on this full React Native journey. I’ll be posting daily progress and projects!