DEV Community: Rodrigo Lazo

How to create a TV Show React App - tvmaze

Rodrigo Lazo — Tue, 11 Jan 2022 23:51:37 +0000

Today, We are going to create an application that shows the information of TV Show, using a search bar.

This project uses

react-scripts (Styles)
react-spinners (Loader)
axios (request Http)
react-icons (Icons)
framer-motion (Animations)

Api: https://www.tvmaze.com/api

Code From Github: https://github.com/rodrigolazo/react-tvmaze

project structure

Code:
App.js

import styled from "styled-components";
import "./App.css";
import Header from "./components/header";
import { SearchBar } from "./components/searchBar";

const AppContainer = styled.div`
  margin: auto;
  padding: 0 530px;
`;

function App() {
  return (
    <>
      <AppContainer>
        <Header />
        <SearchBar />
      </AppContainer>
    </>
  );
}

export default App;

Header/index.jsx

import React from 'react'
import logo from '../../img/logo.png'

const Header = () => {
  return (
    <header className='center'>
      <img src={logo} alt='' />
    </header>
  )
}

export default Header

searchBar/index.jsx

import React from "react";
import styled from "styled-components";
import { IoClose, IoSearch } from "react-icons/io5";
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { useClickOutside } from "react-click-outside-hook";
import { useEffect } from "react";
import { useRef } from "react";
import BeatLoader from "react-spinners/BeatLoader";
import { useDebounce } from "../../hooks/debounceHook";
import axios from "axios";
import { TvShow } from "../tvShow";

const SearchBarContainer = styled(motion.div)`
  display: flex;
  flex-direction: column;
  width: 34em;
  height: 3.8em;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0px 2px 12px 3px rgba(0, 0, 0, 0.14);
`;

const SearchInputContainer = styled.div`
  width: 100%;
  min-height: 4em;
  display: flex;
  align-items: center;
  position: relative;
  padding: 2px 15px;
`;

const SearchInput = styled.input`
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  font-size: 21px;
  color: #12112e;
  font-weight: 500;
  border-radius: 6px;
  background-color: transparent;

  &:focus {
    outline: none;
    &::placeholder {
      opacity: 0;
    }
  }

  &::placeholder {
    color: #bebebe;
    transition: all 250ms ease-in-out;
  }
`;

const SearchIcon = styled.span`
  color: #bebebe;
  font-size: 27px;
  margin-right: 10px;
  margin-top: 6px;
  vertical-align: middle;
`;

const CloseIcon = styled(motion.span)`
  color: #bebebe;
  font-size: 23px;
  vertical-align: middle;
  transition: all 200ms ease-in-out;
  cursor: pointer;

  &:hover {
    color: #dfdfdf;
  }
`;

const LineSeperator = styled.span`
  display: flex;
  min-width: 100%;
  min-height: 2px;
  background-color: #d8d8d878;
`;

const SearchContent = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1em;
  overflow-y: auto;
`;

const LoadingWrapper = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const WarningMessage = styled.span`
  color: #a1a1a1;
  font-size: 14px;
  display: flex;
  align-self: center;
  justify-self: center;
