As web applications scale, handling I/O-bound tasks efficiently becomes critical. Django has historically been synchronous, but recent versions support async views — including with Django REST Framework. Let’s break down how to use it, why it matters, and where it fits (and doesn’t).

🔧 How to Set It Up

Since Django 3.1, you can write async views directly. DRF (as of v3.12+) also supports async-compatible views.

1.Async APIView Example

from rest_framework.views import APIView
from rest_framework.response import Response

class AsyncHelloView(APIView):
    async def get(self, request):
        return Response({"message": "Hello, async world!"})

2.Using async in function-based views

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
async def async_hello(request):
    return Response({"message": "Hi from async FBV"})

3.Run an async-compatible server

To truly benefit from async, use ASGI servers like:

• uvicorn
• daphne

In asgi.py, make sure you have:

from django.core.asgi import get_asgi_application
application = get_asgi_application()

Then run:

uvicorn your_project.asgi:application

⚡ Why Use Async in DRF?

1 . Handle many requests efficiently

• Async allows the server to handle other requests while waiting for external I/O (e.g., DB, external APIs).

2. Improved performance on I/O-heavy operations

Useful when calling:

• Third-party APIs
• External services like Redis
• File systems or cloud storage

3. Better concurrency without threads

• Unlike threads, async uses a single-threaded event loop — reducing overhead.

🧱 Bottlenecks and Gotchas

1. Django ORM is not async

• This is the biggest blocker. If you call:

await MyModel.objects.all()

It will raise an error. You must use sync wrappers:

from asgiref.sync import sync_to_async
queryset = await sync_to_async(MyModel.objects.all)()

2. Mixing sync and async wrongly leads to problems

• Use sync_to_async carefully. Too many sync wrappers = performance hit.

3. Third-party packages

• Not all are async-compatible. You must test your stack.

4. Testing async views

• Django’s test client is sync by default. For proper async tests, use tools like httpx or pytest-asyncio.

🔥 Relatable Use Cases

✅ Good Use Cases

• Calling external APIs (e.g., weather, payments)
• Fetching data from multiple services concurrently
• Waiting on cloud storage or Redis/MongoDB (if async-enabled)
• Webhook endpoints with minimal DB hits

❌ Poor Use Cases

• Heavy ORM operations
• Complex database transactions
• Views that just CRUD directly with Django ORM (better stay sync)

Final Thoughts

Using async in DRF is a powerful tool when your app is I/O-bound — not CPU-bound or DB-heavy. Use it selectively in views that wait on external services, and be mindful of Django’s sync internals.

Start small. Test performance. Use async where it makes sense.

References

Django 3.1 release notes (async view support)
https://docs.djangoproject.com/en/3.1/releases/3.1/

Testing async views in Django
https://testdriven.io/blog/django-async-views/

Where to find Me 👇

Here on Medium ♥️

You can also find me also 👉 Github https://github.com/Onlynfk/
Instagram / LinkedIn

Want to Work with me?

If you’re looking for a skilled developer to collaborate with, you can view my portfolio here. Let’s bring your ideas to life together

Ever cooked a meal in a slow cooker? You don’t prepare everything at once — you add ingredients one by one, let them cook step by step, and serve as needed. That’s exactly how Python generators work! Instead of storing everything in memory at once, they yield one item at a time, saving space and improving performance.

Let’s dive into this game-changing Python feature that every developer should know! 💡

🍲 Scenario: The Buffet vs. The Waiter Approach

Imagine you’re at an all-you-can-eat buffet. The restaurant brings out every dish at once, filling up the table (and your plate) with everything available. Sounds great, right? Not really — what if you can’t finish everything? Wasted memory! 😵

Now, compare that to a waiter service. You order one dish at a time and only get what you can eat. No wasted space, no overloaded table — just what you need, when you need it.

This is exactly how generators differ from lists in Python!

• 🍽️ Buffet (Lists): Stores everything in memory at once.
• 👨‍🍳 Waiter Service (Generators): Provides items one by one on demand.

🛠️ How Do Generators Work?

Before we talk about generators, let’s first understand iterators.

An iterator allows you to loop through a sequence of data without storing it all in memory.

For example, instead of storing numbers 1 to 1 million in a list, an iterator generates them as needed. This saves a ton of memory.

💡 Python’s range() function is an iterator!

import sys  

x = list(range(1000000))  # Stores 1 million numbers in memory  
y = range(1000000)  # Generates numbers on demand  

print(sys.getsizeof(x))  # Huge memory usage
print(sys.getsizeof(y))  # Tiny memory usage

⚡ Creating Your Own Iterator (Old Way)

Let’s create an iterator manually using a class.

class CountUpTo:
    def __init__(self, max):
        self.max = max
        self.current = 0
    
    def __iter__(self):
        return self  # Returns the iterator object
    
    def __next__(self):
        if self.current >= self.max:
            raise StopIteration  # Ends iteration
        
        self.current += 1
        return self.current

counter = CountUpTo(5)  # Count up to 5
for num in counter:
    print(num)

✅ Works well but requires a lot of code!

Now, let’s do the same thing more elegantly with generators.

🧙‍♂️ Generators: The Simple & Elegant Way

With generators, we don’t need to create a class. We just use yield instead of return!

def count_up_to(max):
    current = 1
    while current <= max:
        yield current  # Pause execution and return the value
        current += 1  # Continue from where we left off

🔹 Using the Generator

counter = count_up_to(5)

for num in counter:
    print(num)

💡 How it Works:

1. Calls count_up_to(5), creating a generator.
2. yield returns a value but pauses execution (does NOT exit).
3. When next() is called, the function resumes where it left off!

🎭 Real-World Example: Reading Large Files

Imagine you need to read a 1GB log file. You don’t want to load it all at once! Instead, you read it line by line, like this:

def read_large_file(file_path):
    with open(file_path, "r") as file:
        for line in file:
            yield line  # Yield one line at a time

# Usage
for line in read_large_file("big_log.txt"):
    print(line)  # Process one line at a time without using too much memory!

🔹 Without generators: Python would try to store the entire file in memory.
🔹 With generators: Python streams one line at a time, keeping memory usage low.

📌 Generator Comprehensions (One-Liner Generators)

Just like list comprehensions, Python allows generator comprehensions for a more compact syntax.

🔹 List comprehension (stores everything in memory)

nums = [x**2 for x in range(10)]

🔹 Generator comprehension (generates one at a time, saves memory)

