DEV Community: Madhuban Khatri

CinePlex - ReactJS + Django Rest Framework project

Madhuban Khatri — Fri, 15 Aug 2025 14:09:37 +0000

Are you looking to dive into full-stack development by blending powerful frontend and backend technologies? In this blog post, I’ll walk you through my experience and key learnings from building a Movie Booking Website using ReactJS (frontend) and Django REST Framework (backend). This project helped me understand how modern web apps can provide seamless user experiences and robust server-side functionality.

Why ReactJS and Django REST Framework?

ReactJS enables highly interactive user interfaces and fast updates thanks to its component-based architecture. It’s perfect for dynamic features like searching movies, selecting showtimes, and choosing seats.

Django REST Framework provides a secure and scalable way to build APIs, manage user data, and handle bookings and payments behind the scenes.

Key Features

Browse and Search Movies: Users can explore the latest releases, view details, and search for favorites.
Showtime and Seat Selection: Interactive UI allows users to book specific seats for desired shows.
Secure Payments: Integration with Razorpay ensures payment processing is smooth and safe.
Booking Confirmation: Users receive instant confirmation and a streamlined booking history.

How I Built It

Backend: Django REST Framework

Models: Movies, Shows, Bookings, Users
APIs: CRUD operations for movies and shows, endpoints for seat selection and booking
Payment: Razorpay integration to capture payments and manage statuses

Frontend: ReactJS

Pages: Home, Movie List, Movie Details, Booking, Payment, Confirmation
State Management: React’s Context API for authentication and booking details
UI: Responsive design for a smooth experience on both desktop and mobile

Connecting the Dots

Axios bridges the frontend and backend, allowing the React app to fetch movie lists, check seat availability, and confirm bookings.
CORS: Configured on Django to ensure frontend requests are allowed during local development.

RESULT

See It on GitHub

Check out the source code and installation instructions on GitHub.

Final Thoughts

This project was a great learning journey. If you’re thinking about creating your own web app, I highly recommend starting with a real-world use case like a movie booking system. You’ll learn to integrate cutting-edge technologies, build end-to-end features, and problem-solve at every step!

Drop your questions or feedback in the comments below, and let me know if you’re interested in a deeper dive on specific sections of the stack. Happy coding! 🎬

Razorpay Integration with Django

Madhuban Khatri — Sun, 25 May 2025 15:00:30 +0000

Madhuban Khatri

May 25 '25

Razorpay Integration with Django: Step-by-Step Guide 💳

#python #django #programming #webdev

Comments

3 min read

Razorpay Integration with Django: Step-by-Step Guide 💳

Madhuban Khatri — Sun, 25 May 2025 12:49:19 +0000

If you're building a Django-based application and want to accept payments online, Razorpay is one of the easiest and most developer-friendly gateways to integrate. In this post, I’ll walk you through the Razorpay integration process with Django, step-by-step — from setting up the environment to handling the payment success callback.

🛠️ Prerequisites
Before we begin, make sure you have:

Python and Django installed.
A Razorpay account (Sign up at https://razorpay.com)
Razorpay API Keys (from the Razorpay dashboard)
Basic understanding of Django views and templates.

🔧 Step 1: Install Razorpay Python SDK

pip install razorpay

📁 Step 2: Setup Razorpay Keys

In your Django project settings (settings.py), add your RAZORPAY_KEY_ID and RAZORPAY_KEY_SECRET:

RAZORPAY_KEY_ID = 'your_key_id'
RAZORPAY_KEY_SECRET = 'your_key_secret'

You can also use environment variables for security.

🧠 Step 3: Create the Payment View

Views.py

from django.shortcuts import render
from django.http import HttpResponse
import razorpay
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
from django.http import HttpResponseBadRequest

# authorize razorpay client with API Keys.
razorpay_client = razorpay.Client(auth=(settings.RAZOR_KEY_ID, settings.RAZOR_KEY_SECRET))

# Create your views here.
def home(request):
    currency = 'INR'
    if request.method == "POST":
        amount_rupees = int(request.POST.get("amount", 1))
        amount = amount_rupees * 100  # Convert to paise
        request.session['latest_payment_amount'] = amount

        razorpay_order = razorpay_client.order.create(dict(amount=amount,
                                                        currency=currency,
                                                        payment_capture='0'))

        razorpay_order_id = razorpay_order['id']
        callback_url = 'paymenthandler/'

        context = {}
        context['razorpay_order_id'] = razorpay_order_id
        context['razorpay_merchant_key'] = settings.RAZOR_KEY_ID
        context['razorpay_amount'] = amount
        context['currency'] = currency
        context['callback_url'] = callback_url
        return render(request, 'home.html', context=context)
    return render(request, 'home.html')


@csrf_exempt
def paymenthandler(request):
    # only accept POST request.
    if request.method == "POST":
        try:
            payment_id = request.POST.get('razorpay_payment_id', '')
            razorpay_order_id = request.POST.get('razorpay_order_id', '')
            signature = request.POST.get('razorpay_signature', '')

            params_dict = {
                'razorpay_order_id': razorpay_order_id,
                'razorpay_payment_id': payment_id,
                'razorpay_signature': signature
            }

            result = razorpay_client.utility.verify_payment_signature(params_dict)
            print(result)
            if result is not None:
                amount = request.session['latest_payment_amount']
                try:
                    razorpay_client.payment.capture(payment_id, amount)
                    return render(request, 'paymentsuccess.html', params_dict)
                except:

                    return render(request, 'paymentfail.html')
            else:
                return render(request, 'paymentfail.html')
        except:
            return HttpResponseBadRequest()
    else:
        return HttpResponseBadRequest()

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('',views.home, name='home'),
    path('paymenthandler/', views.paymenthandler, name='paymenthandler'),
]

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>Razorpay Integration</h1>

    <form method="post" action="{% url 'home' %}">
      {% csrf_token %}
      <label for="amount">Enter amount (INR): </label>
      <input type="number" id="amount" name="amount" required>
      <button id="pay-btn" type="submit">Proceed to Pay</button>
    </form>


   {% if razorpay_order_id %}     
  <!-- Razorpay's Javascript code. -->
  <script src="https://checkout.razorpay.com/v1/checkout.js"></script>

  <script>
    var options = {
      key: "{{ razorpay_merchant_key }}", 
      amount: "{{ razorpay_amount }}", 
      currency: "{{ currency }}",

      // Your/store name.
      name: "Dj Razorpay", 

      // Pass the `id` obtained in the response of Step 1
      order_id: "{{ razorpay_order_id }}", 
      callback_url: "{{ callback_url }}",
    };

    // initialise razorpay with the options.
    var rzp1 = new Razorpay(options);

    rzp1.open();
  </script>
  {% endif %}
