Building a Full-Stack & DevOps Masterpiece chat-app: A 14-Day Journey to Real-World Skills

Welcome to Day 1 of our 14-Day Dev Journey!

Welcome to Day 1 of our 14-Day Dev Journey!

This blog series is a personal learning adventure, that I'm inviting you to join. As I build my skills in full-stack development and DevOps, I’ve decided to learn in public and document everything along the way.

Over the next 14 days, I’ll be working on a real-world project step-by-step, treating it like a proper portfolio build. Each day will focus on a small but meaningful part of the project from backend setup to version control, CI/CD, authentication, and deployment.

I’m not claiming to be an expert, this is me figuring it out, asking questions, solving problems, and sharing what I learn.

If you’re learning too, or you just want to see what a real DevOps-style project flow looks like for someone still growing, you’re in the right place. Let’s learn and build together.

Tools We’ll Use:

• Node.js

• Express

• Git & GitHub

• VSCode or any code editor

• Basic terminal/CLI knowledge

Step-by-Step Breakdown:

Step 1: Create Your Project Folder

mkdir chat-app

cd chat-app

Why? This gives our entire project a root directory to stay organized. All code and configurations will live here.

Step 2: Initialize Git

git init

Why? Git tracks your changes over time. It’s essential for version control, collaborating with others, and pushing to GitHub.

Optional: Create a .gitignore file to avoid tracking node_modules, .env, etc.

echo "node_modules/\n.env" > .gitignore

Step 3: Initialize Node.js & Install Express

npm init -y

npm install express

Why? Node.js allows you to run JavaScript on the server. Express is a fast, minimalist framework to handle routes, middleware, and APIs efficiently.

Step 4: Create Basic Server File

Create a file index.js, and iside the file insert the following commands

const express = require('express');

const app = express();

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

app.get('/', (req, res) => {

  res.send('Welcome to the Real-Time Chat App API');

});

app.listen(PORT, () => {

  console.log(`Server is running on port ${PORT}`);

});

Why? This sets up a basic backend server that listens to requests. The root route / confirms your API is running.

Step 5: Run Your App

node index.js

Open your browser or Postman and go to:

http://localhost:3000

You should see:

Welcome to the Real-Time Chat App API

Step 6: Commit changes

git add .

git commit -m "chore(setup): initialized backend with Express server"

Why? Frequent commits help you track changes and avoid losing work.

Conclusion

As we wrap up Day 1 of our 14-Day Dev Journey, we've successfully laid the foundation for our real-time chat application by setting up a basic backend server. This initial step is crucial as it establishes the core structure upon which we'll build more complex features in the coming days. By organizing our project, initializing version control, and creating a simple server, we've taken significant strides in our full-stack and DevOps learning adventure. Stay tuned for Day 2, where we'll continue to expand on this foundation and delve deeper into the exciting world of development and operations. Let's keep learning and building together!

➡️ Next Up: Day 2