“CHAT-APPLICATION” USING DJANGO

IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE

AWARD OF DEGREE OF MASTER OF COMPUTER APPLICATION.

Submitted By
Mohit Bisht (06717704423)
Rishabh Gupta (10017704423)

VIVEKANANDA SCHOOL OF INFORMATION TECHNOLOGY

VIVEKANANDA INSTITUTE OF PROFESSIONAL STUDIES-TC

Affiliated to
(GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY, DELHI)

Jan-April,2020
 CERTIFICATE
This is to certify that this project entitled “Chat Application” submitted in partial fulfillment of the
1st semester of MCA to the VIPS, done by Mr. Mohit Bisht, Roll No. 06717704423 and Mr.
Rishabh Gupta (10017704423) is an authentic work carried out by him under my guidance.

Signature of the student Signature of the Guide

 SELF CERTIFICATE
This is to certify that the project report entitled “CHAT APPLICATION” is done by me is an
authentic work carried out for the partial fulfilment of the 1st semester of Master Computer
Applications under the guidance of Dr. Deepali Kamthania (Assistant Professor). The matter
embodied in this project work has not been submitted earlier for award of any degree or diploma
to the best of my knowledge and belief.

Signature of the student

Name of the Student : Mohit Bisht and Rishabh Gupta

Roll No: 06717704423 and 10017704423

 ACKNOWLEDGEMENTS
In the “Acknowledgement” page, the writer recognizes his indebtedness for guidance and
assistance of the thesis adviser and other members of the faculty. Courtesy demands that he also
recognizes specific contributions by other persons or institutions such as libraries and research
foundations. Acknowledgements should be expressed simply, tastefully, and tactfully.
SYNOPSIS
1. TITLE OF THE PROJECT

“CHAT APPLICATION”

2. INTRODUCTION
The online chat application has been developed to override the problems prevailing in the
practicing manual system. This software is supported to eliminate and in some cases reduce
the hardship faced by this existing system. By this it will provide user friendly interaction to
user.
We use chat applications like Whatsapp, Telegram, Facebook Messenger, WeChat, Snapchat,
Discord, iMessage, etc in our daily lives, so why not create one ourselves?
We will can create an simple chat application using Django. The chat application can be a small
person-to-person message application.

3. STATEMENT ABOUT THE PROBLEM

Many companies established its website and solve the issues of customers by manually
support, so this takes lots of time to resolve it and it also require more human power.
So to overcome this the Chat application introduce.
The purpose of Chat application is to automate the existing manual system by the help of
computerized equipment and full-fledged computer software to fulfilling the requirement, so
the valuable data/information can be stored for a longer period with easy accessing and
manipulation of the same.

4. OBJECTIVE
The main objective of online chat application is to manage the details of chat application,
online, chat, user chat History. It manages all the information about chat application, chat char
profile, chat history. The project is totally built at administrative end and thus only the
administrator is guaranteed the access, the purpose of the project is to build an application
program to reduce the manual work for managing the chat application.
Improve customer experience – Web chat allows visitors to make queries that can be
answered quicker than an email or phone call. When customers receive immediate solutions,
they have a better brand experience.
Deliver real time assistance – Easily connect with your customers in real time with online
web chat to provide faster sales or support assistance.
5. SCOPE
As there are many MNC companies are coming into the markets and these companies will
provide various types of facility to customers to maintain there market coverage.
It may help collection perfect management in details. In a very short time, the collection will
be obvious, simple and sensible. It will help a person to know the management of passed year
perfectly and vividly. It also helps in current all work relative to online chat application.
It will be also reduced the cost of collecting the management and collection procedure will go
on smoothly.
In computer system the person has to fill the various forms and number of copies of the form
can be easily generated at a time.
In computer system, it is not necessary to create the manifiest but we directly print it which
saves our time.

To Utilize the resources in efficient manner.

6. FUNCTIONALITY
• It allows real time communication between businesses and customers on the website.
• It brings chat features for the website and help address sales and support related queries
during the customer journey.
• Providing best solution for customer in real time connection.
• Increase the efficiency of online chat
• It deal with monitor the information and transaction of chat profile
7. TOOLS AND PLATFORM
Platform: Django

7.1 Requirement
(Minimum specs)

Hard Disk:500 GB

Processor:Intel core i3

RAM: 4GB

7.2 Software Specification