nums = (x**2 for x in range(10))  # Uses parentheses instead of square brackets

💡 You can iterate over nums just like any other generator:

for num in nums:
    print(num)

🚀 Key Advantages of Generators

✅ Memory Efficient — Does not store all values at once.
✅ Faster Execution — Only computes when needed.
✅ Better for Large Datasets — Useful for reading big files or streaming data.
✅ Elegant Syntax — Less code than manual iterators.

🔹 When to Use Generators?

✅ Use Generators When… ❌ Don’t Use Generators When… Processing large datasets You need to modify elements before using them Streaming live data You need random access to the data Lazy evaluation is required You want to store all results for later use

💡 Final Thoughts

Python generators are a powerful feature that allows you to iterate efficiently without storing everything in memory.

👉 If you’re working with large files, databases, or data streams, generators can save you time and memory.

🔹 Try replacing loops with generators in your next project and see the difference! 🚀🐍

References

Python Generators Explained

Where to find Me 👇

Here on Medium ♥️

You can also find me also 👉 Github https://github.com/Onlynfk/
Instagram / LinkedIn

Want to Work with me?

If you’re looking for a skilled developer to collaborate with, you can view my portfolio here. Let’s bring your ideas to life together

Python Generators: The Magic Behind Efficient Iteration 🚀🐍 was originally published in CodeX on Medium, where people are continuing the conversation by highlighting and responding to this story.

Python is a versatile language with constant updates and improvements that make coding simpler, faster, and more efficient. As we move into 2025, here are ten Python tricks you need to master to level up your coding game, whether you’re a developer, data analyst, or just diving into Python.

1. The Walrus Operator (:=)

The walrus operator, introduced in Python 3.8, is a game-changer for writing concise and efficient code. It allows assignment and evaluation in a single expression, reducing redundancy.

Example:

my_list = [1, 2, 3, 4, 5]
if (n := len(my_list)) > 3:
    print(f"List is too long ({n} elements).")

Here, n is assigned the length of my_list while also being evaluated in the if condition. This eliminates the need for a separate line to calculate the length.

Use Case:

• Filtering data in loops or comprehensions.

• Avoiding redundant calculations.

2. Data Classes

Data classes simplify the creation of classes for storing data. Available since Python 3.7, they automatically generate special methods like __init__(), __repr__(), and __eq__().

Example:

from dataclasses import dataclass

@dataclass
class Point:
    x: int
    y: int

p = Point(4, 6)
print(p)  # Output: Point(x=4, y=6)

Benefits:

• Cleaner and more readable code.

• Automatic handling of repetitive boilerplate methods.

3. Pattern Matching with match

Introduced in Python 3.10, pattern matching offers a structured and readable way to handle multiple conditions, similar to switch in other languages but more powerful.

Example:

status_code = 200

match status_code:
    case 200:
        print("OK")
    case 404:
        print("Not Found")
    case _:
        print("Unknown status")

Why Use It?

• Simplifies nested if-else chains.

• Handles complex data structures elegantly.

4. Enhanced F-Strings for Debugging

F-strings, introduced in Python 3.6, allow for inline variable evaluation. Adding an equal sign (=) in an F-string displays both the variable name and its value, making debugging faster and cleaner.

Example:

value = 45
print(f"{value=}")  # Output: value=45

Advantages:

• Quick inspection of variables.

• More informative debugging output.

5. Unpacking with the Asterisk (*) Operator

The asterisk (*) operator simplifies handling iterable unpacking, allowing for flexible assignment of elements.

Example:

fruits = ["banana", "apple", "mango", "berry"]
yellow, green, *red = fruits
print(yellow)  # Output: banana
print(red)     # Output: ['mango', 'berry']

Applications:

• Splitting lists dynamically.

• Passing variable-length arguments to functions.

6. Type Hinting

Type hinting improves code readability and helps static analysis tools detect type-related issues. It’s especially useful in team environments or when working on large projects.

Example:

from typing import List

def average(numbers: List[float]) -> float:
    return sum(numbers) / len(numbers)

print(average([1.0, 2.0, 3.0]))  # Output: 2.0

Why Use Type Hints?

• Reduces debugging time.

• Enhances IDE support with better autocomplete and error detection.

7. Context Managers with contextlib

Custom context managers, created using the contextlib module, streamline resource management, such as file handling or database connections.

Example:

from contextlib import contextmanager

@contextmanager
def my_context():
    print("Entering context")
    yield
    print("Exiting context")

with my_context():
    print("Inside the context")

Benefits:

• Automatic cleanup of resources.

• Reduces code clutter.

8. The lru_cache decorator caches the results of expensive function calls, speeding up repeated computations for the same inputs.

Example:

from functools import lru_cache
@lru_cache(maxsize=None)
def fibonacci(n: int) -> int:
  if n < 2:
  return n
  return fibonacci(n - 1) + fibonacci(n - 2)
  print(fibonacci(50)) # Output: 12586269025

Use Cases:

• Recursive algorithms.

• Improving performance in data processing.

9. File Handling with pathlib

The pathlib module provides an object-oriented approach to file system paths, replacing cumbersome os module operations.

Example:

from pathlib import Path

file_path = Path("example.txt")
file_path.write_text("Hello, Pathlib!")
print(file_path.read_text())  # Output: Hello, Pathlib!

Why Use Pathlib?

• Simplifies file operations.

• Cross-platform compatibility.

10. Enumerate with Custom Start Index

The enumerate function, enhanced with the start parameter, is perfect for loops where you need both the index and the value.

Example:

items = ['a', 'b', 'c', 'd']
for index, item in enumerate(items, start=1):
    print(f"{index}: {item}")

Applications:

• Numbering items in a list.

• Simplifying code that tracks indices manually.

Conclusion

These Python tricks, ranging from new features like the walrus operator and pattern matching to advanced techniques like context managers and memoization, will keep your code efficient and modern. Master them to boost your productivity and make your code cleaner and more professional.

Which of these tricks do you use the most? Let me know in the comments! And don’t forget to share this post with your fellow Python enthusiasts. 🚀

References

• Top 10 Python tricks you can learn in 2025

Where to find Me 👇

Here on Medium ♥️

You can also find me also 👉 Github https://github.com/Onlynfk/
Instagram / LinkedIn

Want to Work with me?

If you’re looking for a skilled developer to collaborate with, you can view my portfolio here. Let’s bring your ideas to life together