`;

const containerVariants = {
  expanded: {
    height: "30em",
  },
  collapsed: {
    height: "3.8em",
  },
};

const containerTransition = { type: "spring", damping: 22, stiffness: 150 };

export function SearchBar(props) {
  const [isExpanded, setExpanded] = useState(false);
  const [parentRef, isClickedOutside] = useClickOutside();
  const inputRef = useRef();
  const [searchQuery, setSearchQuery] = useState("");
  const [isLoading, setLoading] = useState(false);
  const [tvShows, setTvShows] = useState([]);
  const [noTvShows, setNoTvShows] = useState(false);

  const isEmpty = !tvShows || tvShows.length === 0;

  const changeHandler = (e) => {
    e.preventDefault();
    if (e.target.value.trim() === "") setNoTvShows(false);

    setSearchQuery(e.target.value);
  };

  const expandContainer = () => {
    setExpanded(true);
  };

  const collapseContainer = () => {
    setExpanded(false);
    setSearchQuery("");
    setLoading(false);
    setNoTvShows(false);
    setTvShows([]);
    if (inputRef.current) inputRef.current.value = "";
  };

  useEffect(() => {
    if (isClickedOutside) collapseContainer();
  }, [isClickedOutside]);

  const prepareSearchQuery = (query) => {
    const url = `http://api.tvmaze.com/search/shows?q=${query}`;

    return encodeURI(url);
  };

  const searchTvShow = async () => {
    if (!searchQuery || searchQuery.trim() === "") return;

    setLoading(true);
    setNoTvShows(false);

    const URL = prepareSearchQuery(searchQuery);

    const response = await axios.get(URL).catch((err) => {
      console.log("Error: ", err);
    });

    if (response) {
      console.log("Response: ", response.data);
      if (response.data && response.data.length === 0) setNoTvShows(true);

      setTvShows(response.data);
    }

    setLoading(false);
  };

  useDebounce(searchQuery, 500, searchTvShow);

  return (
    <SearchBarContainer
      animate={isExpanded ? "expanded" : "collapsed"}
      variants={containerVariants}
      transition={containerTransition}
      ref={parentRef}
    >
      <SearchInputContainer>
        <SearchIcon>
          <IoSearch />
        </SearchIcon>
        <SearchInput
          placeholder="Search for series and TvShow"
          onFocus={expandContainer}
          ref={inputRef}
          value={searchQuery}
          onChange={changeHandler}
        />
        <AnimatePresence>
          {isExpanded && (
            <CloseIcon
              key="close-icon"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={collapseContainer}
              transition={{ duration: 0.2 }}
            >
              <IoClose />
            </CloseIcon>
          )}
        </AnimatePresence>
      </SearchInputContainer>
      {isExpanded && <LineSeperator />}
      {isExpanded && (
        <SearchContent>
          {isLoading && (
            <LoadingWrapper>
              <BeatLoader loading color="#3C948B" size={10} />
            </LoadingWrapper>
          )}
          {!isLoading && isEmpty && !noTvShows && (
            <LoadingWrapper>
              <WarningMessage>Start typing to Search</WarningMessage>
            </LoadingWrapper>
          )}
          {!isLoading && noTvShows && (
            <LoadingWrapper>
              <WarningMessage>No series or Tv Shows  found!</WarningMessage>
            </LoadingWrapper>
          )}
          {!isLoading && !isEmpty && (
            <>
              {tvShows.map(({ show }) => (
                <TvShow
                  key={show.id}
                  thumbanilSrc={show.image && show.image.medium}
                  name={show.name}
                  rating={show.rating && show.rating.average}
                  url={show.url}
                />
              ))}
            </>
          )}
        </SearchContent>
      )}
    </SearchBarContainer>
  );
}

tvShow/index.jsx

import React from "react";
import styled from "styled-components";

const TvShowContainer = styled.div`
  width: 100%;
  min-height: 6em;
  display: flex;
  border-bottom: 2px solid #d8d8d852;
  padding: 6px 8px;
  align-items: center;

  &:hover {
    background-color: #dadada;
    transition: all 0.3s ease;
    border-radius: 3px;
  }
`;

const Thumbnail = styled.div`
  width: auto;
  height: 100%;
  display: flex;
  flex: 0.4;

  img {
    width: auto;
    height: 100%;
  }
`;

const Name = styled.h3`
  font-size: 15px;
  color: #000;
  margin-left: 10px;
  flex: 2;
  display: flex;
`;

const Rating = styled.span`
  color: #a1a1a1;
  font-size: 16px;
  display: flex;
  flex: 0.2;
`;

export function TvShow(props) {
  const { thumbanilSrc, name, rating, url } = props;

  return (
    <TvShowContainer>
      <Thumbnail>
        <img src={thumbanilSrc} />
      </Thumbnail>

      <Name>
        <a href={url} target="_blank">
          {name}
        </a>
      </Name>
      <Rating>{rating || "N/A"}</Rating>
    </TvShowContainer>
  );
}

hooks/debounceHook.jsx

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

export function useDebounce(value, timeout, callback) {
  const [timer, setTimer] = useState(null);

  const clearTimer = () => {
    if (timer) clearTimeout(timer);
  };

  useEffect(() => {
    clearTimer();

    if (value && callback) {
      const newTimer = setTimeout(callback, timeout);
      setTimer(newTimer);
    }
  }, [value]);
}

Style
App.css

