How To Dev

Introduction This is a comprehensive page about the technologies I have shared in series format. You can view brief introductions and links to directly access each series you are interested in. In the field of software development, to deploy a product from the initial idea to its release, the standard process typically involves several stages as follows: Database : Designing and implementing the database according to business requirements, storing data during the system's operation. Backend : Handling the main logic of the system, communicating with the database and services. Frontend : Building the interface for users to interact with the system, which could be a desktop, mobile, or web application. This usually includes implementing UI/UX and integrating APIs from the backend. DevOps : Deploying the system for use, which can be done on a server or in the cloud. Testing : Applying testing methods to ensure the product meets the standards for release. Of course, these are just stan...

Introduction D3.js (Data-Driven Documents) is a powerful JavaScript library for producing dynamic, interactive data visualizations from numerical data. Instead of providing pre-built charts, D3 offers low-level tools that allow you to manipulate DOM elements directly (typically SVGs, Canvas, or HTML). The advantages: Infinite Customization: You can create any type of chart you can imagine. High Performance: Smoothly handles large data sets and animated transitions. Strong Mathematical Ecosystem: Fully supports scale calculation functions, coordinate axis formatting, and complex geometric algorithms. Detail First, let's start with a simple example of drawing a line chart that describes monthly revenue during the year. Please create the file app/api/revenue/route.ts to simulate a 12-month revenue api with a random amount from 1000-6000 import {NextResponse} from 'next/server' export async function GET () { const data = Array. from ({ length: 12 }, ( _ , i ) => ...

Introduction NextJS App Router is a revolution in building web applications with React, bringing optimized performance and a modern development experience: App Router: A new routing system based on React Server Components, allowing for complex data processing directly on the server, reducing the bundle size sent to the client, and supporting excellent data streaming. Folder-based Routing: Routing is defined based on the folder structure. Each folder represents a URL segment (segment), helping manage code intuitively and easily set up shared layouts. Server Actions: Allows you to write data processing functions (such as writing to a database) that run directly on the server but can be easily called from client components without needing to build manual API endpoints. Here, when using the App Router, there will be special files to distinguish between global (root app) and local as follows: Global: global-error.tsx : This must be a client component, used as an error boundary for the entir...