10 Python Tricks in 2025 was originally published in CodeX on Medium, where people are continuing the conversation by highlighting and responding to this story.

Python is a popular programming language that is widely used in web development. If you are interested in becoming a web developer with Python, then this guide is for you.

Tools needed to learn Python web development

Before diving into Python web development, you need to have some tools in place. Here are some of the essential tools you need to learn Python web development:

• Python — You need to have Python installed on your computer. You can download Python from the official website at https://www.python.org/downloads/.
• Text editor — You need a good text editor to write your Python code. Popular text editors include Visual Studio Code, Sublime Text, and Atom.
• Web browser — You need a web browser to test your web applications. Chrome, Firefox, and Safari are popular web browsers.
• Command-line interface — You should be familiar with the command-line interface to execute commands in the terminal.

Best web frameworks to learn in Python

There are several web frameworks for Python, and here are some of the best frameworks to get started with:

• Django — Django is a high-level Python web framework that follows the model-view-controller (MVC) architecture. It is perfect for building complex web applications and is widely used by developers.
• Flask — Flask is a lightweight Python web framework that is easy to learn and use. It is perfect for building small web applications.
• Bottle — Bottle is a simple and lightweight Python web framework that is ideal for building RESTful web services.

10 sample projects to start with

Here are ten Python web development projects you can start with:

1. Flask Blog — A simple blogging application built with Flask.
2. Django Polls — A polling application built with Django.
3. Flaskr — A microblogging application built with Flask.
4. Django Todo List — A simple todo list application built with Django.
5. Flask Web Scraper — A web scraper built with Flask.
6. Django E-commerce — A simple e-commerce application built with Django.
7. Flask Chat — A real-time chat application built with Flask.
8. Django Contact Form — A contact form application built with Django.
9. Flask Image Recognition — An image recognition application built with Flask.
10. Django File Upload — A file upload application built with Django.

Conclusion

Python web development is an exciting field, and with the right tools and frameworks, you can build amazing web applications. Start with the projects listed above and continue to explore the world of Python web development.

You can find the code for this blog on GitHub: Link

Tools

Before we begin, make sure you have the following tools and technologies set up:

• Visual Studio Code (Text Editor)
• Python version 3 ++
• Nodejs
• Windows (OS) using WSL and windows terminal

Table of Content

In this part of the tutorial, we will cover the following steps:

1. Setup Project
2. Install Dependencies
3. Integrate Tailwindcss
4. Setup Routing
5. Setup Pages
6. SocialAuth Page
7. Add Environment Variables
8. Done 🚀 Testing How It Work

1. Setup Project

Here we are creating our Project app using the terminal, ensure you have Nodejs and create-react-app installed globally

npx create-react-app <project_name_here>

2. Install dependencies

yarn add react-router-dom axios query-string

open the project directory with vscode, now on your terminal start your server by running the command below

yarn start // for those using yarn

3. Integrate Tailwindcss

First, let’s update the public/index.html to use tailwindcss

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Google Auth App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Now open the index.js file in the src folder, let’s setup routing using react-router-dom

4. Setup Routing

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

In App.js let’s create the pages routes

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/Home"
import SocialAuth from "./pages/social-auth"

const App = () => {

  return (
    <Routes>
    <Route exact path="/" element={<Home />} />
    <Route exact path="/google" element={<SocialAuth />} />
    </Routes>
  );
};

export default App;

5. Setup Pages

Next let’s create a pages folder in our src folder and create a Home folder in it, with a index.js and also a SocialAuth folder with a index.js

// src/pages/Home/index.js


import React, { useCallback, useEffect, useState } from "react";

const { REACT_APP_GOOGLE_CLIENT_ID, REACT_APP_GOGGLE_REDIRECT_URL_ENDPOINT } =
  process.env;

const Home = () => {
  const [username, setUsername] = useState(localStorage.getItem('goggleFirstName'))

  useEffect(() => {
    const storedUsername = localStorage.getItem("user_goggle");
    if (storedUsername) {
      setUsername(storedUsername);
    }
  }, []);
  const openGoogleLoginPage = useCallback(() => {
    const googleAuthUrl = "https://accounts.google.com/o/oauth2/v2/auth";
    
    const scope = [
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile",
    ].join(" ");

    const params = new URLSearchParams({
      response_type: "code",
      client_id: REACT_APP_GOOGLE_CLIENT_ID,
      redirect_uri: `${REACT_APP_GOGGLE_REDIRECT_URL_ENDPOINT}/google`,
      prompt: "select_account",
      access_type: "offline",
      scope,
    });

    const url = `${googleAuthUrl}?${params}`;

    window.location.href = url;
  }, []);

  const handleLogout = () => {
    localStorage.clear(); // Clear localStorage when the button is clicked
    setUsername("")
  };
  return (
    <div className="flex flex-col items-center justify-center h-screen">
       {!username &&  <button
           
           className="bg-white text-gray-800 font-bold py-2 px-4 border rounded shadow  focus:outline-none  mb-8  mb-4"
           onClick={openGoogleLoginPage}
         >
           <div className="flex items-center justify-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 48 48"
               width="48px"
               height="48px"
             >
               <path
                 fill="#FFC107"
                 d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
               />
               <path
                 fill="#FF3D00"
                 d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
               />
               <path
                 fill="#4CAF50"
                 d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
               />
               <path
                 fill="#1976D2"
                 d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
               />
             </svg>
             Sign in with Google
           </div>
         </button>
     
      }
      {username ? (
        <div className="text-center">
          <small className="text-primary-600">User is logged as: {username}</small>
          <br/>
          <button onClick={handleLogout} className="bg-red-400 hover:bg-red-200 text-white font-semibold py-2 px-4 rounded mt-2">
      Logout
    </button>
        </div>
      ) : (
        <small className="text-primary-600">Ops not Logged in yet</small>
      )}

    </div>
  );
};

export default Home;

Next, let’s update the SocialAuth folder, index.js file

import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import queryString from "query-string";
import axios from "axios";
import "./index.css";

const { BACKEND_API_URL } = process.env;

