Setting up a Full Stack Development Environment for Beginners

by RowsanMay 29th, 2025
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

A full stack developer is someone who works on both the frontend (what users see) and the backend (how things work behind the scenes).

People Mentioned

Mention Thumbnail
Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - Setting up a Full Stack Development Environment for Beginners
Rowsan HackerNoon profile picture


Table of Contents

  1. Introduction
    • What is Full Stack Development?
    • Why Your Setup Matters
  2. Understanding the Basics
    • Frontend vs Backend
    • Common Full Stack Technologies
  3. Choosing the Right Stack
    • Popular Stacks (MERN, LAMP, etc.)
    • Choosing Based on Your Goals
  4. Tools You’ll Need
    • Code Editor (VS Code)
    • Terminal or Command Line
    • Version Control (Git & GitHub)
  5. Setting Up the Frontend
    • Installing Node.js and npm
    • Creating Your First React App (or HTML/CSS/JS Setup)
  6. Setting Up the Backend
    • Installing a Backend Runtime (Node.js)
    • Setting Up Express (or another framework)
    • Connecting to a Database (MongoDB or PostgreSQL)
  7. Database Setup
    • Installing and Running MongoDB/PostgreSQL
    • Using a GUI like MongoDB Compass or pgAdmin
  8. Connecting Frontend and Backend
    • Creating API Routes
    • Fetching Data from the Backend
  9. Project Structure and Best Practices
    • Folder Organization
    • Environment Variables and .env Files
  10. Running and Testing Your App
    • Running Frontend and Backend Together
    • Using Tools like Postman for Testing APIs
  11. Bonus: Using Docker (Optional)
    • Why Use Docker?
    • Basic Docker Setup for Beginners
  12. Conclusion
    • Recap of Your Setup
    • What to Build Next

1. Introduction

What is Full Stack Development?

You hear the term “full stack developer” a lot.

But what does it really mean?

A full stack developer is someone who works on both the frontend (what users see) and the backend (how things work behind the scenes).

Let’s break that down:

  • Frontend: This includes HTML, CSS, and JavaScript — the core building blocks of any user interface. You’ll often use frameworks like React, Vue, or Angular here.
  • Backend: This is the server side. It handles data storage, processing, and logic. Common stacks include Node.js, Express, Python with Django, or PHP with Laravel.
  • Database: Full stack also means dealing with data — using tools like MongoDB, PostgreSQL, or MySQL.

So when you say “full stack,” you’re not just writing code. You’re building entire applications from end to end.

Here’s a simple visual:

User ↔️ Frontend ↔️ Backend ↔️ Database

It’s like being a restaurant owner who also cooks, waits tables, and manages the business.

Why Your Setup Matters

Now here’s something most beginners ignore:

Your development setup will either slow you down or speed you up.

When you’re working on both frontend and backend, you need a smooth workflow.

You’re constantly switching between:

  • Writing UI code in one folder
  • Hitting APIs in another
  • Checking logs
  • Debugging errors
  • Running local servers
  • Saving files
  • Refreshing the browser

If your environment is clunky, you’ll spend more time fixing things than building.

Let’s say you’re building a simple Node.js + React app.

Here’s a good setup to start with:

my-app/
├── client/         # React frontend
│   ├── src/
│   └── package.json
├── server/         # Node.js backend
│   ├── routes/
│   └── server.js
└── README.md

You’d run two terminals:

# Terminal 1: start the backend
cd server
node server.js

# Terminal 2: start the frontend
cd client
npm start

With this kind of split setup, you can:

  • Keep frontend and backend cleanly separated
  • Deploy them independently if needed
  • Debug without confusion

So yes, your code matters. But your system — how you organize, run, and debug — matters just as much.

2. Understanding the Basics

Let’s get the foundation right.

Before jumping into full stack development, you need to understand what you’re actually stacking.

Frontend vs Backend

Think of an app as a restaurant.

The frontend is the part the customer sees—the menu, the table, the presentation.

The backend is the kitchen—where the real work happens, and the customer never sees it.

Let’s break it down.

What is Frontend?

Frontend is what users interact with.

If you’ve opened a website or clicked a button—congrats, you’ve seen the frontend.

It includes:

  • Layout
  • Colors
  • Buttons
  • Text
  • Animations