</body>
</html>

paymentsuccess.html

<!DOCTYPE html>
<html>
<head>
    <title>Payment Successful</title>
    <style>
        body {
            font-family: Arial;
            text-align: center;
            padding: 50px;
            background-color: #f4f4f4;
        }
        .box {
            background: white;
            padding: 30px;
            border-radius: 10px;
            display: inline-block;
            box-shadow: 0px 0px 10px #ccc;
        }
        h2 {
            color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>🎉 Payment Successful!</h2>
        <p>Thank you for your payment.</p>
        <p><strong>Payment ID:</strong> {{ razorpay_payment_id }}</p>
        <a href="/">Go back to Home</a>
    </div>
</body>
</html>

Razorpay makes payment integration smooth and developer-friendly. With just a few steps, you can start accepting payments in your Django application.

Source code is available on Github : Movie Booking System

Thanks for reading.

Society Issue Management System

Madhuban Khatri — Sat, 20 Jul 2024 17:59:46 +0000

Hello friends, Welcome back to my new blog.

In this blog, I am creating a Society Issue Management System. In this system, society members can create issues related to society and submit them to that system. The secretary can see all the issues created by members and take action according to need. An issue has three statuses RAISED, PENDING, CLOSED. Raised means the issue is created but not taking any action, Pending means the secretary saw the issue & took action, and Closed means the issue is resolved successfully.

There are two panels - one for members & second for admin/secretary.

On the member panel, members can see their personal information and they can create issues here & also they can see all issues created by them.
On the admin panel, the admin/secretary can see all the issues that are created by society members & take action if they need to.

NOTE: If you have any ideas related to this project then you can share me. I will add this to my repo.

Source code

https://github.com/MadhubanKhatri/society-issue-management-system

Create Image Slider in ReactJS

Madhuban Khatri — Tue, 28 Nov 2023 18:26:43 +0000

Hey there,
I am creating an Image Slider in ReactJS and CSS. It is easy to make. So don't waste time in reading and let's create some cool stuff.

KEY POINTS

Some images to show in Slider & these images are stored in an Array
A Counter that can change the index of the array (Increment / Decrement)
Two buttons - One for the next image & another one for the previous image
Some Styling (I'm using FONTAWESOME)

ImageSlider.js

Create ImageSlider.js file in your src folder

import { useState } from "react";

function ImageSlider(){
    let arr_of_imgs = ["https://images.unsplash.com/photo-1527049979667-990f1d0d8e7f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8YmFja2dyb3VuZHx8fHx8fDE3MDExOTIwMDE&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1483232539664-d89822fb5d3e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8YmFja2dyb3VuZHx8fHx8fDE3MDExOTIwMTA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1541450805268-4822a3a774ca?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8YmFja2dyb3VuZHx8fHx8fDE3MDExOTIwMjA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1542461927-dd68c85adc56?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8YmFja2dyb3VuZHx8fHx8fDE3MDExOTQ4NDg&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1644258063048-115a8d344aa6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8c3BlY2llc3x8fHx8fDE3MDExOTQ5Mjk&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1428908728789-d2de25dbd4e2?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8YmFja2dyb3VuZHx8fHx8fDE3MDExOTQ5Mzg&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1593029098077-ee36a677007c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8U3BpY2VzfHx8fHx8MTcwMTE5NTAwMQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600"];

    let [counter, setCounter] = useState(0);

    function preImage(){
        if(counter>0){
            setCounter(--counter);
        }else{
            setCounter(arr_of_imgs.length-1);
        }

    }

    function nextImage(){

        if(counter<(arr_of_imgs.length-1)){
            setCounter(++counter);
        }else{
            setCounter(0);
        }
    }

    const imgStyle = {
        transform: "translateX(280px) translateY(100px)",
        border:"5px solid #fff",
        boxShadow: "2px 2px 20px 2px black"
    }
    const arrowIcon = {
        fontSize: "25px"
    }
    return <div>
        <button onClick={preImage} style={{position:"absolute",top:"42%",left:"5%",width:"100px",height:"100px",borderRadius:"50%",border:"5px solid grey"}}>
            <i class="fa-solid fa-arrow-left" style={arrowIcon}></i>
        </button>

        <img src={arr_of_imgs[counter]} width={900} style={imgStyle}/>

        <button style={{position:"absolute",top:"42%",left:"90%", width:"100px",height:"100px",borderRadius:"50%",border:"5px solid grey"}} onClick={nextImage}>
            <i class="fa-solid fa-arrow-right" style={arrowIcon}></i>
        </button>
    </div>

}

export default ImageSlider;

App.js

Import ImageSlider in App.js and start the server.

import ImageSlider from './ImageSlider';

function App() {
  return (
    <div>
      <header>
        <ImageSlider/>
      </header>
    </div>
  );
}

export default App;

Context API in React

Madhuban Khatri — Thu, 19 Oct 2023 05:39:11 +0000

What is Context API in React

Context API is a concept of sending data from one parent component to its children components. It is used to reduce Prop Drilling in the react app. Now your question is what is prop drilling?

Prop Drilling

Suppose a person wants to go from the topmost ladder to the lowest ladder, he will go down the stairs one by one.

Similarly in react, if the lowest component wants to use a prop that is defined in its topmost parent component then that prop is shared among the components between them and these intermediate components send the prop to the lowest component without processing this prop.

Why Context API

Prop drilling can make the code more difficult to read and maintain, and can also make it harder to refactor the components later on. So context API can be used to send data without using prop drilling.

How to use Context API

First of all we need to keep some keywords in our mind in context API -

createContext- it is used to create a context object
Provider- it is used to wrap the components that will use the props.
useContext - it is used to fetch data from context object

Create a `Context.js` file

import { createContext } from "react"
const MyContext = createContext("");
export default MyContext

Create a `MyComponent.js` file

import { useContext } from "react";
import MyContext from "./Context";

function MyComponent(){
    const {count, setCount} = useContext(MyContext);

    return(
        <>
            <h1>MY Component</h1>
            {count}
            <button onClick={()=>setCount(count+1)}>Click</button>
        </>
    )
}


export default MyComponent;

`App.js` file

In this file, we will use Context API's Provider to wrap the MyComponent and some values are sending as value prop to wrapped component.

import { useState } from "react";
import MyComponent from "./MyComponent";
import MyContext from "./Context";

function App() {
  const [count, setCount] = useState(0)


  return (
    <>
      <div>
        <MyContext.Provider value={{count, setCount}}>
          <MyComponent/>
        </MyContext.Provider>
      </div>      
    </>
  )
}
export default App

Token authentication in Django Rest Framework

Madhuban Khatri — Fri, 13 Oct 2023 15:57:21 +0000

Token authentication refers to exchanging username and password for a token that will be used in all subsequent requests so to identify the user on the server side.

settings.py

INSTALLED_APPS = [
    .
    .

    '<your_app_name>',
    'rest_framework',
    'corsheaders',

    'rest_framework.authtoken' #new
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
    ],
}

views.py

from rest_framework.views import APIView
from rest_framework.decorators import api_view
from rest_framework.authtoken.models import Token
from django.contrib.auth.models import User
from django.core.exceptions import ObjectDoesNotExist
from rest_framework.response import Response
from django.contrib.auth.hashers import check_password

@api_view(['GET'])
def getData(request):
    users = User.objects.all()
    users_serializer = MyUserSerializer(users, many=True)
    return Response(users_serializer.data)

class TokenAuthentication(APIView):    
    def post(self, request, format=None):
        data = request.data
        if('username' in data):
            try:
                user = User.objects.get(username=data['username'])
                checkPassword = check_password(data['password'], user.password)
                if(checkPassword):
                    #If token is not created, the following will create a new token for the user instance.
                    token,created = Token.objects.get_or_create(user=user)
                    token_data = {
                        "user_id": user.id,
                        "token": token.key
                    }

                    return Response(token_data)
                else:
                    return Response("Password is incorrect.")
            except ObjectDoesNotExist:
                return Response("Invalid user details")
        else:
            return Response("Please fill the form.")

urls.py

from django.urls import path
from . import views

urlpatterns  = [
    path('', views.getData),    
    path('token_auth/', views.TokenAuthentication.as_view())

]

serializers.py

from rest_framework import serializers
from django.contrib.auth.models import User

class MyUserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = "__all__"

Output

How to create a CRUD application in ReactJS and Django Rest Framework

Madhuban Khatri — Wed, 04 Oct 2023 12:26:01 +0000

In this post, I am creating a simple CRUD application with the help of ReactJs and Django Rest Framework. We will divide this post into two parts - Frontend and Backend.

In the frontend part, we will use ReactJS for client-side handling and API calls. Conversely, the Backend part will use the Django rest framework for making APIs.

Before starting the tutorial we have to install some packages/libraries in Frontend and Backend.
For Frontend, we need to install-

axios - for API calls
react-router-dom - for routing between the pages

For Backend, we need to install-

Frontend

App.js

import './App.css';
import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
import Home from './Components/Home';
import About from './Components/About';
import Contact from './Components/Contact';
import Edit from './Components/Edit';
import Root from './Components/Root';

function App() {
  const url = "http://127.0.0.1:8000/"

  const router = createBrowserRouter(createRoutesFromElements(
    <Route path="/" element={<Root/>}>
      <Route index element={<Home url={url}/>}/>
      <Route path="/about"  element={<About/>}/>
      <Route path="/contact"  element={<Contact/>}/>
      <Route path="/edit/:id/"  element={<Edit url={url}/>}/>
    </Route>
  ))

  return (
    <div>
        <RouterProvider router={router}/>       
    </div>
  );
}

export default App;

Components/Root.js

import { Link, Outlet } from "react-router-dom";
function Root(){
    return(
        <>
            <nav className="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
                <div className="container-fluid">
                    <a className="navbar-brand" href="#">React+DRF</a>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                            <li className="nav-item">
                                <Link to='/' className="nav-link active" aria-current="page" href="#">Home</Link>
                            </li>
                            <li className="nav-item">
                                <Link to='/about' className="nav-link active" href="#">About</Link>
                            </li>
                            <li className="nav-item">
                                <Link to='/contact' className="nav-link active" href="#">Contact</Link>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>


        <div>
            <Outlet/>
        </div>
        </>
    )
}
export default Root;

Components/Home.js

import axios from "axios";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

function Home(props){
    useEffect(()=>{
        getData();
    },[])

    const [users, setUsers] = useState([]);
    const [username, setUsername] = useState();
    const [password, setPassword] = useState();

    // Fetching the data from DRF API
    async function getData(){
        const response = await axios.get(props.url);
        setUsers(response.data);
    }

    // Posting the data to DRF API
    async function handleSubmit(e){
        e.preventDefault();
        let data = {
            user_name: username,
            password: password
        }
        await axios.post(props.url+'create_user/', data, {
            headers:{
                'Content-Type': 'multipart/form-data'
            }
        });
        getData();
    }

    //Delete a specific user
    const deleteUser=(user_id)=>{
      axios.delete(props.url+`delete_user/${user_id}/`, {id:user_id})
      .then(()=>getData())
      .catch((err)=>console.log(err))

    }
    return(

        <div className="container w-50 my-5">
            <form onSubmit={handleSubmit}>
            <div className="mb-3">
                <label htmlFor="exampleFormControlInput1" className="form-label">Username</label>
                <input type="text" className="form-control" id="exampleFormControlInput1" value={username} onChange={(e)=>setUsername(e.target.value)} placeholder="Username"/>
            </div>

            <div className="mb-3">
                <label htmlFor="exampleFormControlInput2" className="form-label">Password</label>
                <input type="password" className="form-control" id="exampleFormControlInput2" value={password} onChange={(e)=>setPassword(e.target.value)} placeholder="Password"/>
            </div>
            <input type="submit" className="btn btn-primary form-control" value="ADD"/>
            </form>

            <br/>
            <table className="table text-center" border={1} cellPadding={5}>
                <tbody>
                <tr>
                    <th>Id</th>
                    <th>Username</th>
                    <th>Password</th>
                    <th>Operation</th>
                </tr>

                {
                    users.map((user=>{
                        return(
                            <tr key={user.id}>
                                <td>{user.id}</td>
                                <td>{user.user_name}</td>
                                <td>{user.password}</td>
                                <td>
                                    <Link className="btn btn-sm btn-primary mx-3" to={`/edit/${user.id}`} state={{uname: user.user_name, pwd: user.password}}>Edit</Link>
                                    <button className="btn btn-sm btn-danger" onClick={()=>deleteUser(user.id)}>Delete</button>
                                </td>
                            </tr>
                        )
                    }))
                }
                </tbody>
            </table>
            </div>
    )
}
export default Home;

Components/Edit.js

import axios from "axios";
import { useState } from "react";
import { useLocation, useParams, useNavigate } from "react-router-dom";
function Edit(props) {
    const location = useLocation();
    const userId = useParams()
    const [username, setUsername] = useState(location.state.uname);
    const [password, setPassword] = useState(location.state.pwd);
    const navigate = useNavigate();

    const updateUser = async (e) =>{
        e.preventDefault()
        const response = await axios.put(props.url+`update_user/${userId.id}/`, {user_name: username, password: password});
        navigate("/")
    }


    return(
        <div className="container w-50 my-5">
            <form onSubmit={updateUser}>
                <div className="mb-3">
                    <label for="exampleFormControlInput1" className="form-label">Username</label>
                    <input type="text" className="form-control" id="exampleFormControlInput1" value={username} onChange={(e)=>setUsername(e.target.value)} placeholder="Username"/>
                </div>

                <div className="mb-3">
                    <label for="exampleFormControlInput2" className="form-label">Password</label>
                    <input type="password" className="form-control" id="exampleFormControlInput2" value={password} onChange={(e)=>setPassword(e.target.value)} placeholder="Password"/>
                </div>
                <input type="submit" className="btn btn-primary form-control" value="Update"/>
            </form>
        </div>
    )
}

export default Edit;

Components/About.js

function About(){
    return(
        <h1>About page</h1>
    )
}
export default About;

Components/Contact.js

function Contact(){
    return(
        <h1>Contact page</h1>
    )
}
export default Contact;

Backend

settings.py

We have to create a main app in our project and add main, rest_framework and corsheaders in INSTALLED_APPS and also add some MIDDLEWARE in settings.py.

INSTALLED_APPS = [
    .
    .
    'main',
    'rest_framework',
    'corsheaders'
]
CORS_ALLOW_ALL_ORIGINS=True


MIDDLEWARE = [
    .
    .
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',    
]

project's urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main.urls')),
]