const SocialAuth = () => {
  let location = useLocation();
  console.log("location", location);
  const [error, setError] = useState("");
  const navigate = useNavigate();

  useEffect(() => {
    const values = queryString.parse(location.search);
    const code = values.code ? values.code : null;

    if (code) {
      onGogglelogin();
    }
  }, []);

  const googleLoginHandler = (code) => {
    return axios
      .get(`${BACKEND_API_URL}/api/auth/google/${code}`)
      .then((res) => {
        localStorage.setItem("goggleFirstName", res.data.user.first_name);
        return res.data;
      })
      .catch((err) => {
        setError(err);
        return err;
      });
  };

  const onGogglelogin = async () => {
    const response = await googleLoginHandler(location.search);
    if (response.data.access) {
      navigate("/");
    }
  }

  return (
    <div className="loading-icon-container">
      <div className="loading-icon">
        <div className="loading-icon__circle loading-icon__circle--first"></div>
        <div className="loading-icon__circle loading-icon__circle--second"></div>
        <div className="loading-icon__circle loading-icon__circle--third"></div>
        <div className="loading-icon__circle loading-icon__circle--fourth"></div>
      </div>
        <small className=" text-center mr-2">
          Just a moment
        </small>
    </div>
  );
};


export default SocialAuth;

In the social-auth folder let’s create a index.css

// social-auth/index.css

.loading-icon-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .loading-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 150px;
    margin-left: -2rem;
  }
  
  .loading-icon__circle {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #2ba7dc;
    margin-right: 8px;
    animation: spin 1s ease-in-out infinite;
  }
  
  .loading-icon__circle--first {
    animation-delay: 0.1s;
    background-color: #ffc107;
  
  }
  
  .loading-icon__circle--second {
    animation-delay: 0.2s;
  }
  
  .loading-icon__circle--third {
    animation-delay: 0.3s;
    background-color: #ffc107;
  }
  .loading-icon__circle--fourth {
    animation-delay: 0.3s;
  }
  
  @keyframes spin {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(130%);
    }
  }

6. Add environments variables

Next, let’s create a .env file in our project

BACKEND_API_URL='http://localhost:8000'
REACT_APP_GOGGLE_REDIRECT_URL_ENDPOINT='http://localhost:3000'
REACT_APP_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID"

6. Done 🚀 testing how it works

Let’s test how it all works

Done 🚀 Congratulations! You’ve successfully integrated a custom Google login system into your Django and ReactJS project. This authentication mechanism enhances user experience and security while interacting with your application.

You can find the code for this blog on GitHub: Link

Thanks for Your Time ♥️

I hope you’ve found this tutorial helpful. If you have any questions or feedback, feel free to reach out. Stay tuned for more tutorials and guides on various development topics!

Where to find Me 👇

Here on Medium ♥️

You can also find me also 👉 Github https://github.com/Onlynfk/
Instagram / LinkedIn

Want to Work with me?

If you’re looking for a skilled developer to collaborate with, you can view my portfolio here. Let’s bring your ideas to life together.

Thank you for reading until the end. Please consider following the writer and this publication. Visit Stackademic to find out more about how we are democratising free programming education around the world.

Build a Custom Google Authentication System with Django Rest Framework and React II was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello there! 😊 Today, we are going to embark on a journey to build a custom Google authentication system using Django Rest Framework and ReactJS, without relying on any social third-party plugins. This tutorial will be divided into two parts, focusing on the setup of our Django backend and the subsequent frontend implementation.

Co-authored by Adetola Abiodun

I’m excited to share this article, co-authored with Adetola Abiodun. Tola is a seasoned full-stack Web/Mobile Engineer. Together, we’ve combined our insights to bring you a comprehensive look into building this custom authentication system. We hope you find our collaboration informative and engaging!

You can find the code for this blog on GitHub: Link

Before we begin, make sure you have the following tools and technologies set up:

• Visual Studio Code (Text Editor)
• Python version 3 ++
• Nodejs
• Windows (OS) using WSL and windows terminal

Table of Content

In this part of the tutorial, we will cover the following steps:

1. Setup Project Workflow
2. Setting up an Authentication System
3. Setting up Google APIs
4. Adding Google Credentials
5. Creating a Custom Google LoginView
6. Testing with Postman 🚀
7. Head to Part 2

1. Setup Project Workflow

Let’s start with creating our django project

# Make a Directory for the Project and navigate into it.
mkdir social-login/backend && cd social-login/backend

# Create and activate a Python Virtual Environment
python3 -m venv venv
source venv/bin/activate

# Install the corheaders plugin
pip install django-cors-headers

# Create a Django Project
django-admin startproject social_login .

# Test Run the server
python manage.py runserver

2. Setting up an Authentication System

In the same social_login directory, let’s create an authentication app to handle the authentication workflow on the system:

python manage.py startapp authentication

Add ‘authentication’ to the INSTALLED_APPS in your settings.py:

DEFAULT_APPS = [
    "corsheaders", #new
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
]

CUSTOM_APPS = [
    "authentication",
]

INSTALLED_APPS =  DEFAULT_APPS + CUSTOM_APPS

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
      ....
]

now let's create a custom user model in our authentication/models.py using the AbstractUser class, as shown below

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


class User(AbstractUser):
    # Add any additional fields you want in your custom user model
    email = models.CharField(max_length=250, unique=True, null=False, blank=False)
    REGISTRATION_CHOICES = [
        ('email', 'Email'),
        ('google', 'Google'),
    ]
    registration_method = models.CharField(
        max_length=10,
        choices=REGISTRATION_CHOICES,
        default='email'
    )

    def __str__(self):
       return self.username

• Importing necessary modules The code begins by importing the required modules: AbstractUser from django.contrib.auth.models and models from django.db.
• Defining the custom user model The User class is defined, which inherits from AbstractUser. This allows the custom user model to have all the fields and functionality provided by the built-in Django User model.
• Adding additional fields In this step, two additional fields are added to the custom user model:
• email: This field is defined as a CharField with a maximum length of 250 characters. It is set to be unique, meaning each user must have a unique email address. It cannot be null (empty) or blank (whitespace-only).
• registration_method: This field is defined as a CharField with a maximum length of 10 characters. It represents the method of user registration and has two choices: 'email' and 'google'. The default value is set to 'email'.

Next, let’s use the makemigrations command to create new database migration files for our authentication app

python manage.py makemigrations

and update the settings.py file to specify the custom user model to be used for authentication in our project.

AUTH_USER_MODEL = 'authentication.User'

3. Setting up Google APIs

To enable Google login functionality in our application, we will need to set up an OAuth application through the Google Developers Console Follow the steps below.

1. Create a New Google APIs project

• Go to the Google Developer APIs Console and access the Dashboard.
• Create a new project by clicking on the “New Project” button.
• Provide a name for your project, preferably using your website or app name. This project name will be visible to users when they are redirected to the Google login page.
• Click on “Create” to proceed.

