🚀 Build a Tire Management System with Docker Compose

Introduction

Managing a tire inventory efficiently can be a challenge. To simplify this, we are building a Tire Management System using Docker Compose with a React frontend, Node.js backend, and PostgreSQL database. This guide will walk you through setting up the application, containerizing it with Docker, and running it using Docker Compose.

---

🏗️ Project Structure

tire-management-app/
│── backend/                # Backend API (Node.js/Express)
│── frontend/               # Frontend (React.js)
│── database/               # Database scripts
│── docker-compose.yml      # Docker Compose config
│── .env                    # Environment variables
└── README.md               # Project Documentation

---

🎯 Technologies Used

✅ Frontend: React.js (UI for users to interact with the system)

✅ Backend: Node.js (Express.js to handle API requests)

✅ Database: PostgreSQL (To store tire inventory and orders)

✅ Docker Compose: To manage multi-container deployment

---

🔧 Step-by-Step Guide

1️⃣ Set Up the Backend (Node.js + Express + PostgreSQL)

Install Dependencies

mkdir backend && cd backend
npm init -y
npm install express pg cors dotenv

Create server.js

const express = require("express");
const cors = require("cors");
const dotenv = require("dotenv");
const { Pool } = require("pg");

dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());

const pool = new Pool({
    user: process.env.DB_USER,
    host: process.env.DB_HOST,
    database: process.env.DB_NAME,
    password: process.env.DB_PASSWORD,
    port: process.env.DB_PORT,
});

app.get("/", (req, res) => res.send("Tire Management API is running!"));

app.get("/tires", async (req, res) => {
    const result = await pool.query("SELECT * FROM tires");
    res.json(result.rows);
});

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

Create .env File

DB_USER=postgres
DB_PASSWORD=postgres
DB_HOST=db
DB_PORT=5432
DB_NAME=tire_db

---

2️⃣ Database Setup (PostgreSQL)

Create init.sql

CREATE TABLE tires (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255),
    brand VARCHAR(255),
    price DECIMAL
);

INSERT INTO tires (name, brand, price) VALUES ('Radial X200', 'Michelin', 500);

Create Dockerfile for Database

FROM postgres:latest
ENV POSTGRES_DB=tire_db
ENV POSTGRES_USER=postgres
ENV POSTGRES_PASSWORD=postgres
COPY init.sql /docker-entrypoint-initdb.d/

---

3️⃣ Set Up the Frontend (React.js)

Initialize React App

npx create-react-app frontend
cd frontend
npm install axios

Modify App.js

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
    const [tires, setTires] = useState([]);

    useEffect(() => {
        axios.get("http://localhost:5000/tires")
            .then(response => setTires(response.data))
            .catch(error => console.error(error));
    }, []);

    return (
        <div>
            <h1>Tire Inventory</h1>
            <ul>
                {tires.map((tire) => (
                    <li key={tire.id}>{tire.name} - {tire.brand} - ${tire.price}</li>
                ))}
            </ul>
        </div>
    );
}
export default App;

Create Dockerfile for Frontend

FROM node:16
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "start"]

---

4️⃣ Docker Compose Configuration

Create docker-compose.yml

version: '3.8'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend
    restart: always

  backend:
    build: ./backend
    ports:
      - "5000:5000"
    depends_on:
      - db
    environment:
      - DB_USER=postgres
      - DB_PASSWORD=postgres
      - DB_HOST=db
      - DB_PORT=5432
      - DB_NAME=tire_db
    restart: always

  db:
    build: ./database
    ports:
      - "5432:5432"
    restart: always
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:

---

🚀 Running the Application

Step 1: Build and Start the Containers

docker-compose up --build -d

Step 2: Check Running Containers

docker ps

Step 3: Access the Application

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000
• Database: PostgreSQL at localhost:5432

Step 4: Stop Containers

docker-compose down

---

🌍 Deployment Options

• Deploy on AWS, GCP, or DigitalOcean using Kubernetes.
• Push images to Docker Hub for sharing.
• Set up CI/CD pipelines with GitHub Actions or Jenkins.

---

📢 Conclusion

This guide covers setting up a Tire Management System using Docker Compose. It includes a React frontend, a Node.js backend, and a PostgreSQL database. This setup is great for learning microservices and containerization. If you found this useful, feel free to ⭐ the repo and drop your feedback! 🚀

🔗 Repo: GitHub

devops #docker #nodejs #react #postgresql