Architecting a Time App: Frontend, Services and Deployment with Docker

Samokhvalova Valentina's photo
Samokhvalova Valentina
·

2 min read

Introduction

Creating a time application involves several crucial components, including the frontend client, backend services, and deployment strategy using Docker. This guide provides a comprehensive overview of each component necessary for launching a time app and details the process for setting it up with Docker.

Time App Components Explained

1. Frontend Clients

The frontend client serves as the user interface of the time app. It displays the time, allows for timezone adjustments, and may include additional features like timers or stopwatches.

Key Technologies:

  • HTML/CSS for structure and styling.

  • JavaScript for dynamic interactions and time calculations.

Example Frontend Setup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Time App</title>
</head>
<body>
    <div id="time-display"></div>
    <script>
        function updateTime() {
            document.getElementById('time-display').innerText = new Date().toLocaleTimeString();
        }
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

This HTML page updates and displays the current time every second.

2. Backend Services

The backend can manage time zone data and synchronize time settings across different clients.

Example Backend API (Node.js):

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

app.get('/time', (req, res) => {
    res.send({ time: new Date().toLocaleTimeString() });
});

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

This Node.js server provides the current time via a simple REST API.

3. Docker Deployment

Docker can encapsulate the environment for both frontend and backend, ensuring consistency across different deployment stages.

Docker Compose Setup:

version: '3'
services:
  backend:
    build: ./backend
    ports:
      - "3001:3001"
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

This Docker Compose file defines how the frontend and backend are built and exposes the necessary ports.

Application Launch Plan in Docker

Launching the Application:

docker-compose up --build

Expected Output:

Creating network "timeapp_default" with the default driver
Building backend
Successfully tagged timeapp_backend:latest
Building frontend
Successfully tagged timeapp_frontend:latest
Creating timeapp_backend_1 ... done
Creating timeapp_frontend_1 ... done

This command builds and starts both the frontend and backend services, linking them through Docker's network.

Conclusion

Architecting a time app with a clear division between frontend and backend, managed through Docker, provides scalability and maintainability. This setup ensures that the application can be easily updated, scaled, and deployed across various environments.

Additional Resources

Time AppDocker