DEV Community: Madhuban Khatri

component - A Better Way to Hide Components Without Losing State

Madhuban Khatri — Fri, 12 Jun 2026 14:29:39 +0000

What is the use of Activity Component?

We can hide the components without losing their state.

What problem it resolve?

Most developers use Conditional Rendering for component hiding. When a component disappears, React completely unmounts it. This means:

State is lost
Effects are destroyed
Form inputs reset
Scroll positions disappear
Expensive components re-render again later

{visible && <Test/>}

How to use it?

Test.jsx

import React, { useState } from 'react'

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={()=>setCount(count+1)}>Increment</button>
      <button onClick={()=>setCount(count-1)}>Decrement</button>
    </div>
  )
}

export default Test

App.jsx

import { Activity, useState } from "react"
import Test from "./Test"

function App() {
  const [visible, setVisible] = useState("visible");

  return (
    <>
    <Activity mode={visible=="visible" ? "visible": "hidden"}>
      <Test/>
    </Activity>
    <button onClick={()=>setVisible("visible")}>Visible</button>
    <button onClick={()=>setVisible("hidden")}>Hide</button>
    </>
  )
}

export default App

What happens internally?

When the mode becomes "hidden", state is preserved, and when mode becomes "visible" again, previous state is restored.

Thank you for visiting,
If you have any question then comment below.

Drizzle ORM and Argon 2 integration in NodeJs

Madhuban Khatri — Wed, 10 Jun 2026 06:48:06 +0000

Hello guys,
We will integrate DRIZZLE ORM and Argon2 in NodeJs project. First we have to understand, what is ORM. ORM refers to Object Relational Mapper, it is a technique that lets developers query and change data in a database using an object-oriented programming language. Instead of writing raw database code, you write code in the language you already know.

Argon2 is modern cryptographic hashing algorithem to secure passwords against hackers. It transforms passwords into fixed-length strings called hashes, acting as digital fingerprints without reveling the actual password.
In this post, we will first hash the user password and store in db, then verify the hashed password with original password to delete the data.

We will use PostgreSQL for our main Database.

Follow these steps for Integration:

Install the packages

npm init -y
npm i drizzle-orm pg dotenv argon2
npm i -D drizzle-kit

Create .env

DATABASE_URL=postgresql://username:password@localhost:5432/db_name

Create db.js

import dotenv from "dotenv";
import { drizzle } from 'drizzle-orm/node-postgres';
dotenv.config();

const db = drizzle(process.env.DATABASE_URL);

Create schema.js

import { integer, pgTable, varchar, text } from "drizzle-orm/pg-core";

export const usersTable = pgTable("users", {
  id: serial("id").primaryKey(),
  name: varchar("name", { length: 255 }).notNull(),
  age: integer("age").notNull(),
  email: varchar("email", { length: 255 }).notNull().unique(),
  password: text("password").notNull()
});

Config drizzle.config.js

import dotenv from "dotenv";
import { defineConfig } from 'drizzle-kit';
dotenv.config();

export default defineConfig({
  out: './drizzle',
  schema: './src/db/schema.ts',
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
});

Applying changes to the Database

We can use

npx drizzle-kit push

command directly. But from this command, migration files will not create in out project. It will changes the database directly. This command use only in Developement.

For Production, we have two different commands, first one is

npx dirzzle-kit generate

that can create migration files. Second one is

npx drizzle-kit migrate

that can apply the changes to the database.

Drizzle configuration has been done. It's time to test the cod. Let's see what happen when we insert data using Drizzle ORM.

Create app.js

import {db} from "./config/db.js";
import {usersTable} from "./drizzle/schema.js";
import { eq } from "drizzle-orm";
import argon2 from "argon2";


const hashing = async (password) => {
  return await argon2.hash(password);
}

async function verifyPassword(hashPassword, password){
    return argon2.verify(hashPassword,password)
}
const user = {
    name: "Ravi",
    age: 27,
    email: "ravikishan@gmail.com",
    password: "ravikishan"
}


const main = async ()=>{
    const {name, age, email, password} = user;
    const hashPassword = await hashing(password);
    const isVeriied = await verifyPassword(hashPassword, password);


    const insertUser = await db.insert(usersTable).values({
        name: name,
        age: age,
        email: email,
        password: hashPassword
    })


    if(isVeriied){
        await db.delete(usersTable).where(eq(usersTable.email,email));
    }else{
        console.log("verification failed");
    }

}

main().catch((e)=>console.error(e));

Thank you for reading.
If you like the post, then hit like and do comment for any queries.

Integrate Razorpay payment gateway in MERN project

Madhuban Khatri — Tue, 09 Jun 2026 13:56:44 +0000

Hello guys,
I am MADHUBAN KHATRI. I make blogs on Django and MERN stack . Today we will learn how to integrate Razorpay payment gateway in a MERN project.
Before starting, I want that check the blog of Razorpay integration with Django Project:
Razorpay Integration in Django Project