models.py

Create a MyUser model that contains user_name and password.

from django.db import models

class MyUser(models.Model):
    user_name = models.CharField(max_length=50)
    password = models.CharField(max_length=50)

    def __str__(self):
        return self.user_name

admin.py

from django.contrib import admin
from .models import MyUser
admin.site.register(MyUser)

serializers.py

from rest_framework import serializers
from .models import MyUser

class MyUserSerializer(serializers.ModelSerializer):
    class Meta:
        model = MyUser
        fields = "__all__"

views.py

from .models import MyUser
from rest_framework.decorators import api_view
from rest_framework.response import Response
from .serializers import MyUserSerializer

@api_view(['GET'])
def getData(request):
    users = MyUser.objects.all()
    users_serializer = MyUserSerializer(users, many=True)
    return Response(users_serializer.data)


@api_view(['POST'])    
def create_user(request):
    if request.method=='POST':
        data=request.data
        serializer = MyUserSerializer(data=data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response("Errrro")


@api_view(['PUT'])    
def update_user(request, id):
    if request.method=='PUT':
        data=request.data
        user_obj = MyUser.objects.get(id=id)
        serializer = MyUserSerializer(user_obj, data=data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response("Errrro")

@api_view(['DELETE'])    
def delete_user(request, id):
    if request.method=='DELETE':
        data=request.data
        user_obj = MyUser.objects.get(id=id)
        user_obj.delete()
        return Response("Delete succesffully")

urls.py

from django.urls import path
from . import views

urlpatterns  = [
    path('', views.getData),
    path('create_user/', views.create_user),
    path('update_user/<int:id>/', views.update_user),
    path('delete_user/<int:id>/', views.delete_user),
]

To run react server you have to open frontend directory in cmd and run this command - npm start
To run backend server you have to open backend directory in cmd and run this command - python manage.py runserver

Code is also available on Github

Material UI Design | React |

Madhuban Khatri — Mon, 12 Jun 2023 01:33:55 +0000

Hello Friends, This is Madhuban Khatri and Here I am sharing you Material UI Design code

Material UI

MUI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

Installation

npm install @mui/material @emotion/react @emotion/styled

Source Code

App.js

import HomePage from './Pages/HomePage';
import AboutPage from './Pages/AboutPage';
import ContactPage from './Pages/ContactPage';
import Navbar from './Pages/Navbar';
import Login from './Pages/Login';
import SignupPage from './Pages/SignupPage';

import { useState } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {

  const typoStyle = {
    display: "inline",
    marginLeft: "20px",
    marginRight: "20px",
    fontSize: "25px",
  }

  const pageTextStyle = {
    // border: "2px solid white",
    // backgroundColor:"rgb(10 25 41)", 
    width:"960px", 
    height: "400px"
  }
  const linkStyle = {
    textDecoration: 'none',
    color: '#fff',
    fontWeight: 'bolder'
}
  return (
    <>
    <BrowserRouter>
      <Navbar typoStyle={typoStyle}/>
        <Routes>
          <Route path='/' element={<HomePage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
          <Route path='/about' element={<AboutPage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
          <Route path='/contact' element={<ContactPage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
          <Route path='/signup' element={<SignupPage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
          <Route path='/login' element={<Login pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
        </Routes>
    </BrowserRouter>
    </>
  );
}

export default App;

Navbar.js

import{ Container, Typography, AppBar, Toolbar, IconButton, Switch } from '@mui/material/'
import { Link } from 'react-router-dom'
import { Menu } from '@mui/icons-material'
import { useState } from 'react'

export default function Navbar(props) {
    const [theme, setTheme] = useState('rgb(3, 45, 87)');

    const changeTheme = () => {
        if(theme==='#032d57'){
            setTheme('#001e3c')
        }else{
            setTheme('#032d57')
        }

    }   
    document.body.style.backgroundColor = theme;
    const linkStyle = {
        textDecoration: 'none',
        color: '#fff',
        fontWeight: 'bolder',
    }
    return (
        <>
        <Container style={{backgroundColor: "black", padding:"20px 0px"}}>
            <AppBar>
                <Toolbar sx={{backgroundColor:'rgb(0,30,60)'}}>
                    <IconButton
                        size='large'
                        edge='end'
                        color='inherit'
                        aria-label='menu'
                        sx={{mx:2}}
                    >
                        <Menu/>
                        </IconButton>   
                        <Typography variant='h6' sx={{mx:4, flexGrow:1}}>
                            <Link to="/" style={{textDecoration:'none', color:'white', fontWeight: 'bolder'}} >App Bar</Link>
                        </Typography>
                        <Typography variant='h6' sx={{mx:4}}>
                            <Link to="/" style={linkStyle}>Home</Link>
                        </Typography>
                        <Typography variant='h6' sx={{mx:4}}>
                            <Link to="/about" style={linkStyle}>About</Link>
                        </Typography>
                        <Typography variant='h6' sx={{mx:4}}>
                            <Link to="/contact" style={linkStyle}>Contact</Link>
                        </Typography>
                        <Switch onClick={changeTheme}/> Change Theme
                </Toolbar>
            </AppBar>



        </Container>

        </>
  )
}

HomePage.js

import{ Container, Typography, Box, Button, Grid } from '@mui/material/'
import { useNavigate } from 'react-router-dom'
import Footer from './Footer';

export default function HomePage(props) {
    const navigate = useNavigate();
  return (
    <>   
        <Container style={{position:"absolute",top:"160px"}}>
            <Box ml={35} color={'white'} style={props.pageTextStyle}>
                <Typography variant='h2' mt={15} ml={15} color={'white'}>
                    Design Material UI Website
                </Typography>

                <Grid container sx={{maxWidth:'450px'}} mx={35} my={3}>
                    <Grid item lg={6}>
                        <Button 
                            variant="contained" 
                            color='secondary' 
                            sx={{
                                width:"150px", 
                                fontSize:"15px", 
                                display:'inline-block',
                                '&:hover':{backgroundColor:'#4a148c'}}} 
                            onClick={()=>navigate("/signup")}>
                            Signup
                        </Button>
                    </Grid>
                    <Grid item lg={6}>
                        <Button 
                            variant="contained" 
                            color='secondary' 
                            sx={{
                                width:"150px", 
                                fontSize:"15px", 
                                display:'inline-block',
                                '&:hover':{backgroundColor:'#4a148c'}}} 
                                onClick={()=>navigate("/login")}>
                                Login
                        </Button>
                    </Grid>
                </Grid>


            </Box>
            <Box 
                component={'div'} 
                mx={10} 
                my={40} 
                sx={{
                    position:'absolute', 
                    top:'150px', 
                    textAlign:'center', 
                    width:'1280px',
                    borderBottom: '4px solid white',
                    borderTop: '4px solid white',
                    }}>
                <Typography variant='h1' color={'white'}>Projects</Typography>
            </Box>


            <Grid container m={20} spacing={5}>

                <Grid item lg={6}>
                    <img src='img1.png' alt='img1' style={{width:500, borderRadius:'5px'}}/>
                </Grid>

                <Grid item lg={6}>
                    <Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
                        Video Sharing App | Django | Python
                    </Typography>

                    <Typography variant='span' color={'white'}>
                    YouTube is an American online video sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
                    </Typography>
                </Grid>

                <Grid item lg={6}>
                    <Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
                        File Sharing App | Django | Python
                    </Typography>

                    <Typography variant='span' color={'white'}>
                    File Share is an American online file sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
                    </Typography>
                </Grid>
                <Grid item lg={6}>
                    <img src='img2.png' alt='img2' style={{width:500, borderRadius:'5px'}}/>
                </Grid>

                <Grid item lg={6}>
                    <img src='img3.png' alt='img3' style={{width:500, borderRadius:'5px'}}/>
                </Grid>

                <Grid item lg={6}>
                    <Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
                        Student Management System | PHP 
                    </Typography>

                    <Typography variant='span' alt='img4' color={'white'} my={5}>
                    File Share is an American online file sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
                    </Typography>
                </Grid>

                <Grid item lg={6}>
                    <Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
                        Material UI Design
                    </Typography>

                    <Typography variant='span' color={'white'}>
                        Material UI is an American online video sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
                    </Typography>
                </Grid>
                <Grid item lg={6}>
                    <img src='img4.png' alt='img4' style={{width:500, borderRadius:'5px'}}/>
                </Grid>
            </Grid>

        </Container>

        <Footer marginT={'2600px'} linkSize={'25px'} linkStyle={props.linkStyle}/>
    </>

  )
}

AboutPage.js

I know the page looks very simple but you can add your own elements like images, paragraph etc to look better.

import{ Container, Typography, Box, Grid, Button } from '@mui/material/'
import {Card,CardActions,CardContent, CardMedia, CardHeader} from '@mui/material/'

import Footer from './Footer'


export default function AboutPage(props) {
  const cardStyle = {
    color: "#fff",
    backgroundColor: `${props.theme}`=='#001e3c' ? '#032d57' : '#001e3c',
    maxWidth: "300px",
    height: "400px"
  }
  return (
    <>
      <Container sx={{position:"relative", marginTop: '60px'}}>
          <Box color={'white'} sx={props.pageTextStyle}>
            <Grid container spacing={5} mx={5} my={5}>
            {/* Card 1 */}
              <Grid item lg={4}>
                <Card sx={cardStyle}>
                  <CardMedia
                    component='img'
                    height='195'
                    image='img1.png'
                    alt="Card Image"
                  />
                  <CardContent>
                    <Typography variant='h2'>Card title</Typography>
                  </CardContent>
                  <CardContent>
                    <Typography variant='span'>Card description</Typography>
                  </CardContent>

                  <CardActions>
                    <Button variant="outlined" color='secondary' sx={{'&:hover':{backgroundColor:'#9C27B0', color: 'white'}}}>Read More</Button>
                  </CardActions>
                </Card>
              </Grid>

              {/* Card 2 */}
              <Grid item lg={4}>
                <Card sx={cardStyle}>
                  <CardMedia
                      component='img'
                      height='195'
                      image='img2.png'
                      alt="Card Image"
                    />
                    <CardContent>
                      <Typography variant='h2'>Card title</Typography>
                    </CardContent>
                    <CardContent>
                      <Typography variant='span'>Card description</Typography>
                    </CardContent>

                    <CardActions>
                      <Button variant="outlined" color='secondary' sx={{'&:hover':{backgroundColor:'#9C27B0', color: 'white'}}}>Read More</Button>
                    </CardActions>
                  <CardContent>
                    <Typography variant='span'>Card description</Typography>
                  </CardContent>
                </Card>
              </Grid>

              {/* Card 3 */}
              <Grid item lg={4}>
                <Card sx={cardStyle}>
                  <CardMedia
                      component='img'
                      height='195'
                      image='img4.png'
                      alt="Card Image"
                    />
                    <CardContent>
                      <Typography variant='h2'>Card title</Typography>
                    </CardContent>
                    <CardContent>
                      <Typography variant='span'>Card description</Typography>
                    </CardContent>

                    <CardActions>
                      <Button 
                        variant="outlined" 
                        color='secondary' 
                        sx={
                          {'&:hover':{backgroundColor:'#9C27B0', color: 'white'}
                          }}>Read More
                          </Button>
                    </CardActions>
                </Card>
              </Grid>

            </Grid>

          </Box>

      </Container>

      <Footer linkStyle={props.linkStyle} marginT={'120px'}/>
    </>
  )
}

ContactPage.js

import { Container, Typography, Box, TextField, Button } from '@mui/material/'
import Footer from './Footer'
export default function ContactPage(props) {
  return (
    <>
    <Container style={{ position: "relative", top: "40px" }} fullWidth>

      <Box mx={40} px={5} py={5} color={'white'} sx={{ backgroundColor: "rgb(0,30,60)", input: {color: 'white'}, width:'500px'}}>
        <Typography variant='h2' my={2} >Contact Us</Typography>

        <form>
          <Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Full Name</Typography>
          <TextField sx={{ marginTop: '10px' }} type='password' name='password' color='secondary' id="outlined-basic-name" variant="outlined" fullWidth />
          <br /><br />
          <Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Email</Typography>
          <TextField sx={{ marginTop: '10px' }} type='email' name='email' color='secondary' id="outlined-basic-email" variant="outlined" fullWidth />
          <br /><br />
          <Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Message</Typography>
          <TextField sx={{ marginTop: '10px'}} type='text' name='password' color='secondary' id="outlined-basic-message" variant="outlined" fullWidth />
          <br /><br />

          <Button type='submit' variant='contained' color='secondary'>Submit</Button>
        </form>

      </Box>
    </Container>
    <Footer marginT={'70px'} linkStyle={props.linkStyle}/>
    </>
  )
}

SignupPage.js

import{ Container, Typography, Box, Button } from '@mui/material/'
import TextField from '@mui/material/TextField'
import Footer from './Footer';
import { useNavigate } from 'react-router-dom';

export default function SignupPage(props) {
  const navigate = useNavigate();

  const handleSubmit=(event)=>{
    event.preventDefault(); 

    const email = event.target.email.value;
    const password = event.target.password.value;

    if(email!="" && password!=""){
      alert("Your email: "+email+" and Password: "+password)
    }else{
      alert("Please enter email and password")
    }

  }
  return (
    <>
        <Container style={{position:"absolute",top:"100px"}}>
            <Box ml={50} color={'white'} style={props.pageTextStyle}>

                <Box width={"500px"} mx={5} px={5} py={5} sx={{backgroundColor:"rgb(0,30,60)",input: { color: 'white' }}}>
                    <Typography variant='h2' my={2}>Sign Up</Typography>

                    <form onSubmit={handleSubmit}>
                      <Typography variant='label' htmlFor='outlined-basic-email'  color='secondary'>Email</Typography>
                      <TextField sx={{marginTop:'10px'}} type='email' name='email' color='secondary' id="outlined-basic-email" variant="outlined" fullWidth/>
                      <br/><br/>
                      <Typography variant='label' htmlFor='outlined-basic-email'  color='secondary'>Password</Typography>
                      <TextField sx={{marginTop:'10px'}} type='password' name='password' color='secondary' id="outlined-basic-password" variant="outlined" fullWidth />
                      <br/><br/>
                      <Button type='submit' variant='contained' color='secondary'>Signup</Button>
                      <br/>
                      <Typography variant='p' onClick={()=>navigate('/login')}>Don't have an account? Login here</Typography>
                    </form>

                </Box>

            </Box>      
        </Container>
        <Footer marginT={'580px'} linkStyle={props.linkStyle}/>
    </>

  )
}

Login.js

import{ Container, Typography, Box, Button, Checkbox } from '@mui/material/'
import TextField from '@mui/material/TextField'
import Footer from './Footer';
import { useNavigate } from 'react-router-dom';
export default function Login(props) {
  const navigate = useNavigate();

  const handleSubmit=(event)=>{
    event.preventDefault(); 

    const email = event.target.email.value;
    const password = event.target.password.value;

    if(email!="" && password!=""){
      alert("Your email: "+email+" and Password: "+password)
    }else{
      alert("Please enter email and password")
    }

  }
  return (
    <>
        <Container style={{position:"absolute",top:"100px"}}>
            <Box ml={50} color={'white'} style={props.pageTextStyle}>

                <Box width={"500px"} mx={5} px={5} py={5} sx={{backgroundColor:"rgb(0,30,60)",input: { color: 'white' }}}>
                    <Typography variant='h2' my={2}>Login</Typography>

                    <form onSubmit={handleSubmit}>
                      <Typography variant='label' htmlFor='outlined-basic-email'  color='secondary'>Email</Typography>
                      <TextField sx={{marginTop:'10px'}} type='email' name='email' color='secondary' id="outlined-basic-email" variant="outlined" fullWidth/>
                      <br/><br/>
                      <Typography variant='label' htmlFor='outlined-basic-email'  color='secondary'>Password</Typography>
                      <TextField sx={{marginTop:'10px'}} type='password' name='password' color='secondary' id="outlined-basic-password" variant="outlined" fullWidth />
                      <br/><br/>
                      <Checkbox color='secondary'/> Remember Me
                      <br/><br/>
                      <Button type='submit' variant='contained' color='secondary'>Login</Button>
                      <br/>
                      <Typography variant='p' onClick={()=>navigate('/signup')}>Already have an account? Signup here</Typography>
                    </form>

                </Box>

            </Box>      
        </Container>
        <Footer marginT={'600px'} linkStyle={props.linkStyle}/>
    </>

  )
}

Footer.js

import { Box, Grid} from "@mui/material"
import { Link } from 'react-router-dom'

export default function Footer(props) {

  return (

        <Box sx={{backgroundColor:"rgb(0,30,60)", height:"140px", marginTop:`${props.marginT}`, boxShadow:'10px 10px 10px 10px black'}}>
            <Grid container my={5} color={'white'} textAlign={'center'} justifyItems={'start'}>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/' style={props.linkStyle}>Home</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/about' style={props.linkStyle}>About</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>

            </Grid>
        </Box>


  )
}

You can change the page theme using Switch. I have created a function which can switch between #001e3c and #032d57.

Weather App in ReactJS & Material UI

Madhuban Khatri — Mon, 22 May 2023 13:35:02 +0000

Hello Friends,
I have a new blog. In this blog, you can get a complete source code of Weather App which is created in ReactJS & Material UI.

Instructions to follow

Create an app

npx create-react-app your_app_name

Goto your app folder and do this...

Install Axios

npm install axios

Install Material UI

npm install @mui/material @emotion/react @emotion/styled

Source Code on GitHub

Queue - DSA | Part 6 |

Madhuban Khatri — Sun, 16 Apr 2023 05:04:01 +0000

A queue is a useful data structure in programming. It is similar to the ticket queue outside a cinema hall, where the first person entering the queue is the first person who gets the ticket.

Queue follows the First In First Out (FIFO) rule - the item that goes in first is the item that comes out first.

In programming terms, putting items in the queue is called enqueue, and removing items from the queue is called dequeue.

Basic Operations of Queue

A queue is an object (an abstract data structure - ADT) that allows the following operations:

Enqueue: Add an element to the end of the queue
Dequeue: Remove an element from the front of the queue
IsEmpty: Check if the queue is empty
IsFull: Check if the queue is full
Peek: Get the value of the front of the queue without removing it

Queue Implementations in C++

#include <iostream>
#define SIZE 5

using namespace std;

class Queue {
   private:
  int items[SIZE], front, rear;

   public:
  Queue() {
    front = -1;
    rear = -1;
  }

  bool isFull() {
    if (front == 0 && rear == SIZE - 1) {
      return true;
    }
    return false;
  }

  bool isEmpty() {
    if (front == -1)
      return true;
    else
      return false;
  }

  void enQueue(int element) {
    if (isFull()) {
      cout << "Queue is full";
    } else {
      if (front == -1) front = 0;
      rear++;
      items[rear] = element;
      cout << endl
         << "Inserted " << element << endl;
    }
  }

  int deQueue() {
    int element;
    if (isEmpty()) {
      cout << "Queue is empty" << endl;
      return (-1);
    } else {
      element = items[front];
      if (front >= rear) {
        front = -1;
        rear = -1;
      } 
      else {
        front++;
      }
      cout << endl
         << "Deleted -> " << element << endl;
      return (element);
    }
  }

  void display() {
    int i;
    if (isEmpty()) {
      cout << endl
         << "Empty Queue" << endl;
    } else {
      cout << endl
         << "Front index-> " << front;
      cout << endl
         << "Items -> ";
      for (i = front; i <= rear; i++)
        cout << items[i] << "  ";
      cout << endl
         << "Rear index-> " << rear << endl;
    }
  }
};

int main() {
  Queue q;


  q.deQueue();


  q.enQueue(1);
  q.enQueue(2);
  q.enQueue(3);
  q.enQueue(4);
  q.enQueue(5);


  q.enQueue(6);

  q.display();


  q.deQueue();


  q.display();

  return 0;
}

Stack - DSA | Part 5 |

Madhuban Khatri — Thu, 06 Apr 2023 05:37:18 +0000

In computer science, a stack is an abstract data type that represents a collection of elements with a last-in-first-out (LIFO) access policy.

It is called a "stack" because it resembles a stack of plates or a stack of books, where you can only add or remove elements from the top of the stack. The element that was added last is the first one to be removed.

The two fundamental operations of a stack are "push" (which adds an element to the top of the stack) and "pop" (which removes the top element from the stack). Additionally, there are also "peek" operations, which allow you to examine the top element without removing it, and "isEmpty" operations, which check if the stack is empty.

Stacks are often used in computer programs for storing temporary data or for implementing algorithms that require a LIFO structure, such as expression evaluation, recursion, and undo mechanisms.

Implementation of Stack

#include <bits/stdc++.h>

using namespace std;

#define MAX 1000

class Stack {
    int top;

public:
    int a[MAX];

    Stack() { top = -1; }
    bool push(int x);
    int pop();
    int peek();
    bool isEmpty();
};

bool Stack::push(int x)
{
    if (top >= (MAX - 1)) {
        cout << "Stack Overflow";
        return false;
    }
    else {
        a[++top] = x;
        cout << x << " pushed into stack\n";
        return true;
    }
}

int Stack::pop()
{
    if (top < 0) {
        cout << "Stack Underflow";
        return 0;
    }
    else {
        int x = a[top--];
        return x;
    }
}
int Stack::peek()
{
    if (top < 0) {
        cout << "Stack is Empty";
        return 0;
    }
    else {
        int x = a[top];
        return x;
    }
}

bool Stack::isEmpty()
{
    return (top < 0);
}


int main()
{
    class Stack s;
    s.push(10);
    s.push(20);
    s.push(30);
    cout << s.pop() << " Popped from stack\n";


    cout << "Top element is : " << s.peek() << endl;


    cout <<"Elements present in stack : ";
    while(!s.isEmpty())
    {
        cout << s.peek() <<" ";
        s.pop();
    }

    return 0;
}

DEV Community: Madhuban Khatri

CinePlex - ReactJS + Django Rest Framework project

Why ReactJS and Django REST Framework?

Key Features

How I Built It

Backend: Django REST Framework

Frontend: ReactJS

Connecting the Dots

RESULT

See It on GitHub

Final Thoughts

Razorpay Integration with Django

Razorpay Integration with Django: Step-by-Step Guide 💳

Razorpay Integration with Django: Step-by-Step Guide 💳

🔧 Step 1: Install Razorpay Python SDK

📁 Step 2: Setup Razorpay Keys

🧠 Step 3: Create the Payment View

Society Issue Management System

Source code

Create Image Slider in ReactJS

KEY POINTS

ImageSlider.js

App.js

Context API in React

What is Context API in React

Prop Drilling

Why Context API

How to use Context API

Create a Context.js file

Create a MyComponent.js file

App.js file

Token authentication in Django Rest Framework

settings.py

views.py

urls.py

serializers.py

Output

How to create a CRUD application in ReactJS and Django Rest Framework

Frontend

App.js

Components/Root.js

Components/Home.js

Components/Edit.js

Components/About.js

Components/Contact.js

Backend

settings.py

project's urls.py

models.py

admin.py

serializers.py

views.py

urls.py

Material UI Design | React |

Material UI

Installation

Source Code

App.js

Navbar.js

HomePage.js

AboutPage.js

ContactPage.js

SignupPage.js

Login.js

Footer.js

Weather App in ReactJS & Material UI

Instructions to follow

Create an app

Install Axios

Install Material UI

Source Code on GitHub

Queue - DSA | Part 6 |

Basic Operations of Queue

Queue Implementations in C++

Stack - DSA | Part 5 |

Implementation of Stack

Create a `Context.js` file

Create a `MyComponent.js` file

`App.js` file