Operating system: Window, MAC_OS,

Django Framework

Python
8. METHODOLOGY
Model Used: Iterative Enhancement Model

In the Iterative model, iterative process starts with a simple implementation of a small set

of the software requirements and iteratively enhances the evolving versions until the
complete system is implemented and ready to be deployed.

SUMMARY OF PROJECT
Online Chat Application, as described above, can lead to error free, secure, reliable and fast
management system. It can assist the user to concentrate on their other activities rather to
concentrate on the record keeping. Thus it will help organization in better utilization of
resources. The organization can maintain computerized records without redundant entries. That
means that one need not be distracted by information that is not relevant, while being able to
reach the information.
The aim is to automate its existing manual system by the help of computerized equipments and
full-fledged computer software, fulfilling their requirements, so that their valuable
data/information can be stored for a longer period with easy accessing and manipulation of the
same. Basically the project describes how to manage for good performance and better services
for the clients.

9. CONCLUSION
Our project is only a humble venture to satisfy the needs to manage their project work. Several
user friendly coding have also adopted. This package shall prove to be a powerful package in
satisfying all the requirements of the school. The objective of software planning is to provide
a frame work that enables the manger to make reasonable estimates made within a limited time
frame at the beginning of the software project and should be updated regularly as the project
progresses.

10.FUTURE SCOPE
It can be summarized that the future scope of the project circles around maintaining
information regarding:
• We can add printer in future.
• We can give more advance software for Online Chat Application including more facilities
• We will host the platform on online servers to make it accessible worldwide
• Integrate multiple load balancers to distribute the loads of the system
• Create the master and slave database structure to reduce the overload of the database queries
• Implement the backup mechanism for taking backup of codebase and database on regular basis on
different servers
11. CONTRIBUTION FOR PROJECT MAKING

This project is made by the individual with the help of some resources like python, Django.
All the working of this project is totally defined by me.
Resources used:
1)Python
2)Django
3)Javascript
CHAPTER1: PROBLEM FORMULATION
1.1 Introduction about the Problem

Any opportunity that allows you to keep in touch with your family and your loved ones is
supposed to be grabbed with both hands. Having a cell phone is the only thing you need in
order to install a chat application and enjoy an easier way of sending and receiving
messages.
But the main problem is privacy and distance . Means if the any person want to meet with
another person , he/she has to go with physically and it will take lots of time.
Another factor that can affect is that timing that means it is not necessary that when you go
to meet a person, it will be available. So to provide flexibility and independency of
messaging we need to introduce the chat Application.
Another problem which make sense for introducing the chat application is that online
criteria, means person’s chat are private and remain hack free.

1.2 Present State of Art

Right now the technology that we used for making this chat application

a) WSGI (webserver gateway interface)

WSGI stands for Web Server Gateway Interface, which is a specification that describes
how a web server communicates with web applications and how web applications can
be chained together to process one request.

b) SERVER
1. Setup an infra that takes care of saving messages as they come/go
2. Load balancing on the server to manage scale when the number of connections
increase/decrease
3. Id management to know which connection to use between two Id, maintaining
the messaging logic
4. Setup topics to manage delivering messages as well as push notes
5. Database management

c) Django models

A Django model is a table in your database. Up until now in this tutorial, output has
been static data from Python or HTML templates. Now we will see how Django allows
us to work with data, without having to change or upload files in the process.
1.3 Need of computerization

• There is need for computerization for locally host the server for development stage.
• Here we also use the Django database for storing the messages

1.4 Importance of the work

The importance of work is by using a chat application is beneficial is that it is private.

It is very difficult for any person to gain access to your messages when you are using a chat
application to stop what this means is that you have a chance to make sure that your
messages only get to the intended recipients and nothing can divulge the information you
have.
The output of this work allows you to send messages to the people who are in your contact
list and it means that you might not suffer from sending stray messages.
It is worth noting that certain specifications in the chat application can allow for the use of
a password and this means that only you got unlimited access to your messages.
CHAPTER 2: SYSTEM ANALYSIS
2.1 Feasibility Study
2.1.1 Technical Feasibility
This project is basically build upon the Django framework with the help of python. This
project uses WSGI interface for sending and receiving the data. For storing and retrieving
the chats we use Django Models.

Technical Requirement: For making of this project, the resources that are required is
Software – python, Django, and Hardware- window OS or any other platform, 2GB of ram,
20GB of Hard disk.

