E-commerce Website using Tailwind and React using Django
Our e-commerce website, "ECOM," aims to offer users a smooth online shopping experience. We use Tailwind CSS for styling, React for interactive user interfaces, and Django for a strong backend. Shopify features a wide range of products across different categories, with functionalities like user authentication, product search, shopping cart management, and secure checkout. Here's how to create this e-commerce website:
Setup Backend (Django):
Step 1: Install Django and create a new project:
pip install django
Step 2: Create a Django Project
django-admin startproject ecommerce_backend
Step 3: Change your directory.
cd ecommerce_backend
Step 4: Use the below command to start your django app.
python manage.py startapp store
Step 5:Install and Set Up React
Navigate to the project directory and create a new React app:
npx create-react-app frontend
cd frontend
Step 6: Integrate Tailwind CSS with React
Install Tailwind CSS and its dependencies:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 7: Now its time to add code to your website.
Configure Tailwind by editing tailwind.config.js:
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Add the following to src/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Setup the Frontend with React and Tailwind
Creating Components
Step 1: Header Component
import React from 'react';
const Header = () => {
return (
<header className="bg-gray-800 text-white p-4">
<h1 className="text-xl">E-commerce Store</h1>
</header>
);
};
export default Header;
Step 2: Product Listing Component
This component will list all the product available to your database.
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const ProductList = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
axios.get('http:127.0.0.1:8000/api/products/')
.then(response => setProducts(response.data))
.catch(error => console.error(error));
}, []);
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{products.map(product => (
<div key={product.id} className="border p-4 rounded-lg">
<img src={product.image} alt={product.name} className="h-40 w-full object-cover" />
<h2 className="mt-2 text-lg">{product.name}</h2>
<p className="text-gray-600">${product.price}</p>
</div>
))}
</div>
);
};
export default ProductList;
Add your product and category by adding code in your backend directory.
//add_category.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Category</title>
{% load static %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Add Category</h1>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Add Category</button>
</form>
</div>
</body>
</html>
add_product.html file will help you to add category to your database. Use this template to add category without entering to admin pannel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Product</title>
{% load static %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Add Product</h1>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Add Product</button>
</form>
</div>
</body>
</html>
Now create 'static' folder to you root directory and create css folder and other folder to store your static files like css file, images, etc.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
form .form-field {
margin-bottom: 15px;
}
form .form-field label {
display: block;
margin-bottom: 5px;
color: #555;
}
form .form-field input,
form .form-field select,
form .form-field textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
form button {
padding: 10px;
border: none;
border-radius: 4px;
background: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
}
form button:hover {
background: #0056b3;
}
Fetching Data from Django Backend
Step 1: Set Up Django REST Framework
Install Django REST Framework:
pip install djangorestframework
Step 2: Add it to INSTALLED_APPS in settings.py:
INSTALLED_APPS = [
...
'rest_framework',
'products',
]
Step 3: Create API Endpoints
In store/views.py:
from rest_framework.decorators import api_view
from rest_framework.response import Response
from .models import Product
from .serializers import ProductSerializer
from django.shortcuts import render, redirect
from .forms import CategoryForm, ProductForm
@api_view(['GET'])
def product_list(request):
products = Product.objects.all()
serializer = ProductSerializer(products, many=True)
return Response(serializer.data)
# views.py
def add_category(request):
if request.method == 'POST':
form = CategoryForm(request.POST)
if form.is_valid():
form.save()
return redirect('category_list') # Assuming you have a category list view
else:
form = CategoryForm()
return render(request, 'store/add_category.html', {'form': form})
def add_product(request):
if request.method == 'POST':
form = ProductForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return redirect('product_list') # Assuming you have a product list view
else:
form = ProductForm()
return render(request, 'store/add_product.html', {'form': form})
This file is available inside your products folder. Use products/urls.py to add your urls path.
from django.urls import path
from .views import product_list
urlpatterns = [
path('products/', product_list),
]
In ecommerce_backend/urls.py. This file is the global file for your urls, please add the below code to seprate your app inside the project.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('products.urls')),
]
This is for your models.py file. Create it and add the below code.
#products/models.py:
from django.db import models
class Product(models.Model):
name = models.CharField(max_length=100)
description = models.TextField()
price = models.DecimalField(max_digits=10, decimal_places=2)
Step 3: Fetch Data in React
Install Axios in React app:
npm install axios
Running the Project
Run Django Development Server
python manage.py runserverRun React Development Server
npm start
Conclusion
By combining Tailwind CSS, React, and Django, you can build a modern, responsive, and scalable e-commerce website. Tailwind simplifies styling, React offers a robust front-end framework, and Django ensures a secure and efficient back end. This stack not only enhances development speed but also provides a maintainable codebase, making it an excellent choice for building e-commerce applications.
