https://github.com/kenkyoo/django-anime

Una aplicación web simple construida con Django que consume la API de Jikan (MyAnimeList) para mostrar los animes más populares con un diseño moderno usando Bulma CSS.
https://github.com/kenkyoo/django-anime

anime anime-api bulma-css bulma-css-framework django django-application django-project django-rest-framework python python3 render render-deployment shell

Last synced: about 22 hours ago
JSON representation

Una aplicación web simple construida con Django que consume la API de Jikan (MyAnimeList) para mostrar los animes más populares con un diseño moderno usando Bulma CSS.

Host: GitHub
URL: https://github.com/kenkyoo/django-anime
Owner: Kenkyoo
Created: 2026-06-28T21:17:01.000Z (26 days ago)
Default Branch: main
Last Pushed: 2026-06-29T00:00:07.000Z (25 days ago)
Last Synced: 2026-06-29T00:12:56.796Z (25 days ago)
Topics: anime, anime-api, bulma-css, bulma-css-framework, django, django-application, django-project, django-rest-framework, python, python3, render, render-deployment, shell
Language: JavaScript
Homepage: https://django-anime.onrender.com
Size: 395 KB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

          # 🎬 Anime Explorer

![Django](https://img.shields.io/badge/Django-4.2-green?style=for-the-badge&logo=django)

![Python](https://img.shields.io/badge/Python-3.8+-blue?style=for-the-badge&logo=python)

![Bulma](https://img.shields.io/badge/Bulma-1.0.2-00d1b2?style=for-the-badge&logo=bulma)

![Jikan API](https://img.shields.io/badge/Jikan_API-v4-red?style=for-the-badge)

![GitHub repo size](https://img.shields.io/github/repo-size/tu-usuario/anime-explorer)

![GitHub stars](https://img.shields.io/github/stars/tu-usuario/anime-explorer?style=social)

> Una aplicación web simple construida con Django que consume la API de Jikan (MyAnimeList) para mostrar los animes más populares con un diseño moderno usando Bulma CSS.

## 📋 Tabla de Contenidos

- [Características](#-características)

- [Tecnologías](#-tecnologías)

- [Instalación](#-instalación)

- [Configuración](#-configuración)

- [Uso](#-uso)

- [Estructura del Proyecto](#-estructura-del-proyecto)

- [API Reference](#-api-reference)

- [Contribución](#-contribución)

- [Licencia](#-licencia)

## ✨ Características

- ✅ Consumo de la API pública de [Jikan](https://jikan.moe/) (MyAnimeList)

- ✅ Diseño responsivo con **Bulma CSS**

- ✅ Grid de animes con información detallada

- ✅ Tarjetas interactivas con efecto hover

- ✅ Badges de puntuación, año, tipo y episodios

- ✅ Manejo de errores y estados de carga

- ✅ Interfaz moderna y limpia

- ✅ Optimizado para dispositivos móviles

## 🛠️ Tecnologías

### Backend

- **[Django 4.2](https://www.djangoproject.com/)** - Framework web Python

- **[Requests](https://docs.python-requests.org/)** - Cliente HTTP para consumir la API

### Frontend

- **[Bulma CSS 1.0.2](https://bulma.io/)** - Framework CSS moderno

- **[Font Awesome 6](https://fontawesome.com/)** - Iconos vectoriales

### API

- **[Jikan API v4](https://docs.api.jikan.moe/)** - API no oficial de MyAnimeList

## 📦 Instalación

### Prerrequisitos

- Python 3.8 o superior

- pip (gestor de paquetes de Python)

- Git (opcional)

### Pasos de instalación

1. **Clonar el repositorio**

```bash

git clone https://github.com/tu-usuario/anime-explorer.git

cd anime-explorer

```

2. **Crear y activar un entorno virtual**

**Windows:**

```bash

python -m venv venv

venv\Scripts\activate

```

**macOS/Linux:**

```bash

python3 -m venv venv

source venv/bin/activate

```

3. **Instalar dependencias**

```bash

pip install -r requirements.txt

```

4. **Realizar migraciones**

```bash

python manage.py migrate

```

5. **Ejecutar el servidor**

```bash

python manage.py runserver

```

6. **Abrir el navegador**

```

http://localhost:8000

```

## ⚙️ Configuración

### Variables de Entorno (Opcional)

Crea un archivo `.env` en la raíz del proyecto:

```env

SECRET_KEY=tu-secret-key-aqui

DEBUG=True

ALLOWED_HOSTS=localhost,127.0.0.1

```

### Personalización

Modifica la cantidad de animes mostrados en `views.py`:

```python

animes = data.get('data', [])[:12]  # Cambia 12 por el número deseado

```

## 🚀 Uso

### Funcionalidades

- **Ver animes**: Visualiza el top de animes en tarjetas

- **Información**: Título, sinopsis, puntuación, año, tipo y episodios

- **Enlace externo**: Botón para ver más detalles en MyAnimeList

### Endpoints

| URL       | Descripción                           |

| --------- | ------------------------------------- |

| `/`       | Página principal con el top de animes |

| `/admin/` | Panel de administración de Django     |

## 📂 Estructura del Proyecto

```

anime-explorer/

├── anime_explorer/          # Configuración del proyecto

│   ├── __init__.py

│   ├── settings.py

│   ├── urls.py

│   └── wsgi.py

├── core/                    # Aplicación principal

│   ├── migrations/

│   ├── templates/

│   │   └── index.html

│   ├── __init__.py

│   ├── admin.py

│   ├── apps.py

│   ├── models.py

│   ├── tests.py

│   └── views.py

├── static/

│   ├── css/

│   │   └── custom.css

│   └── images/

├── requirements.txt

├── manage.py

├── .gitignore

└── README.md

```

### Archivos principales

#### `views.py`

```python

from django.shortcuts import render

import requests

def index(request):

    response = requests.get('https://api.jikan.moe/v4/top/anime')

    data = response.json()

    animes = data.get('data', [])[:12]

    anime_list = []

    for anime in animes:

        anime_list.append({

            'title': anime.get('title'),

            'synopsis': anime.get('synopsis'),

            'image': anime.get('images', {}).get('jpg', {}).get('image_url'),

            'year': anime.get('year'),

            'score': anime.get('score'),

            'episodes': anime.get('episodes'),

            'mal_id': anime.get('mal_id'),

            'type': anime.get('type'),

        })

    return render(request, 'index.html', {'anime_list': anime_list})

```

#### `index.html`

```html

{% load static %}

  

    

    

    Top Anime

    

    

    

  

  

    

      


        

          

 Top Anime

          Los mejores animes según MyAnimeList

        

      

    

    

      


        {% if error %}

        

          

          Error: {{ error }}

        

        {% endif %}

        


          {% for anime in anime_list %}

          

            

              

                

                  

                

                

                   {{ anime.score }}

                

              

              

                

                  

                    {{ anime.title|truncatechars:35 }}

                    

                      

                         {{ anime.year }}

                      

                      

                         {{ anime.type }}

                      

                      

                         {{ anime.episodes }} eps

                      

                    

                  

                

                

                  

                    {{ anime.synopsis|truncatechars:150 }}

                  

                

                

                  

                     Ver más

                  

                

              

            

          

          {% empty %}

          

            

              No se encontraron animes disponibles

            

          

          {% endfor %}

        

      

    

    

      


        

          Anime Explorer con

           y

          Bulma

        

      

    

    

      document.addEventListener("DOMContentLoaded", function () {

        (document.querySelectorAll(".notification .delete") || []).forEach(

          ($delete) => {

            const $notification = $delete.parentNode;

            $delete.addEventListener("click", () => {

              $notification.parentNode.removeChild($notification);

            });

          },

        );

      });

    

  

```

#### `custom.css`

```css

.anime-card {

  transition:

    transform 0.3s ease,

    box-shadow 0.3s ease;

  height: 100%;

}

.anime-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

}

.anime-card .card-image {

  position: relative;

  overflow: hidden;

}

.anime-card .card-image img {

  height: 350px;

  object-fit: cover;

}

.anime-score {

  position: absolute;

  top: 10px;

  right: 10px;

  background: rgba(0, 0, 0, 0.8);

  color: #ffd700;

  padding: 5px 12px;

  border-radius: 20px;

  font-weight: bold;

  font-size: 0.9rem;

}

.synopsis-text {

  max-height: 80px;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

}

```

## 📡 API Reference

### Jikan API Endpoints

| Endpoint            | Descripción              |

| ------------------- | ------------------------ |

| `GET /v4/top/anime` | Obtiene el top de animes |

**Ejemplo de respuesta:**

```json

{

  "data": [

    {

      "mal_id": 1,

      "title": "Fullmetal Alchemist: Brotherhood",

      "year": 2009,

      "type": "TV",

      "episodes": 64,

      "score": 9.09,

      "images": {

        "jpg": {

          "image_url": "https://cdn.myanimelist.net/images/..."

        }

      },

      "synopsis": "Una historia sobre alquimia..."

    }

  ]

}

```

## 📝 Archivos necesarios

### `requirements.txt`

```txt

Django>=4.2,<5.0

requests>=2.31.0

python-dotenv>=1.0.0

```

### `.gitignore`

```gitignore

venv/

__pycache__/

*.pyc

*.pyo

*.pyd

db.sqlite3

.env

*.log

.DS_Store

*.pid

*.seed

*.pid.lock

```

## 🤝 Contribución

1. Fork el proyecto

2. Crea tu rama (`git checkout -b feature/AmazingFeature`)

3. Commit (`git commit -m 'Add some AmazingFeature'`)

4. Push (`git push origin feature/AmazingFeature`)

5. Abre un Pull Request

### Directrices

- Usa [PEP 8](https://www.python.org/dev/peps/pep-0008/)

- Asegúrate de que las pruebas pasen

- Actualiza la documentación si es necesario

## 📝 Licencia

MIT - ver el archivo [LICENSE](LICENSE)

## 🙏 Agradecimientos

- [Jikan API](https://jikan.moe/)

- [MyAnimeList](https://myanimelist.net/)

- [Bulma](https://bulma.io/)

- [Font Awesome](https://fontawesome.com/)

- [Django](https://www.djangoproject.com/)

## 📬 Contacto

**Tu Nombre** - [@tu_twitter](https://twitter.com/tu_twitter) - tu.email@ejemplo.com

Link del proyecto: [https://github.com/tu-usuario/anime-explorer](https://github.com/tu-usuario/anime-explorer)

---

⭐️ **¡No olvides darle una estrella al proyecto!** ⭐️

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/kenkyoo/django-anime

Awesome Lists containing this project

README

Top Anime