It’s all built using:

  • HTML (structure)
  • CSS (style)
  • JavaScript (interactivity)

Frameworks and libraries help too:

  • React (by Meta)
  • Vue
  • Angular

Here’s a simple frontend code example using React:

import React from "react";

function Welcome() {
  return (
    <div>
      <h1>Hello, user!</h1>
      <p>Welcome to our app.</p>
    </div>
  );
}

export default Welcome;

That’s a component. Just a piece of UI. You can reuse it anywhere in your app.

What is Backend?

Backend is what happens behind the scenes.

When you log in, save a note, or load data—that’s backend work.

It handles:

  • Servers
  • Databases
  • Authentication
  • Business logic

Languages often used for backend:

  • Node.js (JavaScript)
  • Python
  • Java
  • Go
  • Ruby

Frameworks include:

  • Express (for Node.js)
  • Django (for Python)
  • Spring (for Java)

Here’s a basic backend using Express:

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("Welcome to the backend!");
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

You visit localhost:3000—it responds with a message. Simple, right?

Now, when frontend and backend talk to each other using APIs, you get a full experience.

Common Full Stack Technologies

A full stack developer knows both frontend and backend. But you don’t need to know everything.

Just pick one tool from each category and build from there.

Here are common combinations used in the real world:

Frontend

Backend

Database

Stack Name

React

Node.js

MongoDB

MERN

Angular

Node.js

MongoDB

MEAN

Vue

Laravel

MySQL

Custom

HTML/CSS/JS

Django

PostgreSQL

Custom

Let’s say you’re using the MERN stack (MongoDB, Express, React, Node.js):

  • MongoDB stores the data
  • Express handles the server routes
  • React builds the UI
  • Node.js runs the backend

Everything uses JavaScript. That’s why it’s beginner-friendly.


Key Takeaway: The frontend is what people see. The backend is what makes it work. Pick one tool from each side, build something small, and grow from there.


3. Choosing the Right Stack

Choosing a tech stack isn’t just about what’s trending. It’s about choosing the right tools for your project goals.

Some developers chase trends. Others choose what works for them.

Let’s talk about the popular stacks first:

MERN Stack

  • MongoDB – NoSQL database
  • Express.js – Backend framework for Node
  • React – Frontend library
  • Node.js – JavaScript runtime


Why it’s popular: It’s all JavaScript—frontend to backend. That means fewer languages to learn and less context switching.

Simple MERN Example:

// A basic Express route in Node.js
const express = require('express');
const app = express();

app.get('/api/greeting', (req, res) => {
  res.json({ message: 'Hello from the backend!' });
});

app.listen(5000, () => console.log('Server started on port 5000'));
// React frontend calling the backend
import { useEffect, useState } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api/greeting')
      .then(res => res.json())
      .then(data => setMessage(data.message));
  }, []);

  return <div>{message}</div>;
}

LAMP Stack

  • Linux – Operating system
  • Apache – Web server
  • MySQL – Relational database
  • PHP – Server-side scripting


Why it’s still used: It’s reliable. It’s been around forever. Lots of WordPress, Joomla, and older enterprise apps still use it.

Other Notable Stacks

  • MEAN (MongoDB, Express, Angular, Node)
  • Django + PostgreSQL (Python lovers)
  • Ruby on Rails (Fast for MVPs)
  • JAMstack (Modern static sites + APIs)

Choosing Based on Your Goals

Goal: Build Fast, Learn Fast→ Go with MERN or Django. Tons of tutorials. Easy setup. Quick feedback loops.

Goal: Build a CMS or Blog→ LAMP is still solid. Or go headless with WordPress + a React frontend.

Goal: Build a Scalable SaaS→ Node + PostgreSQL or Django + PostgreSQL Choose something that has strong ORM support and a good ecosystem.

Goal: Build a Job-Ready Portfolio→ MERN, MEAN, or any JavaScript-based stack. Most job listings look for React or Vue, not PHP.


Goal: Just Experiment→ Don’t worry about the “best stack. ”Pick one. Build something. Learn.

Here’s what matters most:

  • You can always change stacks later.
  • The stack doesn’t make your project good—execution does.
  • Choose tools you enjoy using. You’ll stick with it longer.

You don’t need to master everything.