Resources Availability: These resources are available from certain sources,

python= www.python.org

Django=”pip install Django”

Scalability: Any further changes that are require in this project can done with Django
framework. Here we also used the html, CSS for front end. And for storing any further
important data we also use models.
Compatibility: This project can run on any platform but the requirement of this project
should be satisfied in that particular OS. (requirement: python and Django).

2.1.2 Economical Feasibility

This chat application can be integrated with any ecommerce website or any website that
are somewhere provide the support features after modifying the some functionalities.
With the help of this chat application the company can better known to their customer
requirement and provide valuable output to customer.
This chat support will be active for full time hours for customer help

2.1.3 Operational Feasibility

From Initialization to Termination of this project, the resources that are being used are
easily available.

*Objective: This chat application is basically build for communication like Whatsapp.
The main objective is to provide faster and reliable communication between the user. And
after some modification we can also integrate with some major ecommerce websites.
 *Performance: The performance of this project is optimizing. This project require less
resources and able to perform whole operation effectively.
*Interface: The interface of this project is also very simple. After interacting with UI user
can easily navigate through the options.
*Reliability: This chat application some tokens can be used for sending and retrieving
messages like (CSRF token). All the data that being sending or retrieving are protected.
This can be possible that chats are not sending or retrieving , so in that case this situation
can also be easily handled by just restarting the server.

2.2 Methodology
There are various procedures that are being used in this project. Here we use HTML, CSS
and JAVA SCRIPT for handling the viewing of data in front end.
For integrating these web component with python Django the Django templating also used
in html files
{% extends 'core/base.html' %}
{% block title %}Welcome | {% endblock %}
{% block content %}
<div class="p-10 lg:p-20 text-center">
<h1 class="text-3xl lg:text-6xl text-white">Djangochat</h1>
</div>
{% endblock %}

In this code “{% extends "core/base.html" %}” , “{% block content %}” these all are
Django templating, Due to this the integration of python is become possible in Django.

There is a flow followed by Django to execute the output.

1) There is a templates folder in which all the files resides which is require for front
end like html files.
2) What ever data that are being send by these html files , first go to the “views.py”
then some operation are performed on these data by python code and then send it
back to main “index.html” files for output.
3) For retrieving that send data we use Django templating variable for accessing
those data. Like “{{ data }}” this Django variable example.
4) Before retrieving these data these data are collected in form of dictionary format.
 def frontpage(request):
return render(request, 'core/frontpage.html')

def signup(request):
if request.method == 'POST':
form = SignUpForm(request.POST)
if form.is_valid():
user = form.save()
login(request, user)
return redirect('frontpage')
else:
form = SignUpForm()
return render(request, 'core/signup.html', {'form': form})

In this we are authenticate the data provided by user with the help of module
called login imported from django.contrib.auth.

5) For the security of data that are being send to one user to another we also used
CSRF token with the POST method.

<form method="post" action="." class="lg:w-1/4 px-4 mx-auto">

{% csrf_token %}

<div class="mb-5">
<label class="text-white">Username</label>

<input type="text" name="username" class="w-full mt-2 px-4 py-2

rounded-xl">
</div>

<div class="mb-5">
<label class="text-white">Password</label>

<input type="password" name="password" class="w-full mt-2 px-4 py-

2 rounded-xl">
</div>

{% if form.errors %}
{% for field in form %}
 {% for error in field.errors %}
<div class="mb-5 p-4 rounded-xl bg-red-300 text-white">
<p>{{ error|escape }}</p>
</div>
{% endfor %}
{% endfor %}
{% endif %}

<button class="px-5 py-3 rounded-xl text-white bg-teal-800 hover:bg-teal-

700">Log in</button>
</form>

6) Using the django models for storing the data.

from django.contrib.auth.models import User
from django.db import models

class Room(models.Model):
name = models.CharField(max_length=255)
slug = models.SlugField(unique=True)

class Message(models.Model):
room = models.ForeignKey(Room, related_name='messages',
on_delete=models.CASCADE)
user = models.ForeignKey(User, related_name='messages',
on_delete=models.CASCADE)
content = models.TextField()
date_added = models.DateTimeField(auto_now_add=True)
class Meta:
ordering = ('date_added',)
2.3 Choice of the Platform
2.3.1 Software Used