2. Next Update the OAuth Consent Screen

• After creating the project, register your app by configuring the OAuth consent screen.
• You only need to provide the “App name,” “User support email,” and “Email addresses” under the “Developer contact information” section.
• Click on the “Save and Continue” button.

3. Create New API Credentials

• Go back to the “Dashboard” and select “Credentials” from the left panel.
• Click on the “Create Credentials” button at the top, and choose the “OAuth Client ID” option from the dropdown menu.

Under ‘Authorized JavaScript origins’, add the following URIs:

• http://localhost:3000

Under ‘Authorized redirect URIs’, add the following URIs:

• http://localhost:3000/google

On the same page, you will find your Client ID and Client secret under the “Credentials” section. Follow the steps below to locate and copy these details:

1. Go to the Google Developer APIs Console and access the “Credentials” section from the left-hand side menu.
2. Look for the section that displays your OAuth Client ID and Client secret.
3. Copy the Client ID and Client secret to use them in the next step of your application’s configuration.

These credentials are essential for authenticating our application with Google APIs and enabling the Google login functionality. Make sure to keep them secure and avoid sharing them publicly.

4. Adding Google Credentials

Next let’s add our Google credentials to a .env file on our django project in our social_login directory

export GOOGLE_OAUTH2_CLIENT_ID = YOUR_GOOGLE_CLIENT_ID
export GOOGLE_OAUTH2_CLIENT_SECRET = YOUR_GOOGLE_CLIENT_SECRET

next let’s update and point to it our setting.py file

import os


...
# Google OAuth2 settings
BASE_FRONTEND_URL = os.environ.get('DJANGO_BASE_FRONTEND_URL', default='http://localhost:3000')
GOOGLE_OAUTH2_CLIENT_ID = os.environ.get('GOOGLE_OAUTH2_CLIENT_ID')
GOOGLE_OAUTH2_CLIENT_SECRET = os.environ.get('GOOGLE_OAUTH2_CLIENT_SECRET')

5. Creating a Custom Google LoginView

Create a custom Google login functionality in your authentication app's views.py:

# views.py


from urllib.parse import urlencode
from rest_framework import serializers
from rest_framework.views import APIView
from django.conf import settings
from django.shortcuts import redirect
from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
from rest_framework.response import Response
from .mixins import PublicApiMixin, ApiErrorsMixin
from .services import google_get_access_token, google_get_user_info
from apps.authentication.models import User
from apps.authentication.serializers import UserSerializer


def generate_tokens_for_user(user):
    """
    Generate access and refresh tokens for the given user
    """
    serializer = TokenObtainPairSerializer()
    token_data = serializer.get_token(user)
    access_token = token_data.access_token
    refresh_token = token_data
    return access_token, refresh_token


class GoogleLoginApi(PublicApiMixin, ApiErrorsMixin, APIView):
    class InputSerializer(serializers.Serializer):
        code = serializers.CharField(required=False)
        error = serializers.CharField(required=False)

    def get(self, request, *args, **kwargs):
        input_serializer = self.InputSerializer(data=request.GET)
        input_serializer.is_valid(raise_exception=True)

        validated_data = input_serializer.validated_data

        code = validated_data.get('code')
        error = validated_data.get('error')

        login_url = f'{settings.BASE_FRONTEND_URL}/login'
    
        if error or not code:
            params = urlencode({'error': error})
            return redirect(f'{login_url}?{params}')

        redirect_uri = f'{settings.BASE_FRONTEND_URL}/google/'
        access_token = google_get_access_token(code=code, 
                                               redirect_uri=redirect_uri)

        user_data = google_get_user_info(access_token=access_token)

        try:
            user = User.objects.get(email=user_data['email'])
            access_token, refresh_token = generate_tokens_for_user(user)
            response_data = {
                'user': UserSerializer(user).data,
                'access_token': str(access_token),
                'refresh_token': str(refresh_token)
            }
            return Response(response_data)
        except User.DoesNotExist:
            username = user_data['email'].split('@')[0]
            first_name = user_data.get('given_name', '')
            last_name = user_data.get('family_name', '')

            user = User.objects.create(
                username=username,
                email=user_data['email'],
                first_name=first_name,
                last_name=last_name,
                registration_method='google',
                phone_no=None,
                referral=None
            )
         
            access_token, refresh_token = generate_tokens_for_user(user)
            response_data = {
                'user': UserSerializer(user).data,
                'access_token': str(access_token),
                'refresh_token': str(refresh_token)
            }
            return Response(response_data)

let's also create a serilizers.py file in our authentication app and update it as it is used in our views.py

# serializers.py

from rest_framework import serializers
from .models import User

class UserSerializer(serializers.ModelSerializer):
    
    class Meta:
        model = User
        fields = ['first_name', 'last_name', 'email']

let’s do so also for the mixins.py file and update it as it used in our views.py

# mixins.py

from rest_framework_simplejwt.authentication import JWTAuthentication
from rest_framework.permissions import IsAuthenticated
from rest_framework import exceptions as rest_exceptions

from django.core.exceptions import ValidationError

from .utils import get_error_message
from apps.authentication.models import User


class ApiAuthMixin:
    authentication_classes = (JWTAuthentication, )
    permission_classes = (IsAuthenticated, )


class PublicApiMixin:
    authentication_classes = ()
    permission_classes = ()


class ApiErrorsMixin:
    """
    Mixin that transforms Django and Python exceptions into rest_framework ones.
    Without the mixin, they return 500 status code which is not desired.
    """
    expected_exceptions = {
        ValueError: rest_exceptions.ValidationError,
        ValidationError: rest_exceptions.ValidationError,
        PermissionError: rest_exceptions.PermissionDenied,
        User.DoesNotExist: rest_exceptions.NotAuthenticated
    }

    def handle_exception(self, exc):
        if isinstance(exc, tuple(self.expected_exceptions.keys())):
            drf_exception_class = self.expected_exceptions[exc.__class__]
            drf_exception = drf_exception_class(get_error_message(exc))

            return super().handle_exception(drf_exception)

        return super().handle_exception(exc)

also for the utils.py file and update it as it is used in our views.py

# utils.py


import requests
from typing import Dict, Any
from django.conf import settings
from django.core.exceptions import ValidationError
from rest_framework_simplejwt.serializers import TokenObtainPairSerializer