body {
  background: #000 url('img/bg.jpg') no-repeat center center/cover;
  font-family: Arial, Helvetica, sans-serif;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


header {
  height: 200px;
}

header img {
  width: 300px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  color: #474747;
  text-decoration: none;
}

Results

Download the project to test the applied styles, I hope it helps you

Github: https://github.com/rodrigolazo/react-tvmaze

references:
https://www.youtube.com/watch?v=x7niho285qs
https://www.youtube.com/watch?v=IlnmWntmUns&t=2974s

How to create a React JS application with the Pokémon API

Rodrigo Lazo — Thu, 23 Dec 2021 22:36:02 +0000

We are going to create an application that shows the information of the pokemos, consumed from an API.

Api: https://pokeapi.co/
Github: https://github.com/rodrigolazo/apiPokemon

Code:
App.js

import React, { useEffect } from 'react';
import './App.css';

import CharacterGrid from './components/characters/CharacterGrid'
import Header from './components/ui/Header'

function App() {
  const [result, setResult] = React.useState([]);
  const [poke, setPoke] = React.useState([]);
  const [load, setLoad] = React.useState('true');
  const arr = [];

  useEffect(() => {
    fetch('https://pokeapi.co/api/v2/pokemon/?limit=400')
      .then((response) => response.json())
      .then((data) => setResult(
        data.results.map((item) => {
          fetch(item.url)
            .then((response) => response.json())
            .then((allpokemon) => arr.push(allpokemon));
          setPoke(arr);
        }),
      ));
  }, []);
  setTimeout(() => {
    setLoad(false);
  }, 1000);
  return (
    <div className='container'>
      <Header />

      <CharacterGrid poke={poke} />
    </div>
  );
}
export default App;

Header.js

import React from 'react'
import logo from '../../img/logo.png'

const Header = () => {
  return (
    <header className='center'>
      <img src={logo} alt='' />
    </header>
  )
}

export default Header

CharacterGrid.js

import React from 'react'
import CharacterItem from './CharacterItem'
import Spinner from '../ui/Spinner'

const CharacterGrid = ({ poke, isLoading }) => {
  return isLoading ? (
    <Spinner />
  ) : (
    <section className='cards'>
      {poke.map((item) => (
        <CharacterItem key={item.id} item={item}></CharacterItem>
      ))}
    </section>
  )
}

export default CharacterGrid

CharacterItem.js

import React from 'react'

const CharacterItem = ({ item }) => {
  return (
    <div className='card'>
      <div className='card-inner'>
        <div className='card-front'>
          <img src={item.sprites.other.dream_world.front_default} alt='' />
        </div>
        <div className='card-back'>
          <h1>{item.name}</h1>
          <ul>
            <li>
              <strong>Hp:</strong> {item.stats[0].base_stat}
            </li>
            <li>
              <strong>Experience:</strong> {item.base_experience}
            </li>
            <li>
              <strong>attack:</strong> {item.stats[1].base_stat}
            </li>
            <li>
              <strong>Special:</strong> {item.stats[2].base_stat}
            </li>
            <li>
              <strong>Defence:</strong> {item.stats[3].base_stat}
            </li>
          </ul>
        </div>

      </div>
    </div>
  )
}

export default CharacterItem

Results

Download the project to test the applied styles, I hope it helps you

Restringir o bloquear elementos en django, hacer que se logueen para mostrarlo.

Rodrigo Lazo — Wed, 22 Dec 2021 20:33:03 +0000

Hola, ¿cómo están?, en esta ocasión les estaré mostrado como restringir o bloquear elementos en django, solo los usuarios que iniciaron sesión podrán ver los elementos bloqueados.

Si deseamos exigir que el usuario este iniciado sesión para mostrar una acción o funcionalidad debemos realizar los siguientes pasos:

En views.py importamos una librería
from django.contrib.auth.decorators import login_required
y insertamos el siguiente código encima o al inicio de la función que se requiera exigir inicio de sesión @login_required(login_url='Direcion ala cual queremos direccionar')

*Ejemplo: *

from django.contrib.auth.decorators import login_required

@login_required(login_url='insertUrl')
def editPost(request, pk):
    post =  Post.objects.get(id=pk)
    form = PostForm(instance=post)
    if request.method == 'POST':
        form = PostForm(request.POST, request.FILES, instance=post)
        if form.is_valid():
            form.save()
        return redirect ('/')    
    context = {'form':form}
    return render (request, 'index.html',context)

y de esa manera es como bloquemos o restringimos el acceso a cualquier usuario que no este logeado...

Ahora bien si deseamos no mostrar algún elemento en concreto como un botón, imagen o cualquier otro elemento en un documento .html se puede realizar utilizando el siguiente código:
{% if request.user.is_authenticated %} {% endif %}

Ejemplo:

{% if request.user.is_authenticated %}
<a class="btn btn-sm btn-primary" href="{% url 'editUrl' post.id %}">Edit</a>
{% endif %}

Demostración:

En esta imagen no se muestra el botón Edit.

Pero si no registramos nos mostraba esa opción
Acceder a http://localhost:8000/admin para iniciar sesion

Regresamos ala página y nos mostrará la opción

Como crear un blog en django 4 - 2022

Rodrigo Lazo — Tue, 21 Dec 2021 16:34:41 +0000

Hola, ¿qué tal,
en esta ocasión les mostraré como realizar un pequeño blog en django 4 con Ckeditor.
Pueden encontrar el código en el siguiente enlace
https://github.com/rodrigolazo/blog

Comandos de ayuda

pip install virtualenv

virtualenv env
.\env\Scripts\activate 

django-admin startproject myblog
py manage.py startapp  blog

python manage.py makemigrations
python manage.py migrate

python manage.py runserver
py manage.py collectstatic

pip install -r requirements.txt

Crud En Django con Slug, 2022

Rodrigo Lazo — Mon, 20 Dec 2021 19:13:55 +0000

Hoy vamos a crear un crud(Create, Read, Update, Delete) básico en el framework Django

Requisito
Tener Python instalado, en caso de no tenerlo descargue e instale desde su página: https://www.python.org/

Instalación
Comenzamos instalando el entorno virtual, para ello abrimos cmd(símbolo del sistema) e ingresamos el siguiente comando pip install virtualenv, una vez instalada de manera global comenzamos con los siguientes paso

Creamos una carpeta la cual contendrá el proyecto, en mi caso se llamara django-crud
Abrimos cmd y nos ubicamos en la carpeta creada

Creamos el entorno virtual con el comando virtualenv env, esto nos sirve para la instalación de dependencias que requiere este crud.

Activamos el entorno virtual con el comando .\env\Scripts\activate

Instalamos Djando con el siguiente comando pip install Django==4.0
Creamos el proyecto con el siguiente comando django-admin startproject NombreProyecto, en mi caso se llamará mycrud

Accedemos ala carpeta del proyecto _cd mycrud
Creamos una aplicación con el comando py manage.py startapp crud
Levantamos el proyecto con el comando py manage.py runserver, accedemos ala web http://localhost:8000/

Configuración settings.py
Abrimos nuestro proyecto en nuestro editor de texto Favorito, en mi caso estaré usando Visual Studio Code y abrimos el archivo _settings.py _ para configurar algunas opciones

Definimos nuestra aplicación en INSTALLED_APPS agregando el nombre 'crud.apps.CrudConfig',

models.py
Abrimos el archivo models.py y creamos nuestro modelo de la siguiente manera

from django.db import models
from django.utils.text import slugify

class Developer(models.Model):
    name = models.CharField(max_length=50,null=True)
    age = models.IntegerField(null=True,blank=True)
    skill = models.CharField(max_length=50,null=True)
    slug = models.SlugField(null=True, blank=True)

    class Meta:
        verbose_name = 'Developer'
        verbose_name_plural = 'Developers'

    def __str__(self):
        return self.name

    def save(self, *args, **kwargs):
        if self.slug == None:
            slug = slugify(self.name)

            has_slug = Developer.objects.filter(slug=slug).exists()
            count = 1
            while has_slug:
                count += 1
                slug = slugify(self.name) + '-' + str(count) 
                has_slug = Developer.objects.filter(slug=slug).exists()

            self.slug = slug
        super().save(*args, **kwargs)

En este modelo se puede observar sus 4 variables de registro como name, age, skill, slug, este último slug es la variable que generara nombres únicos para cada registro el cual podrá remplazar al id

Creamos la migración del modelo con el comando python manage.py makemigrations

Y Migramos con el comando python manage.py migrate

CRUD Ingresar views.py
Para hacer el ingresar en Django nos situamos en archivo views.py y ingresamos el siguiente código

from django.shortcuts import render, redirect
from .models import *
from django.contrib import messages

# CRUD DEVELOPERS

#------ Create ------

def createDev(request):
    name = request.POST['nameInput']
    age = request.POST['ageInput']
    skill = request.POST['skillInput']

    developer = Developer.objects.create(
        name=name, age=age, skill=skill)
    messages.success(request, 'User: ' + name +' ¡Save Success !')
    return redirect('/')

En este código se importan algunos elementos propios de Djando que facilitaran la creación del crud, además de mensajes tipo request para su interacción.

urls.py
Para direccionar las funciones de nuestra vista creamos un archivo con el nombre urls.py bajo la carpeta crud y ingresamos el siguiente código

from django.urls import path
from . import views

urlpatterns = [

    # Urls Developers
    path('register/', views.createDev),

]

y en nuestra urls.py principal que esta baja la carpeta de mycrud se tiene el código de la siguiente manera, misma que indica referencia ala dirección urls de la aplicación crud

Platilla
una platilla es la base en la cual se trabajará el proyecto; Bajo la carpeta crud creamos una carpeta llamada templates en cuál contendrá todos nuestros documentos html y creamos el archivo base.html
con la siguiente estructura

<!DOCTYPE html>
<html lang="en">

<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} {% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-dark">
        <a class="navbar-brand" href="#" style="color: white">Developers</a>

    </nav>
    <div class="container py-4">
        {% block body %}

        {% endblock %}
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
    </script>
    <script src="{% static 'js/bntButton.js' %}"></script>
</body>

</html>

para los archivos css y javascript, bajo el archivo *crud * se crea una carpeta de nombre static y se tiene los siguientes archivos:

con la siguiente información de cada archivo

style.css

th,
td {
  text-align: center;
  vertical-align: middle;
}

bntButton.js

(function () {

    const btnDelete = document.querySelectorAll(".btnDelete");

    btnDelete.forEach(btn => {
        btn.addEventListener('click', (e) => {
            const confirmacion = confirm('¿Confirm to delete?');
            if (!confirmacion) {
                e.preventDefault();
            }
        });
    });

})();

Formulario
Nuestro formulario será la vista en la cual se podrá realizar el registro, para este ejemplar se ingresara desarrolladores o programadores con nombre, edad y habilidad o lenguaje de programación que maneja.
Para ello creamos un documento html en la carpeta templates en este caso se llamará index.html con la siguiente información

{% extends "./base.html" %}

{% block title %} Form {% endblock %}

{% block body %}
<div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-4">
        {% if messages %}
        {% for message in messages %}
        <div class="alert alert-dismissible alert-success">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong class="text-dark">{{ message }}</strong>
        </div>
        {% endfor %}
        {% endif %}
        <h2>Form</h2>
        <div class="card">
            <div class="card-body">
                <form action="/register/" method="POST">{% csrf_token %}
                    <div class="form-group">
                        <input type="text" id="nameInput" name="nameInput" class="form-control" placeholder="Name"
                            required>
                    </div>
                    <div class="form-group">
                        <input type="number" id="ageInput" name="ageInput" class="form-control" placeholder="Age"
                            maxlength="50" required>
                    </div>
                    <div class="form-group">
                        <input type="text" id="skillInput" name="skillInput" class="form-control" min="1" max="9"
                        placeholder="Skill" required>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-info btn-block text-white">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
{% endblock %}

Levantamos el servicio en cmd python manage.py runserver
y tenemos el siguiente resultado

Realizamos un registro

Resultado

Ahora bien nos toca mostrar, editar y eliminar para ello realizamos los siguientes cambios en cada uno de los archivos que les menciona.
views.py

from django.shortcuts import render, redirect
from .models import *
from django.contrib import messages


# CRUD DEVELOPERS

#------ Create ------

def createDev(request):
    name = request.POST['nameInput']
    age = request.POST['ageInput']
    skill = request.POST['skillInput']

    developer = Developer.objects.create(
        name=name, age=age, skill=skill)
    messages.success(request, 'User: ' + name +' ¡Save Success !')
    return redirect('/')


#------ List ------
def listDev(request):
    developers = Developer.objects.all()
    return render(request, "index.html", {"developers": developers})


#------ Edit ------
def editDev(request, slug):
    developer = Developer.objects.get(slug=slug)

    name = request.POST.get('nameInput')
    age = request.POST.get('ageInput')
    skill = request.POST.get('skillInput')
    if request.method == 'POST':

        developer.name = name
        developer.age = age
        developer.skill = skill
        developer.save()
        messages.success(request, 'User: ' + name +' ¡Edit Success!')
        return redirect('/')

    return render (request, "edit.html", {"developer": developer})

#------ Delete ------
def deleteDev(request, slug):
    developer = Developer.objects.get(slug=slug)

    developer.delete()
    messages.success(request, '¡Developer Deleted!')
    return redirect('/')

urls.py
El que esta bajo la carpeta crud

from django.urls import path
from . import views

urlpatterns = [

    # Urls Developers
    path('', views.listDev),
    path('register/', views.createDev),
    path('edit/<slug:slug>', views.editDev, name='editUrl'),
    path('delete/<slug:slug>', views.deleteDev, name='deleteUrl'),

]

index.html

{% extends "./base.html" %}

{% block title %} Form {% endblock %}

{% block body %}
<div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-4">
        {% if messages %}
        {% for message in messages %}
        <div class="alert alert-dismissible alert-success">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong class="text-dark">{{ message }}</strong>
        </div>
        {% endfor %}
        {% endif %}
        <h2>Form</h2>
        <div class="card">
            <div class="card-body">
                <form action="/register/" method="POST">{% csrf_token %}
                    <div class="form-group">
                        <input type="text" id="nameInput" name="nameInput" class="form-control" placeholder="Name"
                            required>
                    </div>
                    <div class="form-group">
                        <input type="number" id="ageInput" name="ageInput" class="form-control" placeholder="Age"
                            maxlength="50" required>
                    </div>
                    <div class="form-group">
                        <input type="text" id="skillInput" name="skillInput" class="form-control" min="1" max="9"
                        placeholder="Skill" required>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-info btn-block text-white">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-8 col-xl-8">
        <h1>Developer List</h1>
        <div class="table-responsive py-2">
            <table class="table table-striped table-hover">
                <thead class="bg-info">
                    <tr class="text-light">
                        <th>#</th>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Skills</th>
                        <th colspan="2"> options</th>
                    </tr>
                </thead>
                <tbody>
                    {% for dev in developers %}
                    <tr>
                        <td>{{forloop.counter}}</td>
                        <td>{{dev.name}}</td>
                        <td>{{dev.age}}</td>
                        <td>{{dev.skill}}</td>
                        <td><a href="{%  url 'editUrl' dev.slug %}" class="btn btn-info">Edit</a></td>
                        <td><a href="{%  url 'deleteUrl' dev.slug %}" class="btn btn-danger btnDelete">Delete</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

Para el editar creamos otro documento html con el nombre de edit.html, esta bajo la carpeta templates y ingresamos el siguintes codigo

{% extends "./base.html" %}

{% block title %} Edit {% endblock %}

{% block body %}
<div class="row">
    <div class="col-md-4 offset-md-4">
        <h2>Edit</h2>
        <div class="card">
            <div class="card-body">
                <form action="{% url 'editUrl' developer.slug %}"  method="POST">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" id="nameInput" name="nameInput" value="{{developer.name}}" class="form-control" placeholder="Name"
                            required>
                    </div>
                    <div class="form-group">
                        <input type="number" id="ageInput" name="ageInput" value="{{developer.age}}" class="form-control" placeholder="Age"
                            maxlength="50" required>
                    </div>
                    <div class="form-group">
                        <input type="text" id="skillInput" name="skillInput" value="{{developer.skill}}" class="form-control"
                        placeholder="Skill"required>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success btn-block text-white">Edit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

Con esos cambios ya se tiene el CRUD completo, a continuacion les muestro como queda.

Creamos uno

Editamos uno

Slug
se puede ver lo que hace el slug que remplaza nuestro id por una valor unico en este caso el nombre, esto ayuda mucho para temas de seguridad ya que con esto se oculta el id ala que pertencese el registro

Eliminamos uno

Espero que les ayude...
Fuetes:
https://docs.djangoproject.com/en/4.0/
https://www.youtube.com/watch?v=iQcJPeCcjNo&t=1585s
https://www.youtube.com/watch?v=uSbDMs7Y9yI&t=189s