Full-Stack Development Guide: Building an Enterprise Website with Frontend-Backend Separation

1. Project Background and Goals

In modern web application development, the enterprise website is one of the most classic and practical project types. Whether as a capstone project or a hands-on exercise for beginners learning full-stack development from scratch, building a complete site with both a public-facing frontend and an admin backend delivers significant learning value.

This article focuses on an industry-standard frontend-backend separation approach, breaking down the full development pipeline — from frontend rendering and API design to database modeling and authentication — to help readers build systematic full-stack engineering thinking.

The project uses an SPA (Single-Page Application) pattern on the frontend, exposes standardized RESTful APIs on the backend, and relies on a relational database for persistence. The architecture is clean, with clear separation of concerns, making it suitable for educational demonstrations or personal portfolio projects.

2. Technical Architecture Overview

The system follows a classic three-tier architecture: presentation layer, business logic layer, and data layer.

Layer	Technology	Core Responsibilities
Presentation	Mainstream frontend framework + router + responsive UI library	Page rendering, user interaction, route management
Business Logic	Server-side runtime + lightweight web framework + ORM	API exposure, business processing, data mapping
Data	Relational database	Structured data storage and querying
Auth	Token-based mechanism	Admin identity verification

This layered design ensures low coupling and high cohesion across modules, enabling independent development, testing, and maintenance.

3. Frontend Technical Approach

3.1 SPA Framework and Routing

The frontend is built with a mainstream progressive frontend framework to create an SPA. Through component-based development, the page is split into independent components — navigation bar, carousel, news list, product showcase, contact form — each with its own template, logic, and styles. The router dynamically loads the corresponding component based on the URL path, enabling refresh-free navigation and a smooth user experience.

// Route configuration example
const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage },
  { path: '/news', component: NewsList },
  { path: '/admin/login', component: AdminLogin },
]

3.2 Responsive Layout and UI Component Library

To ensure consistent visual quality on desktop, tablet, and mobile, a mature responsive UI framework is used. It provides a grid system, flexbox layout, and pre-built components (navbars, cards, modals). Developers combine class names to quickly build multi-device-compatible layouts. An icon font library is also included, using vector icons instead of bitmaps for both aesthetics and performance.

3.3 Rich Text Editing and Content Management

The backend article publishing feature needs to support mixed text and image content. A lightweight open-source rich text editor is adopted for its small footprint, quick onboarding, and built-in image upload capability. After integrating the editor into the form, administrators can compose content directly in the browser; the result is submitted to the backend as an HTML string for storage.

3.4 HTTP Client and Frontend-Backend Communication

The frontend communicates with the backend through a general-purpose HTTP client library that supports request/response interception, timeout configuration, and request cancellation. A common practice is to encapsulate a unified API module, abstracting each endpoint into its own function:

import axios from 'axios'
const api = axios.create({
  baseURL: '/api',
  timeout: 10000
})
export function fetchNewsList(page = 1) {
  return api.get('/news', { params: { page } })
}
export function submitContact(data) {
  return api.post('/contact', data)
}

4. Backend Technical Approach

4.1 Server Runtime and Web Framework

The backend uses a mature server-side JavaScript runtime with a lightweight web framework to build RESTful APIs. The framework provides routing, middleware, and static file hosting, letting developers focus on business logic. APIs follow REST conventions: HTTP methods (GET, POST, PUT, DELETE) indicate operation type, and status codes (200, 201, 400, 404, 500) report results.

// Express route example
app.get('/api/news', async (req, res) => {
  const page = req.query.page || 1
  const list = await NewsModel.findAndCountAll({ offset: (page - 1) * 10, limit: 10 })
  res.json({ code: 200, data: list })
})

4.2 ORM and Database Modeling

To avoid the maintenance cost and injection risk of raw SQL, a mature ORM (Object-Relational Mapping) tool is used. It lets developers interact with the database in an object-oriented way — defining table structure through models and performing CRUD operations via method calls. The relational database runs locally, which is ideal for development and learning.

Typical table designs include:

• News articles: title, summary, body content, cover image, publish time, status, etc.
• Product showcase: product name, category, description, image, sort weight, etc.
• Admin users: username, encrypted password, role identifier, etc.
• Contact messages: name, phone, email, message content, submission time, etc.

// Sequelize model definition example
const News = sequelize.define('News', {
  title: { type: DataTypes.STRING, allowNull: false },
  summary: DataTypes.TEXT,
  content: DataTypes.TEXT,
  coverImage: DataTypes.STRING,
  status: { type: DataTypes.INTEGER, defaultValue: 1 },
  createdAt: DataTypes.DATE
})

4.3 User Authentication and Token Mechanism

The admin module requires strict identity verification. The project uses JWT (JSON Web Token) for stateless authentication:

1. The admin submits username and password on the login page.
2. After verification, the backend issues a token containing the user ID and expiration time.
3. The frontend stores the token locally and attaches it to subsequent request headers.
4. Backend middleware parses and validates the token; invalid or expired tokens are rejected.

// Core login logic
app.post('/api/admin/login', async (req, res) => {
  const { username, password } = req.body
  const admin = await AdminModel.findOne({ where: { username } })
  if (!admin || !bcrypt.compareSync(password, admin.password)) {
    return res.status(401).json({ code: 401, msg: 'Invalid credentials' })
  }
  const token = jwt.sign({ id: admin.id }, SECRET_KEY, { expiresIn: '24h' })
  res.json({ code: 200, data: { token } })
})

5. Frontend-Backend Integration and Deployment

5.1 Development Environment Setup

The frontend project is initialized with a package manager; after installing dependencies, the local dev server starts (typically on port 5173). The backend runs independently on a separate port (e.g., 3000) with CORS policies allowing the frontend origin. During development, a proxy configuration can forward frontend requests to the backend to avoid cross-origin issues.

5.2 Database Initialization

Create the target database in the local database service, then use the ORM’s sync method or manually execute schema scripts to create tables. It is recommended to provide an initialization script in the project for one-click database and seed data setup.

5.3 Production Deployment Approach

Once complete, the project can be deployed to a cloud server. The frontend build output consists of static files that can be hosted on object storage or served via a CDN. The backend runs as a container or process behind a reverse proxy. The database should have regular backup policies and properly configured access permissions.

6. Project Extension Directions

As a foundational framework, this project supports rich extensions:

• Multi-language support: Implement Chinese-English switching via an internationalization solution.
• SEO optimization: Introduce server-side rendering or pre-rendering strategies to improve search engine indexing.
• Fine-grained permissions: Build RBAC (Role-Based Access Control) on top of JWT to distinguish super admins from regular editors.
• Cloud file storage: Upload images and assets to an object storage service to reduce local disk pressure.
• Logging and monitoring: Integrate logging services and monitoring alerts to track system health in real time.

7. Summary

This article systematically covers how to build a fully functional enterprise website using a frontend-backend separation approach — from architecture design and technology selection to core module implementation, deployment, and extensions. The stack is mature, the ecosystem is well-established, and the learning curve is gentle, making it an excellent choice for a capstone project or a first full-stack hands-on project. After mastering the core workflow described here, readers can iteratively build increasingly complex and polished web applications on this foundation.