GOOGLE_ID_TOKEN_INFO_URL = 'https://www.googleapis.com/oauth2/v3/tokeninfo'
GOOGLE_ACCESS_TOKEN_OBTAIN_URL = 'https://oauth2.googleapis.com/token'
GOOGLE_USER_INFO_URL = 'https://www.googleapis.com/oauth2/v3/userinfo'



def generate_tokens_for_user(user):
    """
    Generate access and refresh tokens for the given user
    """
    serializer = TokenObtainPairSerializer()
    token_data = serializer.get_token(user)
    access_token = token_data.access_token
    refresh_token = token_data
    return access_token, refresh_token


def google_get_access_token(*, code: str, redirect_uri: str) -> str:
    data = {
        'code': code,
        'client_id': settings.GOOGLE_OAUTH2_CLIENT_ID,
        'client_secret': settings.GOOGLE_OAUTH2_CLIENT_SECRET,
        'redirect_uri': redirect_uri,
        'grant_type': 'authorization_code'
    }


    response = requests.post(GOOGLE_ACCESS_TOKEN_OBTAIN_URL, data=data)

    if not response.ok:
        raise ValidationError('Failed to obtain access token from Google.')

    access_token = response.json()['access_token']

    return access_token


def google_get_user_info(*, access_token:  str) -> Dict[str, Any]:
    response = requests.get(
        GOOGLE_USER_INFO_URL,
        params={'access_token': access_token}
    )                   

    if not response.ok:
        raise ValidationError('Failed to obtain user info from Google.')

    return response.json()

next, let’s update our urls.py

from django.urls import path
from . import views

urlpatterns = [
      path("auth/login/google/", GoogleLoginApi.as_view(), 
         name="login-with-google"),
]

lastly, let’s update our project urls.py and .env file

# socail_login/urls.py

from django.urls import path, include

urlpatterns = [
   path("admin/", admin.site.urls),
   path("api/", include("authentication.urls")),

]

next our .env file

# socail_login/.env
export GOOGLE_OAUTH2_CLIENT_ID = YOUR_GOOGLE_CLIENT_ID
export GOOGLE_OAUTH2_CLIENT_SECRET = YOUR_GOOGLE_CLIENT_SECRET

export DJANGO_BASE_FRONTEND_URL="http://localhost:3000" #new

and then update settings.py

BASE_FRONTEND_URL = os.environ.get('DJANGO_BASE_FRONTEND_URL') # new

# Google OAuth2 settings
GOOGLE_OAUTH2_CLIENT_ID = os.environ.get('DJANGO_GOOGLE_OAUTH2_CLIENT_ID')
GOOGLE_OAUTH2_CLIENT_SECRET = os.environ.get('DJANGO_GOOGLE_OAUTH2_CLIENT_SECRET')

6. Testing with Postman

Test the Google login view using Postman:

http://127.0.0.1:8000/api/v1/auth/login/google/?
code=4%2F0AZEOvhV5qNkTEnISqWASmWy0O6UaivxTrQvfc6RFUF9Hqxuezmz1EH-umQj0TkeJS_98Xw
&scope=email+profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=none

We see get an error,

[
    "Failed to obtain access token from Google."
]

You might encounter an error indicating that the access token from Google couldn’t be obtained. This is expected due to the expired code in the URL.

In the next section, we’ll cover the front-end implementation using ReactJS.

You can find the code for this blog on GitHub: Link

Thanks for Your Time ♥️

I hope you’ve found this tutorial helpful. If you have any questions or feedback, feel free to reach out. Stay tuned for more tutorials and guides on various development topics!

Where to find Me 👇

Here on Medium ♥️

You can also find me also 👉 Github https://github.com/Onlynfk/
Instagram / LinkedIn

Want to Work with me?

If you’re looking for a skilled developer to collaborate with, you can view my portfolio here. Let’s bring your ideas to life together

Here on Medium ♥️

Building a Custom Google Authentication System with Django Rest Framework and ReactJS I was originally published in CodeX on Medium, where people are continuing the conversation by highlighting and responding to this story.

Promises are an essential feature of JavaScript that help manage asynchronous operations and handle their results. They provide a way to write cleaner and more readable code when dealing with tasks that may take some time to complete, such as making API requests or executing time-consuming operations.

In this blog post, we’ll explore the basics of promises and demonstrate their usage through code examples.

Let’s get started!!! 🚀🚀

Contents

• Creating a Promise
• Resolving a Promise
• Chaining Promises
• Executing Functions on Resolve
• Handling Rejection with Catch
• Chaining Multiple Promises
• Using JSONPlaceholder API for Testing

1. Creating a Promise

const count = false;

let countValue = new Promise(function(resolve, reject) {
    if (count) {
        resolve('There is a count value.');
    } else {
        reject('There is no count value.');
    }
});

In this example, we create a promise countValue that represents an asynchronous operation. If count is true, the promise is resolved with the message "There is a count value." Otherwise, it is rejected with the message "There is no count value." You can console.log(countValue) statement to see the result.

2. Resolving a Promise

let promise = new Promise(function(resolve, reject) {
    setTimeout(() => reject(new Error('Whoops')), 1000);
});

Here, we create a promise promise that resolves after a delay of 5 seconds (5000 milliseconds). Once resolved, it logs the success message "done" to the console.

3. Rejecting a Promise

let promise = new Promise(function(resolve, reject) {
    setTimeout(() => reject(new Error('Whoops')), 1000);
});

In this example, the promise promise is rejected after a delay of 1 second (1000 milliseconds) with an Error object containing the message "Whoops". You can handle the rejection using the catch method, which we'll see in example 5.

3: Chaining Promises

const promise = doSomething();

const promise2 = promise2.then(successCallback, failureCallback);

// simplified
const promise3 = doSomething().then(successCallback, failureCallback);

Promises can be chained together to perform a sequence of asynchronous tasks. In this example, doSomething() represents the first asynchronous task, which returns a promise. Then, we chain the then method to handle the resolved value (successCallback) or the rejected value (failureCallback) of the promise

4: Executing Functions on Resolve

let exampleTask = new Promise(function(resolve, reject) {
    resolve('Promise resolved');
});

exampleTask.then(function successValue1(result){
    console.log(result);
}).then(function successValue2(){
    console.log('You can call multiple functions this way');
});

In this example, the promise exampleTask is resolved successfully, and we use the then method to execute the successValue1 function, which logs the resolved result. We can also chain multiple then methods to call multiple functions sequentially.

