Search for a command to run...
Software developer documenting my journey through web and mobile development. I share what I learn, build, and struggle with—from React to SwiftUI, architecture decisions to deployment challenges. Not an expert, just passionate about coding and learning in public. Join me as I navigate the tech landscape one commit at a time.
No comments yet. Be the first to comment.
The Problem Every Developer Faces with AI Coding Assistants You've probably experienced this frustration: you ask Claude, Cursor, or any AI coding assistant to write a function, and it confidently generates code that looks perfect at first glance. Bu...
The Backstory So there I was, staring at my shiny new Passbolt installation on Ubuntu 24.04, when that familiar dread crept in: "What happens when (not if) something goes wrong?" After one too many "I'll set up backups tomorrow" moments, I finally de...
TL;DR The custom Reactotron transport for react-native-logs improves logging by handling various message types, adding metadata, and allowing custom prefixes, making your logs more informative and easier to manage. The Backstory Logging is a crucial ...
TL;DR Add parallel: N to your GitLab CI job and pass --shard=${CI_NODE_INDEX}/${CI_NODE_TOTAL} to Playwright to slash your test execution time and keep your team shipping fast. The Backstory Last week, our test suite execution time crossed the dreade...
Error messages are often the first interaction users have with your support system. When they're cryptic, technical, or in the wrong language, they create confusion rather than clarity. That's why I built the Appwrite Exceptions Translator - a lightw...
Domain-Driven Design (DDD) offers a strategic approach to developing complex software systems, emphasizing a deep focus on the core domain and its logic. When applied to frontend development, particularly with React and TypeScript, DDD facilitates a well-organized codebase that is easy to manage and scales gracefully. By using TypeScript along with Neverthrow, a library for handling errors in a functional way, developers can further enhance the robustness and maintainability of their applications.
In this article, we'll implement DDD in a React project for an online e-commerce store. This store includes features like product listings, a shopping cart, user profiles, and order management.
A clear folder structure helps separate the domain logic from application logic, adhering to DDD principles:
/src
/domain
/product
product.ts
productService.ts
/cart
cart.ts
cartService.ts
/user
user.ts
userService.ts
/infrastructure
/api
productApi.ts
userApi.ts
cartApi.ts
/ui
/components
ProductList.tsx
Cart.tsx
UserProfile.tsx
/pages
HomePage.tsx
ProductPage.tsx
CartPage.tsx
Below is a TypeScript example of a domain model for a product:
// src/domain/product/product.ts
import { err, ok, Result } from 'neverthrow';
export interface Product {
id: string;
name: string;
price: number;
description: string;
imageUrl: string;
}
export class Product {
constructor(
public id: string,
public name: string,
public price: number,
public description: string,
public imageUrl: string
) {}
applyDiscount(discountPercentage: number): Result<void, Error> {
if (discountPercentage <= 0 || discountPercentage > 100) {
return err(new Error('Invalid discount percentage'));
}
this.price = this.price * (1 - discountPercentage / 100);
return ok();
}
}
Services manage the business logic related to domain entities. Here’s how a product service might look using Neverthrow for better error handling:
// src/domain/product/productService.ts
import { Product } from './product';
import { productApi } from '../../infrastructure/api/productApi';
import { Result } from 'neverthrow';
export class ProductService {
async getAllProducts(): Promise<Result<Product[], Error>> {
return await productApi.fetchProducts();
}
async getProductById(id: string): Promise<Result<Product, Error>> {
return await productApi.fetchProductById(id);
}
}
Now, let's implement the productApi with error handling using Neverthrow:
// src/infrastructure/api/productApi.ts
import { Product } from '../../domain/product/product';
import { err, ok, Result } from 'neverthrow';
const API_URL = 'https://api.yourdomain.com/products';
export const productApi = {
async fetchProducts(): Promise<Result<Product[], Error>> {
try {
const response = await fetch(`${API_URL}/`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
return err(new Error('Failed to fetch products'));
}
const products: Product[] = await response.json();
return ok(products);
} catch (error) {
return err(new Error('Network error occurred while fetching products'));
}
},
async fetchProductById(id: string): Promise<Result<Product, Error>> {
try {
const response = await fetch(`${API_URL}/${id}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
return err(new Error(`Failed to fetch product with id ${id}`));
}
const product: Product = await response.json();
return ok(product);
} catch (error) {
return err(new Error(`Network error occurred while fetching product with id ${id}`));
}
}
};
Incorporating Domain-Driven Design into your React applications using TypeScript and Neverthrow can significantly improve the structure, scalability, and error handling of your codebase. By aligning your software development with business needs,
DDD helps deliver solutions that are not only technically sound but also strategically focused. Start using these principles and tools to build robust and business-oriented frontend applications.
Happy coding!