You just need to start building.


Tools You’ll Need

Before you start building anything, it’s important to set up your environment. You don’t need a lot of tools to start writing code, but the few that you do need — matter a lot.

Let’s go over the basics you’ll use every day.

1. Code Editor (VS Code)

A code editor is where all the action happens. You write your code, debug it, and sometimes even run it from the same place.

The most popular option today is Visual Studio Code (VS Code) — and for good reason.

  • It’s lightweight but powerful.
  • Works on Windows, macOS, and Linux.
  • Comes with thousands of extensions to customize your workflow.

Example: Writing a basic HTML file in VS Code

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

Once you save this file in VS Code, you can right-click and open it in your browser. You can also install extensions like “Live Server” to auto-refresh the page every time you make changes.

2. Terminal or Command Line

If you’ve never used it, the terminal might look intimidating. But it’s just a text-based way to interact with your computer. And once you get comfortable, you’ll never want to go back.

Here’s what you’ll use it for:

  • Navigating through files
  • Running your code
  • Installing tools
  • Using Git

Example: Navigating folders and running a file

# Move into a folder
cd my-project

# List files
ls

# Run a JavaScript file (Node.js must be installed)
node app.js

You can open the terminal inside VS Code by pressing:

Ctrl + ` (backtick)

3. Version Control (Git & GitHub)

Version control helps you track changes to your code over time. Think of it like a time machine for your codebase.


Git is the tool that runs on your computer. GitHub is where your code lives online — like Google Drive, but for code.

This setup is critical for solo developers and even more important when working in a team.

Example: Basic Git workflow

# Initialize a Git repo
git init

# Track all files
git add .

# Save a snapshot with a message
git commit -m "Initial commit"

# Link to a GitHub repo (replace with your actual repo URL)
git remote add origin https://github.com/your-username/my-project.git

# Push your code to GitHub
git push -u origin main

Once your code is on GitHub, others can see it, contribute to it, or even fork it for their own use.

Final Thoughts

These three tools — VS Code, the terminal, and Git/GitHub — are foundational. They might feel unfamiliar at first, but give it a week or two and they’ll feel natural.

No matter what you build, you’ll keep coming back to these. So learn them well — they’ll save you hours down the road.

Setting Up the Frontend

Before you can build anything on the web, you need the tools.

Whether you're building a React app or a simple site with HTML, CSS, and JavaScript, it all starts here.

Let’s walk through the setup—step by step.

Step 1: Install Node.js and npm

Node.js lets you run JavaScript on your computer, not just in the browser.

npm (Node Package Manager) comes with Node.js. It helps you install libraries and tools.

How to install

  1. Go to the official Node.js website: https://nodejs.org
  2. Download the LTS version (Long-Term Support).
  3. Install it like any normal app.

To check if everything works, open your terminal and run:

node -v
npm -v

You should see something like:

v18.18.0
9.5.1

If you see version numbers, you're ready to go.

Step 2: Create Your First React App

React is a library for building user interfaces. It’s fast, component-based, and flexible.

We’ll use a tool called create-react-app to get started quickly.

Create a new React project:

npx create-react-app my-frontend
cd my-frontend
npm start

That’s it.

Your browser should automatically open at http://localhost:3000 with a working React app.

You’ll see something like:

“Edit src/App.js and save to reload.”

Congrats—you just created your first React app.

What If You’re Not Using React?

No problem.

You can also start with plain HTML, CSS, and JS.

Here’s a simple folder structure:

my-frontend/
│
├── index.html
├── style.css
└── script.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Frontend</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="script.js"></script>
  </body>
</html>

style.css

body {
  font-family: sans-serif;
  background: #f2f2f2;
  padding: 2rem;
}

script.js

console.log('Page loaded');

Just open index.html in your browser. No server needed.

Final Words

It’s easy to overcomplicate frontend setup.

But most of the time, you only need:


→ A text editor→ A browser→ A working folder→ Node.js (for React or modern tools)

Whether you choose React or go old-school with HTML/CSS/JS, the key is to start small.

Then grow as your project demands it.

No fluff. Just clean, working code.

Ready to build something?

Setting Up the Backend

Every great web app has a solid backend behind it. It's where your data is handled, requests are processed, and real business logic lives.

Here’s how you can set one up from scratch:

1. Installing a Backend Runtime (Node.js)

Before anything else, you need a backend runtime environment. We’ll use Node.js, which lets you run JavaScript outside the browser.

Step-by-step:

  1. Go to https://nodejs.org
  2. Download the LTS version (recommended for most users)
  3. Install it with default options

To check if it’s installed, run:

node -v
npm -v

These commands show the versions of Node.js and npm (Node’s package manager). If you see version numbers, you’re good to go.

2. Setting Up Express (or another framework)

Express is a minimal and fast Node.js web framework. It helps you handle routes, requests, and middleware.

Let’s set it up.

Initialize a project:

mkdir backend
cd backend
npm init -y

This creates a new package.json file.

Install Express:

npm install express

Create a basic server:

Create a file called index.js:

const express = require('express');
const app = express();
const PORT = 3000;

// Middleware to parse JSON
app.use(express.json());

// Test route
app.get('/', (req, res) => {
  res.send('Hello, world!');
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Now start the server:

node index.js

Visit http://localhost:3000 in your browser, and you should see: Hello, world!

3. Connecting to a Database (MongoDB or PostgreSQL)

You need a place to store data. Let’s look at both MongoDB (NoSQL) and PostgreSQL (SQL) options.

Option A: MongoDB (using Mongoose)

Install dependencies:

npm install mongoose

Then connect to MongoDB:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/myapp', {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => console.log('MongoDB connected'))
.catch(err => console.log(err));

Create a simple schema:

const User = mongoose.model('User', {
  name: String,
  email: String
});

// Save a new user
const newUser = new User({ name: 'John', email: 'john@example.com' });
newUser.save();

Option B: PostgreSQL (using pg)

Install the pg module:

npm install pg

Connect to PostgreSQL:

const { Client } = require('pg');

const client = new Client({
  user: 'postgres',
  host: 'localhost',
  database: 'myapp',
  password: 'yourpassword',
  port: 5432
});

client.connect()
  .then(() => console.log('PostgreSQL connected'))
  .catch(err => console.log(err));

Insert a record:

client.query(
  'INSERT INTO users(name, email) VALUES($1, $2)',
  ['John', 'john@example.com']
);

Final Note

The backend is your engine. Whether you use MongoDB for flexibility or PostgreSQL for structure, just start simple.

Once the basics are running, you can build out APIs, add auth, or set up routes for your frontend.


Keep it simple. Focus on clarity. And build one piece at a time.

Database Setup

When you build an application, your database is the foundation. It stores everything your app needs to remember.

Let’s walk through setting up two popular databases: MongoDB (NoSQL) and PostgreSQL (SQL).

We’ll cover:

  • How to install and run each
  • How to view your data using simple GUI tools

Installing and Running MongoDB

MongoDB is a NoSQL database. It stores data as flexible documents (JSON-like format).

1. Install MongoDB


During setup, check the box that says “Install MongoDB as a Service. ”That way, it runs in the background automatically.

2. Start MongoDB

On most systems, MongoDB starts automatically. If not, start it manually:

macOS (Homebrew):

brew services start mongodb-community


Windows: Use Services to start MongoDB Server, or run in terminal:

net start MongoDB

Using MongoDB Compass

MongoDB Compass is the official GUI tool.

Steps:

  1. Download from mongodb.com/try/download/compass
  2. Open it
  3. Connect using the default local URI:
mongodb://localhost:27017

Now you can:

  • Browse your collections
  • Run queries
  • Add or delete documents
  • Visualize your data easily

Example:

Let’s insert data into a database using code, then view it in Compass.

// insert.js
const { MongoClient } = require('mongodb');

async function run() {
  const client = new MongoClient('mongodb://localhost:27017');
  await client.connect();

  const db = client.db('shop');
  const products = db.collection('products');

  await products.insertOne({
    name: 'Laptop',
    price: 999,
    inStock: true
  });

  console.log('Inserted successfully');
  await client.close();
}

run();

After running this, open Compass → connect → open shop database → products collection → see your data.

Installing and Running PostgreSQL

PostgreSQL is a powerful open-source SQL database.

1. Install PostgreSQL

During setup, it will ask for:

  • A password for the “postgres” user
  • A port (default is 5432)

Save those — you’ll need them later.

2. Start PostgreSQL

On most systems, it starts after installation.


To check: macOS:

brew services start postgresql


Windows: Use pgAdmin or run:

net start postgresql

Using pgAdmin

pgAdmin is the official GUI for PostgreSQL.

Steps:

  1. Installed automatically with PostgreSQL (or download separately)
  2. Open it
  3. Create a new connection:
    • Name: anything
    • Host: localhost
    • Port: 5432
    • Username: postgres
    • Password: (whatever you set during install)

Once connected, you can:

  • Create tables
  • Write SQL queries
  • Inspect your data

Example:

Let’s create a table and insert data using Node.js.

// insert_pg.js
const { Client } = require('pg');

const client = new Client({
  host: 'localhost',
  port: 5432,
  user: 'postgres',
  password: 'your_password',
  database: 'postgres'
});

async function run() {
  await client.connect();

  await client.query(`
    CREATE TABLE IF NOT EXISTS users (
      id SERIAL PRIMARY KEY,
      name TEXT,
      email TEXT UNIQUE
    );
  `);

  await client.query(`
    INSERT INTO users (name, email)
    VALUES ($1, $2)
  `, ['Alice', 'alice@example.com']);

  console.log('Data inserted');
  await client.end();
}

run();

Open pgAdmin → find the users table → explore the data.

Wrap Up

You don’t need to be a database expert to get started.

Install it .Run it. Use the GUI to see what’s happening under the hood.

Simple tools like Compass and pgAdmin let you manage everything without touching the terminal after setup.

No complex commands. No unnecessary extras. Just the data, and your app.

Connecting Frontend and Backend


A frontend that can’t talk to the backend is just a fancy brochure. A backend without a frontend? A black box no one can see.

To build real applications, you need them talking to each other.

Let’s break this into two parts:

  1. Creating API routes in the backend
  2. Fetching data from those routes in the frontend

We’ll keep things simple. Just one example, explained clearly.

1. Creating API Routes (Node.js + Express)


Let’s say you’re building a product listing page. You want the frontend to load a list of products from the backend.

Here’s how the backend route might look:

// backend/index.js
const express = require('express');
const app = express();
const PORT = 3001;

// Simulated database
const products = [
  { id: 1, name: 'Laptop', price: 1000 },
  { id: 2, name: 'Keyboard', price: 100 },
  { id: 3, name: 'Mouse', price: 50 }
];

// API route to get all products
app.get('/api/products', (req, res) => {
  res.json(products);
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

🧠 What’s happening here:

  • We use Express to create a simple server.
  • We define a route at /api/products.
  • When a GET request hits that route, it returns a JSON list of products.

No database setup. No complex logic. Just the essentials.

2. Fetching Data from the Backend (React Example)

Now let’s hit that API route from the frontend.

// frontend/src/ProductList.jsx
import { useEffect, useState } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3001/api/products')
      .then(res => res.json())
      .then(data => setProducts(data))
      .catch(err => console.error('Error fetching products:', err));
  }, []);

  return (
    <div>
      <h2>Available Products</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.name}: ${product.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

🧠 What’s happening here:

  • When the component loads, it makes a GET request to the backend.
  • It stores the result in products state.
  • Then it renders each product in a list.

That’s it.

Key Takeaways

→ Backend gives your app the power to store, fetch, and update data.→ Frontend brings it to life for the user.→ A clean API route + a clean fetch = a working connection.

You don’t need to overcomplicate it. Start with a single route and a simple fetch. Then build on top of it.

Project Structure and Best Practices

When starting a new project, most developers jump straight into writing code.

But skipping structure is like building a house without a blueprint.

Sooner or later, it becomes messy, hard to manage, and impossible for others to contribute.

So, let’s talk about two things that create a solid foundation:


→ Folder Organization→ Environment Variables and .env Files

1. Folder Organization

Your folder structure is not just about being clean. It’s about making your project scalable, readable, and easy to onboard new developers.

Here’s a simple structure to start with for a Node.js or React app:

my-app/
├── public/            # Static files (only for frontend apps)
├── src/               # All application logic
│   ├── assets/        # Images, icons, styles
│   ├── components/    # Reusable UI components
│   ├── pages/         # Route-based pages (for Next.js or React Router)
│   ├── services/      # API and external service logic
│   ├── utils/         # Helper functions
│   ├── hooks/         # Custom React hooks (if using React)
│   ├── contexts/      # Context providers (optional)
│   └── index.js       # Entry point
├── .env               # Environment variables
├── .gitignore         
├── package.json       
└── README.md

Let’s break that down:

  • components/: Keeps all your building blocks in one place.
  • services/: Handles all your fetch/axios calls so your UI stays clean.
  • utils/: Shared logic that doesn’t belong to any one component.
  • pages/: Defines routes if you're using a framework like Next.js or React Router.


📌 Keep things grouped by function, not type. That way, changes stay localized, and your app scales better.

2. Environment Variables and .env Files

Environment variables help keep sensitive or environment-specific data outside your code.

Never hardcode secrets. Never push API keys to GitHub.

Instead, use a .env file.

Here’s what a .env might look like:

# .env
REACT_APP_API_URL=https://api.example.com
REACT_APP_FIREBASE_KEY=your_firebase_key

In React (using Create React App), you can access these like this:

// src/services/api.js

const API_URL = process.env.REACT_APP_API_URL;

export const fetchData = async () => {
  const res = await fetch(`${API_URL}/data`);
  const data = await res.json();
  return data;
};

In Node.js, it works the same, but you need to load them with dotenv:

npm install dotenv

Then in your app:

// server.js

require('dotenv').config();

const express = require('express');
const app = express();

const PORT = process.env.PORT || 3000;
const API_KEY = process.env.API_KEY;

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});


📌 Always add .env to your .gitignore..env files should never be pushed to version control.

The Key Takeaways

→ Group files by what they do, not what they are→ Keep your root folder clean→ Use .env to manage secrets and configs→ Never hardcode values that might change later→ Make your project readable for future-you (or your teammate)

You don’t need a fancy setup.

You just need structure.

Because the best code isn’t the smartest. It’s the one someone else can read, understand, and improve.

Running and Testing Your App

Before you launch, you need to see your app in action. That means running your frontend and backend together, and making sure your APIs work exactly as expected.

Let’s break it down.

1. Running Frontend and Backend Together

You’ve got two parts:

  • A frontend—usually a React or Vue app
  • A backend—maybe Node.js with Express or something else


Each runs on a different port. You want to run them side-by-side without headaches.

The Common Setup:

Let’s say:

  • Your frontend runs on http://localhost:3000
  • Your backend runs on http://localhost:5000

But when your React app tries to call /api/users, it hits port 3000, not 5000. That causes a CORS error.

The Fix? Use a Proxy

In your React project, open package.json and add this line:

"proxy": "http://localhost:5000"

Now, when React makes a call to /api/users, it quietly forwards it to your backend.

Example Folder Structure

my-app/
├── client/          # React app
│   └── package.json
├── server/          # Node/Express backend
│   └── index.js
└── README.md

Running Both Together

You have two options:

Option 1: Manually run both

In two separate terminals:

# Terminal 1
cd client
npm start
# Terminal 2
cd server
node index.js

Option 2: Use a tool like concurrently

Install it:

npm install concurrently --save-dev

In the root package.json (outside both folders):

"scripts": {
  "start": "concurrently \"npm run server\" \"npm run client\"",
  "client": "cd client && npm start",
  "server": "cd server && node server/index.js"
}

Now just run:

npm start

Everything fires up with a single command.

2. Using Postman to Test Your APIs


You built your backend. But how do you know your endpoints work before wiring them into the frontend?

Use Postman—a tool to test your APIs without writing any code.

Example: Testing a POST /api/users Route

Let’s say your Express route looks like this:

// server/routes/user.js
app.post('/api/users', (req, res) => {
  const { name, email } = req.body;
  if (!name || !email) {
    return res.status(400).json({ error: 'Name and email required' });
  }
  res.status(201).json({ message: 'User created' });
});

Steps in Postman:

  1. Open Postman
  2. Select POST method
  3. Enter URL: http://localhost:5000/api/users
  4. Go to Body tab → Select raw → Choose JSON
  5. Paste this:
{
  "name": "Jane Doe",
  "email": "jane@example.com"
}
  1. Click Send

You should get:

{
  "message": "User created"
}

Try sending empty fields—you’ll get a 400 error.

That’s how you know your validation works.

Final Thoughts

Running both sides of your app together and testing APIs early gives you control. No guesswork. No surprises. Just clarity.

→ Use a proxy or a single command to launch both ends→ Use Postman to test your logic before the UI touches it

This is how real development flows: One layer at a time. One tool at a time. One fix at a time.

Want to build smoother apps? Start by testing smarter.

Bonus: Using Docker (Optional)

You don’t need Docker to start your project.

But using Docker can save you hours of setup pain—especially when you're working in teams, switching machines, or deploying to production.

Let’s break it down.

Why Use Docker?

Every project depends on some environment: specific versions of Node.js, libraries, ports, config files, and more.

But here’s the problem: That environment can break when you run the project on a different machine or OS.

Docker solves this.

It packages your app and its environment into one container.

That way, your app runs the same way everywhere.

Think of it like a portable development box:

  • You build once.
  • You run anywhere.
  • It works the same every time.


This is powerful for:→ New developers joining the team→ Switching from Windows to Mac→ Avoiding “it works on my machine” problems

Basic Docker Setup for Beginners

Let’s say you have a simple Node.js app.

Here’s how you can run it inside Docker.

1. Create a Dockerfile

This file tells Docker how to build the environment for your app.

# Use official Node.js image from Docker Hub
FROM node:18

# Set working directory
WORKDIR /app

# Copy package.json and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of your app
COPY . .

# Expose the port your app runs on
EXPOSE 3000

# Run the app
CMD ["npm", "start"]

2. Create a .dockerignore file

This keeps things like node_modules out of your Docker image.

node_modules
npm-debug.log

3. Build the Docker image

Open your terminal and run:

docker build -t my-node-app .

This creates an image called my-node-app.

4. Run the container

Now, spin up the container with:

docker run -p 3000:3000 my-node-app

Your app is now running inside Docker, and accessible on http://localhost:3000.

Final Thoughts

You don’t need Docker to be productive.

But if you want to ship faster, onboard others quickly, or make deployments smoother, it’s worth learning.

Start small. Try Docker on one project.

Then watch how much easier your workflow becomes.


Want to go deeper? Try Docker Compose next. It lets you run your app with a database, Redis, or anything else—just with one command.

But for now, even this basic setup puts you ahead of most developers.

Conclusion

Recap of Your Setup

Let’s pause and look at what you’ve built so far.

  • You set up a basic React app using Vite for fast development.
  • You added Tailwind CSS to style your UI without writing custom CSS.
  • You built a simple component that displays dynamic data using props and state.
  • You used useEffect to fetch data and update the UI in real time.

Here’s a quick reminder of the component you created:

// components/UserCard.jsx
import { useEffect, useState } from "react";

function UserCard({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, [userId]);

  if (!user) return <p>Loading...</p>;

  return (
    <div className="p-4 border rounded-lg shadow-sm bg-white">
      <h2 className="text-xl font-semibold">{user.name}</h2>
      <p className="text-gray-600">{user.email}</p>
      <p className="text-gray-500">{user.company.name}</p>
    </div>
  );
}

export default UserCard;

That might seem simple, but don’t underestimate it.

You’re already working with:

  • API calls
  • React hooks
  • Dynamic rendering
  • Component reusability

This is a solid foundation.

What to Build Next

Now that you’ve built the basics, here are some small but meaningful next steps:

  1. Add Search Functionality Let users search for a user by name or ID.→ Use a controlled input field with useState.
  2. Create a User List Page Instead of showing just one user, fetch and display a list of users.→ Use .map() and handle loading/error states.
  3. Build a Simple Router Add React Router to navigate between pages like /users and /users/:id.
  4. Handle Errors Gracefully Show a fallback UI if the API call fails.→ Learn how to use .catch() and conditional rendering.
  5. Extract and Reuse Components Break your UI into smaller parts: Avatar, UserInfo, UserCard.→ Start thinking in components.

Every small thing you build teaches you a new part of the frontend puzzle.

You don’t need to build something big. You just need to keep building.

Trending Topics

blockchaincryptocurrencyhackernoon-top-storyprogrammingsoftware-developmenttechnologystartuphackernoon-booksBitcoinbooks