Language Used : Python, HTML.

Scripting : Java Script.

Framework : Django

2.3.1 Hardware Used

Operating System : Windows OS (can be run on any platform)

RAM: 4 GB Minimum

Hard Disk: Solid State Drive (SSD) or Hard Drive

CHAPTER 3: SYSTEM DESIGN
3.1 Design Methodology
To make the project UI Better, We use the minimalistic approach for design. A simple background
color with pretty white section of chat.
The purpose to be with minimalistic because it makes easy to use the application. With simple
design it make easy to navigate. As the project will run in Desktop or laptop, there is little bit
consciousness about the design adaptation.
For Styling purpose the HTML , CSS and Java Script is being used with Django Templating.

Fig 1
This is a simple UI make the understanding better for user. All the color and design are kept simple
to make minimalistic and easy to navigate.
3.2 Model Design (Chat Storage Area)
In this project Django framework is used to make this chat application. So the chats that are stored
for retrieving and accessing the message are present in models. In Django there is no actual
database instead of this we have models which almost act like database.
The difference in actual database we use query to run but in Django we use python code to make
the structure.

from django.contrib.auth.models import User

from django.db import models

class Room(models.Model):
name = models.CharField(max_length=255)
slug = models.SlugField(unique=True)

class Message(models.Model):
room = models.ForeignKey(Room, related_name='messages',
on_delete=models.CASCADE)
user = models.ForeignKey(User, related_name='messages',
on_delete=models.CASCADE)
content = models.TextField()
date_added = models.DateTimeField(auto_now_add=True)

class Meta:
ordering = ('date_added',)

3.2.1 Model Structure

Fig 2
In fig 2 This shows the basic structure of Chat application. This include “rooms” which has
messages that are hidden for security reasons.

Fig 3
In fig 3 , These all are messages that are stored according to room wise and all message are stored
without names so that no one can able to read properly.
3.3 Input Design

Fig 4
The approach that we use for design is Iterative Method approach. As the models that are used in
this project require continuous checking for data retrieving and at the same side we have to use it
for further representation. This same principle also followed by Frond End Designing also.

3.4 Output Design

The output which meet the requirement of the end user and present information clearly. As in
system the user will directly interact the application or software, so the representation we keep
simple so that user has no issue regarding the understanding of data or through navigate.
The designing of the project is done with organized and well through manner with right output
representation.
 Fig 5
In Fig 5 it is clearly represented that where the chat should write and where the messages are
shown.
CHAPTER 4: TESTING AND IMPLEMENTATION
4.1 Testing Methodology
4.1.1 Unit Testing:
In Django, theres are built-in testing framework or popular testing libraries like unittest or pytest.
Focus on testing models, views, and utility functions in isolation.
For example:
Test the creation and saving of chat messages.
Test the validation and behavior of Django models representing users, chat rooms, or
conversations.
4.1.2 Module Testing
Integration Testing Verify the integration of your chat application with external systems or APIs.
This includes:
Testing integration with third-party services like authentication providers or notification services.
Verifying proper handling of API requests and responses.
Testing data synchronization between your application and external systems.
4.1.3 User Interface (UI) Testing:
User interface testing is crucial to verify the behavior and usability of your application from the
user's perspective. In the case of a chat application, you can use automated UI testing tools to
simulate user interactions and validate the chat interface. Consider:
Testing the real-time updates and synchronization of messages between users. Here we mainly
used the WSGI(web server gateway interface) component for backend for transmission.
Testing the display and layout of chat messages, user profiles, and other UI elements.
Testing user authentication and authorization features.
4.1.4 Load Testing:
Chat applications often experience heavy traffic and concurrency. Perform load testing to ensure
your application can handle multiple users and concurrent chat sessions without performance
issues. Tools like JMeter or Locust can help simulate high traffic scenarios and measure the
application's response time and scalability.
4.1.5 System Testing:
Security Testing:
Pay attention to security aspects of your chat application. Perform security testing to identify
vulnerabilities such as input validation, cross-site scripting (XSS), cross-site request forgery
(CSRF), and session management. Django provides built-in security features, but it's important to
verify their correct implementation.
Integration Testing: After verified the individual components, Now move on to integration testing
to ensure they work together correctly. Integration tests aim to verify the interaction and
collaboration between different parts of your application. For a chat application, there are some
factor that need to be consider:

Testing the flow of sending and receiving messages between users.

Testing the interaction between the database and the application to ensure data is properly stored
and retrieved.
Testing integration with any third-party services or APIs, if applicable.
Performance Testing: Conduct performance testing to measure the application's response time,
resource usage, and scalability. Monitor server resources, database performance, and network
latency during different usage scenarios.
CHAPTER 5: CONCLUSION AND REFRENCES
5.1 Conclusion

In this paper we proposed the Chat Application project using Django Framework of python. Here
we just given some feature like login, and Messages sending features. As the Instagram like
application also uses the Django framework and also even provide great security to the user’s data.
Besides having the other frameworks, Django framework can’t be ignore for backend work.
Having easiness in coding with python also increase the productivity for writing the robust code
for backend.

Hence we Django having the lots of powerful feature that can be used in authentication purpose.

5.2 System Specification

Hardware

Storage Type: Hard Disk 80 GB

RAM: 2GB

Software

Operating System : windows 10

Platform: python

Language Used: HTML ,CSS , Java Script

Framework Used: Django Framework

5.3 Future Scope of Modification

In this project we make the chat application , but there are some more features that we needed to
add in this project, like encryption for chat messages , timestamp for each messages that has been
send. Also we can add video calling feature to this project to make this more realistic.

So in future, these features will be implemented to make our project more robust.
CHAPTER 6: SYSTEM DEVELOPMENT (CODING)
Here in this project we have directory structure of two apps and main project
environment.
In this is project we have two app called “core” and “room” and we have main
project called “Djangochat”
Inside the Core App | “template/core”
Base.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %}Djangochat</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.messages {
height: 400px;
overflow-y: auto;
}
</style>
</head>

<body class="bg-teal-600">
<nav class="flex items-center justify-between px-4 py-6 bg-teal-800">
<div>
<a href="/" class="text-xl text-white">Djangochat</a>
 </div>

<div class="flex items-center space-x-4">

{% if request.user.is_authenticated %}
<a href="/rooms/" class="text-white hover:text-gray-200">Rooms</a>

<a href="/logout/" class="px-5 py-3 rounded-xl text-white bg-teal-600

hover:bg-teal-700">Log out</a>
{% else %}
<a href="/login/" class="text-white hover:text-gray-200">Log in</a>
<a href="/signup/" class="px-5 py-3 rounded-xl text-white bg-teal-600
hover:bg-teal-700">Sign up</a>
{% endif %}
</div>
</nav>
{% block content %}
{% endblock %}
{% block scripts %}
{% endblock %}
</body>
</html>
Frontpage.html
{% extends 'core/base.html' %}
{% block title %}Welcome | {% endblock %}
{% block content %}
<div class="p-10 lg:p-20 text-center">
<h1 class="text-3xl lg:text-6xl text-white">Djangochat</h1>
</div>
{% endblock %}

Login.html
{% extends 'core/base.html' %}

{% block title %}Log in | {% endblock %}

{% block content %}
<div class="p-10 lg:p-20 text-center">
<h1 class="text-3xl lg:text-6xl text-white">Log in</h1>
</div>

<form method="post" action="." class="lg:w-1/4 px-4 mx-auto">

{% csrf_token %}

<div class="mb-5">
<label class="text-white">Username</label>

<input type="text" name="username" class="w-full mt-2 px-4 py-2 rounded-

xl">
 </div>

<div class="mb-5">
<label class="text-white">Password</label>

<input type="password" name="password" class="w-full mt-2 px-4 py-2

rounded-xl">
</div>

{% if form.errors %}
{% for field in form %}
{% for error in field.errors %}
<div class="mb-5 p-4 rounded-xl bg-red-300 text-white">
<p>{{ error|escape }}</p>
</div>
{% endfor %}
{% endfor %}
{% endif %}

<button class="px-5 py-3 rounded-xl text-white bg-teal-800 hover:bg-teal-

700">Log in</button>
</form>
{% endblock %}
Signup.html
{% extends 'core/base.html' %}

{% block title %}Sign up | {% endblock %}

{% block content %}
<div class="p-10 lg:p-20 text-center">
<h1 class="text-3xl lg:text-6xl text-white">Sign up</h1>
</div>

<form method="post" action="." class="lg:w-1/4 px-4 mx-auto">

{% csrf_token %}

<div class="mb-5">
<label class="text-white">Username</label>