5: Handling Rejection with Catch

let exampleTask = new Promise(function(resolve, reject) {
    reject('Promise rejected');
});

exampleTask.then(function successValue1(result){
    console.log(result);
}).catch(function errorValue(result){
    console.log(result);
});

In this example, the promise exampleTask is rejected, and we handle the rejection using the catch method. The errorValue function is executed, logging the rejected result. Using catch allows us to handle errors in a centralized manner.

6: Using Finally

let countValue = new Promise(function(resolve, reject) {
    reject("Promise rejected");
});

countValue.then((success) => {})
    .catch((error) => {
        console.log(error);
    })
    .finally(function greet(){
        console.log("This code is executed.");
    });

The finally method is used to execute a function regardless of whether the promise is resolved or rejected. In this example, the greet function is always executed, regardless of the promise result.

7: Chaining Multiple Promises

examplePromiseTask()
    .then(function (result) {
        return secondTask();
    })
    .then(function (result) {
        return thirdTask(); 
    })
    .catch(function (err) {
        // Handle any errors here
    });

Promises can be chained together to perform multiple asynchronous tasks sequentially. In this example, examplePromiseTask is executed first, followed by secondTask, and then thirdTask. If any promise in the chain is rejected, the catch method is called to handle the error.

Using JSONPlaceholder API for Testing

To demonstrate the usage of promises with a real API, you can integrate the JSONPlaceholder API into your code examples. JSONPlaceholder provides a set of mock endpoints for testing purposes.

For example, you can replace doSomething() in Example 3 with an API call:

function doSomething() {
    return fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => response.json());
}

Similarly, you can modify other examples to include API requests and handle the returned data or errors accordingly.

Conclusion

Promises are a powerful tool in JavaScript for managing asynchronous operations. They simplify the handling of asynchronous code and make it easier to reason about complex flows. By understanding and practicing with promises, you can write more efficient and maintainable code in JavaScript.

Happy coding!💻

Also if you need more help check this video on Learn JavaScript Promises in 19 minutes (For Beginners) from Sonny Sanga on Youtube

Thanks for your time ♥

Where to find Me 👇

Here on Medium ♥️

You can also find me also 👉 Github https://github.com/Onlynfk/
Instagram / LinkedIn

Django is a powerful web framework that empowers developers to build robust and scalable web applications efficiently. Whether you’re a beginner or an experienced developer, mastering Django is a valuable skill that opens up a world of possibilities. In this comprehensive guide, we will dive into 10 essential topics that every Django developer should focus on to become proficient in Django web development. Let’s explore these topics in detail:

Let’s begin!!! 🚀🚀

1. Django Framework

• Understand Django’s architecture, which follows the Model-View-Controller (MVC) pattern.
• Learn how to create Django projects using the django-admin command-line tool and set up the project structure.
• Familiarize yourself with Django applications, which are modular components within a Django project.
• Explore Django’s URL routing system to map URLs to views.
• Understand how to define models using Django’s Object-Relational Mapping (ORM) and perform database operations.
• Create views to handle user requests and generate responses.
• Utilize Django’s template system to render dynamic HTML pages.
• Learn about Django’s built-in middleware and how to handle HTTP requests and responses.

2. Django ORM (Object-Relational Mapping):

• Understand Django’s ORM and its advantages, which abstracts the database layer.
• Define models using Python classes and Django’s field types.
• Learn about model relationships such as one-to-one, one-to-many, and many-to-many.
• Perform CRUD (Create, Read, Update, Delete) operations on database records using the ORM.
• Utilize QuerySets to filter, order, and aggregate data.
• Optimize database performance by understanding database indexing and query optimization techniques.
• Handle transactions and concurrency in Django.

3. Django Admin:

• Explore Django’s built-in admin site and learn how to register models.
• Customize the admin site by overriding templates and defining custom admin classes.
• Create custom admin views to extend the functionality of the admin site.
• Define permissions and restrict access to specific admin sections.
• Understand how to integrate third-party libraries and plugins with the Django admin.

4. Authentication and Authorization:

• Implement user authentication using Django’s built-in authentication system.
• Create user registration and login views.
• Handle user sessions, including login/logout functionality.
• Utilize decorators and mixins to handle user permissions and roles.
• Implement additional authentication methods, such as social login (OAuth).

5. Django Forms:

• Learn how to create forms using Django’s form classes.
• Customize form fields and widgets to suit your application’s requirements.
• Handle form validation and display validation errors to the user.
• Utilize form handling techniques, including form rendering, submission, and processing.

6. Django Templates:

• Understand Django’s template language and its syntax.
• Learn about template inheritance and create reusable templates.
• Utilize template tags and filters to perform logic and manipulate data.
• Pass data to templates using context variables.
• Handle template rendering and display dynamic content.

7. Django REST Framework:

• Learn how to build RESTful APIs using Django REST Framework (DRF).
• Define API endpoints using DRF’s class-based views.
• Implement serialization and deserialization of data using serializers.
• Handle requests and responses, including authentication and authorization.
• Implement pagination, filtering, and sorting in API views.
• Version your APIs to ensure backward compatibility.
• Utilize third-party libraries for API documentation (e.g., Swagger).

8. Testing in Django:

• Understand the importance of testing in Django development.
• Learn about Django’s testing framework and write unit tests for models, views, and forms.
• Implement functional tests to verify the behavior of your application as a whole.
• Use test fixtures to set up test data and simulate different scenarios.
• Explore testing techniques, such as mocking external dependencies and testing edge cases.

9. Django Deployment:

• Learn how to deploy Django applications to production environments.
• Set up and configure web servers like Apache or Nginx o serve Django applications.
• Understand server setup and configuration, including security considerations.
• Optimize Django application performance for production environments.
• Explore deployment options, such as deploying to platforms like Heroku, AWS, or Docker containers.
• Set up continuous integration and deployment (CI/CD) pipelines for automated deployments.
• Implement monitoring and logging for your deployed Django application.
• Understand server setup and configuration, including security considerations.
• Optimize Django application performance for production environments.
• Explore deployment options, such as deploying to platforms like Heroku, AWS, or Docker containers.
• Set up continuous integration and deployment (CI/CD) pipelines for automated deployments.
• Implement monitoring and logging for your deployed Django application.

10. Django Best Practices:

