Build a Clock Application using Django and React

The clock project aims to develop a simple yet functional clock application using modern web technologies. It combines the frontend capabilities of React.js for creating dynamic user interfaces with the styling power of Tailwind CSS for a sleek and responsive design. Additionally, the backend is built using Django, providing a robust framework for managing server-side logic and serving the frontend assets.

Create a Clock using React and Tailwind using the Django Framework

Here, is the step-by-step implementation of Clock using React, Tailwind, and Django Framework. Here, we will cover the article in 2 parts, frontend and then backend. To install Django in Python follow these steps.

Backend Using Django

To start the project and app use this command

django-admin startproject backend
cd backend
python manage.py startapp app

Now add this app to the ‘settings.py’

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "app",
    'corsheaders',
]

For install the corsheaders run the below command

pip install django-cors-headers

File Structure

Setting Necessary Files

app/views.py: This Django view function, current_time, fetches the current time and formats it as a JSON response with the key "current_time". It utilizes Django's JsonResponse to return the time data in a JSON format.

from django.http import JsonResponse
from datetime import datetime


def current_time(request):
    current_time = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
    data = {'current_time': current_time}
    return JsonResponse(data)

backend/urls.py: This Django urlpatterns setup includes routes for both the admin interface

from django.contrib import admin
from django.urls import path, include
from app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.current_time, name="current_time")
]

settings.py : In settings.py we added the crosheaders Middleware and also the some allowing host for integrating react.

MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
]
 
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]
 
CORS_ALLOW_CREDENTIALS = True

Frontend Using React + Tailwind

To start the project in react use this command

npx create-react-app frontend
cd frontend

Install the necessary library tailwindcss, react-dom and axios using the below command

npm install tailwindcss
npm install react-dom
npm install axios

File Structure :

Creating User InterFace

App.js: This React component fetches the current time from a Django backend every second using Axios. It then updates the state with the fetched time and displays it as a clock with hour, minute, and second hands rotating dynamically based on the current time.

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./App.css";

const App = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      axios
        .get("http://127.0.0.1:8000/")
        .then((response) => {
          const serverTime = new Date(response.data.current_time);
          setTime(serverTime);
        })
        .catch((error) => {
          console.error("Error fetching current time:", error);
        });
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const getSecondsAngle = () => {
    return 6 * time.getSeconds();
  };

  const getMinutesAngle = () => {
    return 6 * time.getMinutes();
  };

  const getHoursAngle = () => {
    return 30 * time.getHours() + time.getMinutes() / 2;
  };

  return (
    <div className="clock">
      <div
        className="hand hour-hand"
        style={{ transform: `rotate(${getHoursAngle()}deg)` }}
      ></div>
      <div
        className="hand minute-hand"
        style={{ transform: `rotate(${getMinutesAngle()}deg)` }}
      ></div>
      <div
        className="hand second-hand"
        style={{ transform: `rotate(${getSecondsAngle()}deg)` }}
      ></div>
    </div>
  );
};

export default App;

index.js: Below, code renders the React application by mounting the `<App />` component into the HTML element with the id of 'root'. It utilizes `React.StrictMode` for additional development mode checks.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

tailwind.config.js: This is an empty Tailwind CSS configuration file, providing no additional content, theme extensions, or plugins.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

App.css : This CSS code styles a clock component with hour, minute, and second hands. It positions them within a circular container and adjusts their sizes and positions accordingly. The hour and minute hands are black, while the second hand is red.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

.clock {
  position: relative;
  margin: 20px auto;
  width: 30vw;
  height: 30vw;
  border: 2px solid #000;
  border-radius: 50%;
}

.hand {
  position: absolute;
  background: black;
  border-radius: 10px;
  transform-origin: bottom;
}

.hour-hand {
  width: 1.8%;
  height: 24%;
  top: 25%;
  left: 48.85%;
  opacity: 0.8;
}

.minute-hand {
  width: 1.6%;
  height: 30%;
  top: 19%;
  left: 48.9%;
  opacity: 0.8;
}
.second-hand {
  width: 1%;
  background: red;
  height: 45%;
  top: 4%;
  left: 49.25%;
  opacity: 0.8;
}

Deployement of the Project

Run the server with the help of following command:

python3 manage.py runserver
npm start 

Output