{"id":51847005,"url":"https://github.com/kenkyoo/django-anime","last_synced_at":"2026-07-23T14:01:22.813Z","repository":{"id":368068855,"uuid":"1283369699","full_name":"Kenkyoo/django-anime","owner":"Kenkyoo","description":"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.","archived":false,"fork":false,"pushed_at":"2026-06-29T00:00:07.000Z","size":404,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-29T00:12:56.796Z","etag":null,"topics":["anime","anime-api","bulma-css","bulma-css-framework","django","django-application","django-project","django-rest-framework","python","python3","render","render-deployment","shell"],"latest_commit_sha":null,"homepage":"https://django-anime.onrender.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kenkyoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-28T21:17:01.000Z","updated_at":"2026-06-29T00:00:14.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Kenkyoo/django-anime","commit_stats":null,"previous_names":["kenkyoo/django-anime"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Kenkyoo/django-anime","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kenkyoo%2Fdjango-anime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kenkyoo%2Fdjango-anime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kenkyoo%2Fdjango-anime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kenkyoo%2Fdjango-anime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kenkyoo","download_url":"https://codeload.github.com/Kenkyoo/django-anime/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kenkyoo%2Fdjango-anime/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35804545,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-23T02:00:06.683Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anime","anime-api","bulma-css","bulma-css-framework","django","django-application","django-project","django-rest-framework","python","python3","render","render-deployment","shell"],"created_at":"2026-07-23T14:01:21.888Z","updated_at":"2026-07-23T14:01:22.808Z","avatar_url":"https://github.com/Kenkyoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎬 Anime Explorer\n\n![Django](https://img.shields.io/badge/Django-4.2-green?style=for-the-badge\u0026logo=django)\n![Python](https://img.shields.io/badge/Python-3.8+-blue?style=for-the-badge\u0026logo=python)\n![Bulma](https://img.shields.io/badge/Bulma-1.0.2-00d1b2?style=for-the-badge\u0026logo=bulma)\n![Jikan API](https://img.shields.io/badge/Jikan_API-v4-red?style=for-the-badge)\n![GitHub repo size](https://img.shields.io/github/repo-size/tu-usuario/anime-explorer)\n![GitHub stars](https://img.shields.io/github/stars/tu-usuario/anime-explorer?style=social)\n\n\u003e 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.\n\n## 📋 Tabla de Contenidos\n\n- [Características](#-características)\n- [Tecnologías](#-tecnologías)\n- [Instalación](#-instalación)\n- [Configuración](#-configuración)\n- [Uso](#-uso)\n- [Estructura del Proyecto](#-estructura-del-proyecto)\n- [API Reference](#-api-reference)\n- [Contribución](#-contribución)\n- [Licencia](#-licencia)\n\n## ✨ Características\n\n- ✅ Consumo de la API pública de [Jikan](https://jikan.moe/) (MyAnimeList)\n- ✅ Diseño responsivo con **Bulma CSS**\n- ✅ Grid de animes con información detallada\n- ✅ Tarjetas interactivas con efecto hover\n- ✅ Badges de puntuación, año, tipo y episodios\n- ✅ Manejo de errores y estados de carga\n- ✅ Interfaz moderna y limpia\n- ✅ Optimizado para dispositivos móviles\n\n## 🛠️ Tecnologías\n\n### Backend\n\n- **[Django 4.2](https://www.djangoproject.com/)** - Framework web Python\n- **[Requests](https://docs.python-requests.org/)** - Cliente HTTP para consumir la API\n\n### Frontend\n\n- **[Bulma CSS 1.0.2](https://bulma.io/)** - Framework CSS moderno\n- **[Font Awesome 6](https://fontawesome.com/)** - Iconos vectoriales\n\n### API\n\n- **[Jikan API v4](https://docs.api.jikan.moe/)** - API no oficial de MyAnimeList\n\n## 📦 Instalación\n\n### Prerrequisitos\n\n- Python 3.8 o superior\n- pip (gestor de paquetes de Python)\n- Git (opcional)\n\n### Pasos de instalación\n\n1. **Clonar el repositorio**\n\n```bash\ngit clone https://github.com/tu-usuario/anime-explorer.git\ncd anime-explorer\n```\n\n2. **Crear y activar un entorno virtual**\n\n**Windows:**\n\n```bash\npython -m venv venv\nvenv\\Scripts\\activate\n```\n\n**macOS/Linux:**\n\n```bash\npython3 -m venv venv\nsource venv/bin/activate\n```\n\n3. **Instalar dependencias**\n\n```bash\npip install -r requirements.txt\n```\n\n4. **Realizar migraciones**\n\n```bash\npython manage.py migrate\n```\n\n5. **Ejecutar el servidor**\n\n```bash\npython manage.py runserver\n```\n\n6. **Abrir el navegador**\n\n```\nhttp://localhost:8000\n```\n\n## ⚙️ Configuración\n\n### Variables de Entorno (Opcional)\n\nCrea un archivo `.env` en la raíz del proyecto:\n\n```env\nSECRET_KEY=tu-secret-key-aqui\nDEBUG=True\nALLOWED_HOSTS=localhost,127.0.0.1\n```\n\n### Personalización\n\nModifica la cantidad de animes mostrados en `views.py`:\n\n```python\nanimes = data.get('data', [])[:12]  # Cambia 12 por el número deseado\n```\n\n## 🚀 Uso\n\n### Funcionalidades\n\n- **Ver animes**: Visualiza el top de animes en tarjetas\n- **Información**: Título, sinopsis, puntuación, año, tipo y episodios\n- **Enlace externo**: Botón para ver más detalles en MyAnimeList\n\n### Endpoints\n\n| URL       | Descripción                           |\n| --------- | ------------------------------------- |\n| `/`       | Página principal con el top de animes |\n| `/admin/` | Panel de administración de Django     |\n\n## 📂 Estructura del Proyecto\n\n```\nanime-explorer/\n├── anime_explorer/          # Configuración del proyecto\n│   ├── __init__.py\n│   ├── settings.py\n│   ├── urls.py\n│   └── wsgi.py\n├── core/                    # Aplicación principal\n│   ├── migrations/\n│   ├── templates/\n│   │   └── index.html\n│   ├── __init__.py\n│   ├── admin.py\n│   ├── apps.py\n│   ├── models.py\n│   ├── tests.py\n│   └── views.py\n├── static/\n│   ├── css/\n│   │   └── custom.css\n│   └── images/\n├── requirements.txt\n├── manage.py\n├── .gitignore\n└── README.md\n```\n\n### Archivos principales\n\n#### `views.py`\n\n```python\nfrom django.shortcuts import render\nimport requests\n\ndef index(request):\n    response = requests.get('https://api.jikan.moe/v4/top/anime')\n    data = response.json()\n\n    animes = data.get('data', [])[:12]\n    anime_list = []\n    for anime in animes:\n        anime_list.append({\n            'title': anime.get('title'),\n            'synopsis': anime.get('synopsis'),\n            'image': anime.get('images', {}).get('jpg', {}).get('image_url'),\n            'year': anime.get('year'),\n            'score': anime.get('score'),\n            'episodes': anime.get('episodes'),\n            'mal_id': anime.get('mal_id'),\n            'type': anime.get('type'),\n        })\n\n    return render(request, 'index.html', {'anime_list': anime_list})\n```\n\n#### `index.html`\n\n```html\n{% load static %}\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"es\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eTop Anime\u003c/title\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css\"\n    /\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\"\n    /\u003e\n    \u003clink rel=\"stylesheet\" href=\"{% static 'css/custom.css' %}\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003csection class=\"hero is-primary is-medium\"\u003e\n      \u003cdiv class=\"hero-body\"\u003e\n        \u003cdiv class=\"container has-text-centered\"\u003e\n          \u003ch1 class=\"title is-1\"\u003e\u003ci class=\"fas fa-film\"\u003e\u003c/i\u003e Top Anime\u003c/h1\u003e\n          \u003cp class=\"subtitle\"\u003eLos mejores animes según MyAnimeList\u003c/p\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/section\u003e\n\n    \u003csection class=\"section\"\u003e\n      \u003cdiv class=\"container\"\u003e\n        {% if error %}\n        \u003cdiv class=\"notification is-danger is-light\"\u003e\n          \u003cbutton class=\"delete\"\u003e\u003c/button\u003e\n          \u003cstrong\u003eError:\u003c/strong\u003e {{ error }}\n        \u003c/div\u003e\n        {% endif %}\n\n        \u003cdiv class=\"columns is-multiline is-desktop\"\u003e\n          {% for anime in anime_list %}\n          \u003cdiv class=\"column is-3-desktop is-4-tablet is-6-mobile\"\u003e\n            \u003cdiv class=\"card anime-card\"\u003e\n              \u003cdiv class=\"card-image\"\u003e\n                \u003cfigure class=\"image is-4by3\"\u003e\n                  \u003cimg\n                    src=\"{{ anime.image }}\"\n                    alt=\"{{ anime.title }}\"\n                    loading=\"lazy\"\n                  /\u003e\n                \u003c/figure\u003e\n                \u003cdiv class=\"anime-score\"\u003e\n                  \u003ci class=\"fas fa-star\"\u003e\u003c/i\u003e {{ anime.score }}\n                \u003c/div\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"card-content\"\u003e\n                \u003cdiv class=\"media\"\u003e\n                  \u003cdiv class=\"media-content\"\u003e\n                    \u003cp class=\"title is-6\"\u003e{{ anime.title|truncatechars:35 }}\u003c/p\u003e\n                    \u003cdiv class=\"tags\"\u003e\n                      \u003cspan class=\"tag is-info is-light\"\u003e\n                        \u003ci class=\"fas fa-calendar\"\u003e\u003c/i\u003e {{ anime.year }}\n                      \u003c/span\u003e\n                      \u003cspan class=\"tag is-success is-light\"\u003e\n                        \u003ci class=\"fas fa-play-circle\"\u003e\u003c/i\u003e {{ anime.type }}\n                      \u003c/span\u003e\n                      \u003cspan class=\"tag is-warning is-light\"\u003e\n                        \u003ci class=\"fas fa-video\"\u003e\u003c/i\u003e {{ anime.episodes }} eps\n                      \u003c/span\u003e\n                    \u003c/div\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"content\"\u003e\n                  \u003cp class=\"synopsis-text\"\u003e\n                    {{ anime.synopsis|truncatechars:150 }}\n                  \u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"buttons is-centered mt-3\"\u003e\n                  \u003ca\n                    href=\"https://myanimelist.net/anime/{{ anime.mal_id }}\"\n                    target=\"_blank\"\n                    class=\"button is-small is-primary is-outlined\"\n                  \u003e\n                    \u003ci class=\"fas fa-external-link-alt\"\u003e\u003c/i\u003e Ver más\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          {% empty %}\n          \u003cdiv class=\"column is-full\"\u003e\n            \u003cdiv class=\"notification is-warning is-light\"\u003e\n              No se encontraron animes disponibles\n            \u003c/div\u003e\n          \u003c/div\u003e\n          {% endfor %}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/section\u003e\n\n    \u003cfooter class=\"footer has-background-light\"\u003e\n      \u003cdiv class=\"content has-text-centered\"\u003e\n        \u003cp\u003e\n          \u003cstrong\u003eAnime Explorer\u003c/strong\u003e con\n          \u003ci class=\"fas fa-heart has-text-danger\"\u003e\u003c/i\u003e y\n          \u003ca href=\"https://bulma.io\" target=\"_blank\"\u003eBulma\u003c/a\u003e\n        \u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/footer\u003e\n\n    \u003cscript\u003e\n      document.addEventListener(\"DOMContentLoaded\", function () {\n        (document.querySelectorAll(\".notification .delete\") || []).forEach(\n          ($delete) =\u003e {\n            const $notification = $delete.parentNode;\n            $delete.addEventListener(\"click\", () =\u003e {\n              $notification.parentNode.removeChild($notification);\n            });\n          },\n        );\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### `custom.css`\n\n```css\n.anime-card {\n  transition:\n    transform 0.3s ease,\n    box-shadow 0.3s ease;\n  height: 100%;\n}\n.anime-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n}\n.anime-card .card-image {\n  position: relative;\n  overflow: hidden;\n}\n.anime-card .card-image img {\n  height: 350px;\n  object-fit: cover;\n}\n.anime-score {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background: rgba(0, 0, 0, 0.8);\n  color: #ffd700;\n  padding: 5px 12px;\n  border-radius: 20px;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n.synopsis-text {\n  max-height: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n}\n```\n\n## 📡 API Reference\n\n### Jikan API Endpoints\n\n| Endpoint            | Descripción              |\n| ------------------- | ------------------------ |\n| `GET /v4/top/anime` | Obtiene el top de animes |\n\n**Ejemplo de respuesta:**\n\n```json\n{\n  \"data\": [\n    {\n      \"mal_id\": 1,\n      \"title\": \"Fullmetal Alchemist: Brotherhood\",\n      \"year\": 2009,\n      \"type\": \"TV\",\n      \"episodes\": 64,\n      \"score\": 9.09,\n      \"images\": {\n        \"jpg\": {\n          \"image_url\": \"https://cdn.myanimelist.net/images/...\"\n        }\n      },\n      \"synopsis\": \"Una historia sobre alquimia...\"\n    }\n  ]\n}\n```\n\n## 📝 Archivos necesarios\n\n### `requirements.txt`\n\n```txt\nDjango\u003e=4.2,\u003c5.0\nrequests\u003e=2.31.0\npython-dotenv\u003e=1.0.0\n```\n\n### `.gitignore`\n\n```gitignore\nvenv/\n__pycache__/\n*.pyc\n*.pyo\n*.pyd\ndb.sqlite3\n.env\n*.log\n.DS_Store\n*.pid\n*.seed\n*.pid.lock\n```\n\n## 🤝 Contribución\n\n1. Fork el proyecto\n2. Crea tu rama (`git checkout -b feature/AmazingFeature`)\n3. Commit (`git commit -m 'Add some AmazingFeature'`)\n4. Push (`git push origin feature/AmazingFeature`)\n5. Abre un Pull Request\n\n### Directrices\n\n- Usa [PEP 8](https://www.python.org/dev/peps/pep-0008/)\n- Asegúrate de que las pruebas pasen\n- Actualiza la documentación si es necesario\n\n## 📝 Licencia\n\nMIT - ver el archivo [LICENSE](LICENSE)\n\n## 🙏 Agradecimientos\n\n- [Jikan API](https://jikan.moe/)\n- [MyAnimeList](https://myanimelist.net/)\n- [Bulma](https://bulma.io/)\n- [Font Awesome](https://fontawesome.com/)\n- [Django](https://www.djangoproject.com/)\n\n## 📬 Contacto\n\n**Tu Nombre** - [@tu_twitter](https://twitter.com/tu_twitter) - tu.email@ejemplo.com\n\nLink del proyecto: [https://github.com/tu-usuario/anime-explorer](https://github.com/tu-usuario/anime-explorer)\n\n---\n\n⭐️ **¡No olvides darle una estrella al proyecto!** ⭐️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenkyoo%2Fdjango-anime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenkyoo%2Fdjango-anime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenkyoo%2Fdjango-anime/lists"}