• Stay updated with Django's best practices and coding conventions.
• Follow the Django project’s official documentation and community recommendations.
• Organize your code using Django’s recommended project structure.
• Implement modular design and adhere to the Don’t Repeat Yourself (DRY) principle.
• Implement security measures, such as protecting against cross-site scripting (XSS) and cross-site request forgery (CSRF) attacks.
• Optimize your Django application’s performance, including database query optimization and caching.
• Practice efficient debugging techniques using Django’s logging and debugging tools.
• Implement version control using Git and follow best practices for collaboration and code review.
• Stay updated with the latest Django releases and new features.
• Engage with the Django community through forums, mailing lists, and conferences to learn from others and share knowledge.|

Mastering Django development requires dedication, practice, and continuous learning. By focusing on these 10 essential topics, you’ll build a strong foundation in Django and gain the skills necessary to develop complex web applications. Remember, the Django ecosystem is vast, and there’s always more to explore beyond these core topics. Engage with the Django community, work on real-world projects, and keep up with the latest advancements to enhance your Django expertise.

Also, here are a few other articles related to mastering Django below, do check them out 👇

1. Building a Blog with Django 3 and Deploying to Heroku
2. How to Build a Chatbot with Django and Chatfuel
3. How to Build a Django API in 2021: A Simple Guide
4. Building a RESTful API with Django Rest Framework
5. Django Channels Tutorial: Websockets Made Easy
6. Building a Real-Time Chat Application with Django and Pusher
7. How to Add Two-Factor Authentication to Django
8. Building a Search Engine with Django and Elasticsearch
9. How to Build a URL Shortener with Django
10. Django and React Tutorial: Building a Social Network

Happy coding! 💻

Where to find Me 👇

Here on Medium ♥️

You can also find me also 👉 Github / Instagram / LinkedIn

Thanks for your time ♥

Mastering Django Development: A Comprehensive Guide. was originally published in CodeX on Medium, where people are continuing the conversation by highlighting and responding to this story.

Let’s dive in!!! 🚀🚀

1. React

React is one of the most popular JavaScript libraries used for building user interfaces. It is maintained by Facebook and used by companies such as Netflix, Airbnb, and Instagram. React provides a simple programming model and is very efficient in rendering dynamic web applications. According to statistics from npm trends, React has over 1.5 million weekly downloads, making it the most popular JavaScript library.

2. Angular

Angular is a popular JavaScript framework for building web applications. It is maintained by Google and used by companies such as Microsoft, IBM, and Apple. Angular provides a comprehensive set of features and tools for building complex and scalable web applications. According to statistics from npm trends, Angular has over 800,000 weekly downloads.

3. Vue.js

Vue.js is a lightweight JavaScript framework for building web applications. It is maintained by Evan You and used by companies such as Xiaomi, Alibaba, and GitLab. Vue.js provides a simple and easy-to-learn programming model, making it an excellent choice for beginners. According to statistics from npm trends, Vue.js has over 600,000 weekly downloads.

4. Svelte

Svelte is a new JavaScript framework that has gained popularity in recent years. It provides a unique approach to building web applications by compiling the code at build time. This approach results in faster loading times and better performance. According to statistics from npm trends, Svelte has over 100,000 weekly downloads.

5. Ember.js

Ember.js is a JavaScript framework for building complex web applications. It is maintained by the Ember.js core team and used by companies like LinkedIn, Netflix, and Yahoo. Ember.js provides a set of conventions and best practices for building scalable and maintainable web applications. According to statistics from npm trends, Ember.js has over 40,000 weekly downloads.

Comparison and Statistics

Here is a comparison based on their weekly downloads according to npm trends.

Library/Framework - Weekly Downloads

React - 1.5 million

Angular - 800,000

Vue.js - 600,000

Svelte -100,000

Ember.js - 40,000

There are so many other frameworks apart from these, but picking should depend on the project you are working on. Consider the project requirements, scalability, performance, and ease of use before selecting a library or framework.

Keep coding 💻

Where to find Me 👇

Here on Medium ♥️

You can also find me also 👉 Github / Instagram / LinkedIn

Thanks for your time ♥

Top 5 JavaScript Libraries and Frameworks for 2023 was originally published in CodeX on Medium, where people are continuing the conversation by highlighting and responding to this story.

Let’s dive in!!! 🚀🚀

1. Variables and Data Types:

Variables and data types are fundamental concepts in Python. Understanding how to declare variables and work with different data types such as numbers, strings, and booleans is crucial for any programming endeavor.

2. Control Flow and Loops:

Learn about conditional statements like if-else and loops such as for and while loops. Mastering control flow will enable you to execute code selectively and repeatedly based on certain conditions.

3. Functions and Modules:

Functions allow you to break down your code into reusable blocks, while modules provide a way to organize and reuse related functions. Discover the power of functions and how to import and use modules in your projects.

4. File Handling:

Explore how to read from and write to files using Python. Learn essential file-handling operations such as opening, closing, reading, and writing data to files.

5. Exception Handling:

Discover how to handle errors and exceptions in your code gracefully. Gain insights into try-except blocks, raise statements, and handling specific exceptions.

6. Object-Oriented Programming (OOP):

Dive into the world of OOP and learn about classes, objects, inheritance, and polymorphism. OOP allows you to create more organized and scalable code.

7. Data Structures:

Explore essential data structures like arrays, lists, stacks, queues, and linked lists. Understand their properties, use cases, and how to implement them in Python.

8. Regular Expressions:

Master the art of pattern matching and text manipulation using regular expressions. Learn how to search, match, and substitute patterns within strings effectively.

9. Database Connectivity:

Discover how to connect Python with databases, such as SQLite and MySQL. Learn the basics of executing queries, fetching data, and performing CRUD operations.

10. Introduction to Web Development:

Get a glimpse into web development with Python. Learn about frameworks like Flask and Django, and understand how to build simple web applications.

That’s it you can check other topics here

1. "Python for Beginners" by Real Python
2. "Python Basics" by Python.org
3. "Python Tutorial" by W3Schools
4. "Python Data Types" by Programiz
5. "Control Flow in Python" by DataCamp
6. "Python Functions" by Codecademy
7. "Object-Oriented Programming in Python" by Real Python
8. "Python Exceptions" by PythonForBeginners
9. "Python Libraries" by PythonForDataScience
10. "Python Projects for Beginners" by DataFlair

Happy coding! 💻

Where to find Me 👇

Here on Medium ♥️

You can also find me also 👉 Github / Instagram / LinkedIn

Thanks for your time ♥