Full-Stack Development with React, Node.js, and PostgreSQL

The Big Picture: PERN Stack Architecture

Our task manager will be built using the PERN stack: PostgreSQL, Express, React, and Node.js. Let's visualize how these technologies work together to create a cohesive application.

This flow can be broken down into a few key steps:

1. A user performs an action in the React application (e.g., clicks "Add Task").
2. The React app sends an HTTP request (like POST, GET, PUT) to our Express/Node.js API.
3. The API receives the request, validates it, and executes the necessary business logic. This involves running a SQL query against our PostgreSQL database.
4. The database processes the query and returns the requested data (or a confirmation of success) to the API.
5. The API formats this data into a JSON response and sends it back to the React app.
6. The React app uses this response to update its state, causing the UI to re-render and show the new information to the user.

To hear this flow explained, watch this short introductory clip.

Designing the Project's Blueprint: Folder Structure

A well-organized folder structure is critical for any software project. It makes the code easier to navigate, maintain, and scale. For our full-stack application, we will adopt a common and effective pattern: a single root folder containing two distinct sub-projects: one for the client (React) and one for the server (Node.js).

task-manager/
├── client/         # React Frontend
│   ├── src/
│   ├── package.json
│   └── ...
└── server/         # Node.js/Express Backend
    ├── src/
    ├── package.json
    └── ...

This structure is a best practice for several reasons. Let's consult an article that explains the benefits.

Architecting the Backend for Scalability

In previous lessons, we often placed our database queries and business logic directly inside the Express route handlers for simplicity. This is fine for small examples, but for a real-world application like our capstone, we need a more robust structure.

We will use a Three-Layer Architecture for our backend. This pattern separates concerns into distinct layers:

1. Router Layer (routes/): Defines the API endpoints (e.g., GET /tasks) and points them to the appropriate controller function.
2. Controller Layer (controllers/): Acts as the intermediary. It receives the HTTP request, calls the necessary service(s) to handle the business logic, and sends the final HTTP response. It does not talk to the database directly.
3. Service Layer (services/): Contains the core business logic of your application. For example, calculating values, orchestrating calls to multiple data sources, or deciding what to do after a database operation.
4. Data Access Layer (data/ or db/): The only layer that communicates directly with the database. It contains all the SQL queries.

This separation makes your code more organized, easier to test, and much simpler to maintain as the application grows.

This short video provides a clear explanation of this architectural pattern and why it's superior to mixing all your logic together.

Let's Build the Skeleton: Initial Project Setup

Now that we have our architectural plan, let's create the project's foundational structure.

Step 1: Backend Setup (server folder)

We'll start by initializing our Node.js project and creating the directory structure for our three-layer architecture.

1. Create a main project folder: mkdir task-manager

2. Navigate into it and create the server folder: cd task-manager and mkdir server

3. Navigate into the server folder: cd server

4. Initialize a new Node.js project: npm init -y

5. Install the essential backend dependencies:

   • npm install express pg cors dotenv
   • npm install --save-dev nodemon (for automatic server restarts during development)

6. In your server/package.json, add a dev script to run the server with nodemon:

   "scripts": {
     "dev": "nodemon index.js"
   }
   

7. Create the initial folder structure inside server:

   • mkdir src
   • cd src
   • mkdir routes controllers services db

8. Create a placeholder entry file server/src/index.js with a basic Express server setup:

   require('dotenv').config();
   const express = require('express');
   const cors = require('cors');
   
   const app = express();
   
   app.use(cors());
   app.use(express.json());
   
   app.get('/', (req, res) => {
     res.send('Task Manager API is running...');
   });
   
   const PORT = process.env.PORT || 5000;
   
   app.listen(PORT, () => {
     console.log(`Server is running on port ${PORT}`);
   });
   

Step 2: Frontend Setup (client folder)

Next, we'll set up the React project using Vite, our chosen build tool.

1. Navigate back to the root task-manager folder.
2. Create the client folder: mkdir client
3. Navigate into it: cd client
4. Initialize a new React project using Vite: npm create vite@latest . -- --template react
   • (Note: The . tells it to create the project in the current folder).
5. Install the project dependencies: npm install
6. Install axios, our library for making API calls: npm install axios

// client/vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': { // We'll prefix our API routes with /api
        target: 'http://localhost:5000', // The address of our backend
        changeOrigin: true,
        secure: false,
      }
    }
  }
})

Step 3: Database Setup

Finally, we need to create the database our application will use. The freeCodeCamp video shows how to do this from the command line, which is an excellent skill to have.

For our Task Manager, we will need at least two tables: users and tasks. Here are the initial SQL commands you can use to create them in your own database.

-- For the 'users' table
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    role VARCHAR(50) DEFAULT 'user',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- For the 'tasks' table
CREATE TABLE tasks (
    id SERIAL PRIMARY KEY,
    user_id INTEGER NOT NULL,
    title VARCHAR(255) NOT NULL,
    description TEXT,
    is_completed BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE
);

Conclusion

Excellent work! You have successfully designed the architecture for our capstone project and laid the digital foundation upon which we will build. This initial planning and setup is one of the most important steps in any software engineering project.

Key Takeaways:

• You can now visualize the complete data flow in a PERN stack application, from the React frontend to the PostgreSQL database and back.
• You understand the importance of a separated client/server project structure for modularity and maintenance.
• You are ready to implement a scalable three-layer architecture (Controller, Service, Data Layer) on the backend.
• You have created the initial project folders, installed dependencies, and defined the database schema, giving us a clean and organized starting point.

Preview of the Next Lesson:
With our architecture in place, we're ready to start coding. The next lesson focuses on building the core of our backend API: "Build a complete REST API with secure user authentication and CRUD functionality for tasks and projects". We'll begin by implementing the user registration and login endpoints within our new, organized three-layer structure.