<input type="text" name="username" class="w-full mt-2 px-4 py-2 rounded-

xl">
</div>

<div class="mb-5">
<label class="text-white">Password</label>

<input type="password" name="password1" class="w-full mt-2 px-4 py-2

rounded-xl">
</div>
 <div class="mb-5">
<label class="text-white">Repeat password</label>

<input type="password" name="password2" class="w-full mt-2 px-4 py-2

rounded-xl">
</div>

{% if form.errors %}
{% for field in form %}
{% for error in field.errors %}
<div class="mb-5 p-4 rounded-xl bg-red-300 text-white">
<p>{{ error|escape }}</p>
</div>
{% endfor %}
{% endfor %}
{% endif %}

<button class="px-5 py-3 rounded-xl text-white bg-teal-800 hover:bg-teal-

700">Submit</button>
</form>
{% endblock %}
Room.html
{% extends 'core/base.html' %}

{% block title %}{{ room.name }} | {% endblock %}

{% block content %}
<div class="p-10 lg:p-20 text-center">
<h1 class="text-3xl lg:text-6xl text-white">{{ room.name }}</h1>
</div>

<div class="lg:w-2/4 mx-4 lg:mx-auto p-4 bg-white rounded-xl">

<div class="chat-messages space-y-3" id="chat-messages">
{% for m in messages %}<b>{{ m.user.username }}</b>: {{ m.content }}<br>{%
endfor %}
</div>
</div>

<div class="lg:w-2/4 mt-6 mx-4 lg:mx-auto p-4 bg-white rounded-xl">

<form method="post" action="." class="flex">
<input type="text" name="content" class="flex-1 mr-3" placeholder="Your
message..." id="chat-message-input">

<button
class="px-5 py-3 rounded-xl text-white bg-teal-600 hover:bg-teal-700"
id="chat-message-submit"
>Submit</button>
</form>
</div>
{% endblock %}

{% block scripts %}
{{ room.slug|json_script:"json-roomname" }}
{{ request.user.username|json_script:"json-username" }}
<script>
const roomName = JSON.parse(document.getElementById('json-
roomname').textContent);
const userName = JSON.parse(document.getElementById('json-
username').textContent);
const chatSocket = new WebSocket(
'ws://'
+ window.location.host
+ '/ws/'
+ roomName
+ '/'
);

chatSocket.onclose = function(e) {
console.log('onclose')
}

chatSocket.onmessage = function(e) {
const data = JSON.parse(e.data);

if (data.message) {
document.querySelector('#chat-messages').innerHTML += ('<b>' +
data.username + '</b>: ' + data.message + '<br>');
} else {
// alert('The message was empty!')
}

scrollToBottom();
};

document.querySelector('#chat-message-input').focus();
document.querySelector('#chat-message-input').onkeyup = function(e) {
if (e.keyCode === 13) {
document.querySelector('#chat-message-submit').click();
}
};

document.querySelector('#chat-message-submit').onclick = function(e) {
e.preventDefault()

const messageInputDom = document.querySelector('#chat-message-input');

const message = messageInputDom.value;

console.log({
'message': message,
'username': userName,
'room': roomName
})

chatSocket.send(JSON.stringify({
'message': message,
'username': userName,
'room': roomName
}));

messageInputDom.value = '';

return false
};

/**
* A function for finding the messages element, and scroll to the bottom of it.
*/
function scrollToBottom() {
let objDiv = document.getElementById("chat-messages");
objDiv.scrollTop = objDiv.scrollHeight;
}

// Add this below the function to trigger the scroll on load.

scrollToBottom();
</script>
{% endblock %}

Rooms.html
{% extends 'core/base.html' %}

{% block title %}Rooms | {% endblock %}

{% block content %}
<div class="p-10 lg:p-20 text-center">
<h1 class="text-3xl lg:text-6xl text-white">Rooms</h1>
</div>

<div class="w-full flex flex-wrap items-center">

{% for room in rooms %}
<div class="w-full lg:w-1/4 px-3 py-3">
<div class="p-4 bg-white shadow rounded-xl text-center">
<h2 class="mb-5 text-2xl font-semibold">{{ room.name }}</h2>

<a href="{% url 'room' room.slug %}" class="px-5 py-3 block rounded-xl
text-white bg-teal-600 hover:bg-teal-700">Join</a>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
Outputs