Backend Setup

Install packages

npm install express razorpay cors dotenv crypto

.env

PORT=5000
KEY_SECRET=razorpay_key_secret
KEY_ID=razorpay_key_id

server.js

require("dotenv").config();
const express = require("express");
const connectDb = require("./utils/db");
const paymentRouters = require("./routers/paymentRoute");
const cors = require("cors");

const app = express();

const corsOptions = {
    origin: 'http://localhost:5173',
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    credentials: true,
}



app.use(cors(corsOptions));
app.use(express.json());
app.use(express.urlencoded({extended: true}));

app.use("/api/v1", paymentRouters);

const PORT = process.env.PORT || 5000;

connectDb()
    .then(() => {
        app.listen(PORT, () => {
            console.log(`server is listening on ${PORT}`);
        });
    })
    .catch((err) => {
        console.error("Database connection error:");
        console.error(err);
 });

utils/razorpay.js

import Razorpay from "razorpay";
const instance = new Razorpay({
    key_id: process.env.KEY_ID,
    key_secret: process.env.KEY_SECRET
});
export default instance;

controllers/paymentController.js

import instance from "../utils/razorpayIntegration.js"
import crypto from "crypto";

const paymentHandller = async (req, res)=>{
    const {amount} = req.body;
    const options = {
        amount: amount * 100,
        currency: "INR"
    }

    const order = await instance.orders.create(options);

    res.status(200).json({
        status: true,
        order
    })
}

const getRazorpayKey = async (req, res)=>{
    res.status(200).json({
        key: process.env.RAZORPAY_API_KEY
    })

}

const paymentVerification = async (req, res)=>{
    const {razorpay_payment_id, razorpay_order_id, razorpay_signature} = req.body;
// Note : If the positions of order id and payment id will be changed then   the expectedSign will create different from original razorpay signature.
    const body = razorpay_order_id + "|" + razorpay_payment_id;

    const expectedSign = crypto.createHmac("sha256", process.env.RAZORPAY_KEY_SECRET)
                                .update(body.toString()).digest("hex")

    const isAuthentic = razorpay_signature === expectedSign;
    if(isAuthentic){
        res.status(200).json({
            status: true,
            payment_id: razorpay_payment_id
        })
    }else{
        res.success(404).json({
            success: false,
            message: "Payment failed"
        })

    }
    res.status(200).json({
        success: true
    })
}

module.exports = {paymentHandller, getRazorpayKey, paymentVerification}

routers/paymentRouter.js

const express = require('express');
const router = express.Router();
const paymentControllers = require("../controllers/paymentController");

router.post('/payment-handller', paymentControllers.paymentHandller);
router.get('/get-key', paymentControllers.getRazorpayKey);
router.post('/paymentVerification', paymentControllers.paymentVerification)

module.exports = router;

Frontend Setup

index.html

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

checkout.jsx

const checkout = async (amount)=>{
    try {
      const response1 = await api.get("/api/v1/get-key");
      const key = await response1.data.key;


      const response2 = await api.post("/api/v1/payment-handller", {
        amount: amount
      })
      const order = await response2.data.order
      const options = {
        key: key, 
        amount: amount, 
        currency: 'INR',
        name: 'Test name',
        description: 'Test Transaction',
        order_id: order.id, 
        handler: async function (response) {
          const res = await api.post("/api/v1/paymentVerification",
            response
          );
          if(res.data.status){
            navigate(`/paymentSuccess?reference=${res.data.payment_id}`);
          }else{
            console.log("Payment Failed.")
          }
        },        
        prefill: {
          name: 'test Kumar',
          email: 'test.kumar@example.com',
          contact: '9999999999'
        },
        theme: {
          color: '#F37254'
        },
      };
      const rzp = new Razorpay(options);
      rzp.open();
      return order;  
    } catch (error) {
      console.log(error);
    }
  }

paymentSuccess.jsx

import { useSearchParams} from 'react-router-dom'

function PaymentSuccess() {
  const [searchParams] = useSearchParams();
  const paymentId = searchParams.get("reference");

  return (
    <div>
      <h1>Payment Id: {paymentId }</h1>
    </div>
  )
}

export default PaymentSuccess

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

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.

DEV Community: Madhuban Khatri

component - A Better Way to Hide Components Without Losing State

What is the use of Activity Component?

What problem it resolve?

How to use it?

Test.jsx

App.jsx

What happens internally?

Drizzle ORM and Argon 2 integration in NodeJs

Install the packages

Create .env

Create db.js

Create schema.js

Config drizzle.config.js

Applying changes to the Database

Create app.js

Integrate Razorpay payment gateway in MERN project

Backend Setup

Install packages

.env

server.js

utils/razorpay.js

controllers/paymentController.js

routers/paymentRouter.js

Frontend Setup

index.html

checkout.jsx

paymentSuccess.jsx

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

Create a `Context.js` file

Create a `MyComponent.js` file

`App.js` file