{"id":21075300,"url":"https://github.com/kevinserrano01/proyecto_final_react","last_synced_at":"2026-05-10T00:46:23.990Z","repository":{"id":252733149,"uuid":"830069730","full_name":"kevinserrano01/proyecto_final_react","owner":"kevinserrano01","description":"Proyecto integrador de Universidad con React","archived":false,"fork":false,"pushed_at":"2024-08-13T02:51:50.000Z","size":20867,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-20T22:51:08.228Z","etag":null,"topics":["bootstrap","javascript","reactjs"],"latest_commit_sha":null,"homepage":"","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/kevinserrano01.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}},"created_at":"2024-07-17T14:25:30.000Z","updated_at":"2024-08-13T02:51:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"b8269249-9064-43e6-ad43-a08bf9930275","html_url":"https://github.com/kevinserrano01/proyecto_final_react","commit_stats":null,"previous_names":["kevinserrano01/proyecto_final_react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinserrano01%2Fproyecto_final_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinserrano01%2Fproyecto_final_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinserrano01%2Fproyecto_final_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinserrano01%2Fproyecto_final_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevinserrano01","download_url":"https://codeload.github.com/kevinserrano01/proyecto_final_react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243521166,"owners_count":20304183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["bootstrap","javascript","reactjs"],"created_at":"2024-11-19T19:21:19.583Z","updated_at":"2026-05-10T00:46:23.947Z","avatar_url":"https://github.com/kevinserrano01.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Aplicacion  de Música con React\n\n## **Documentación Técnica**\n\n### **Introducción del Proyecto**\n- **Breve descripción de la aplicación:**\n    Esta aplicación permite a los usuarios explorar, reproducir y gestionar su música favorita. Los usuarios pueden buscar canciones, añadirlas a sus favoritos y reproducirlas directamente desde la aplicación. Asi mismo tambien pueden gestionar las listas de reproducciones, albunes, artistas y generos.\n\n- **Propósito y objetivos del proyecto:**\n    El objetivo del proyecto es proporcionar una plataforma intuitiva y fácil de usar para la gestión y reproducción de música. La aplicación está diseñada para ser rápida, responsiva y accesible desde cualquier dispositivo.\n\n### **Guía de Instalación**\n- **Requisitos previos**\n  - Node.js (versión 14 o superior)\n  - npm (versión 6 o superior)\n  - React (versión 17 o superior)\n  - Bootstrap (versión 5 o superior)\n\n###  **Instrucciones de instalación**\n 1. Clona el repositorio:\n     ```bash\n     git clone https://github.com/kevinserrano01/proyecto_final_react.git\n     cd proyecto_final_react\n     ```\n  2. Instala las dependencias:\n     ```bash\n     npm install\n     ```\n  3. Inicia la aplicación:\n     ```bash\n     npm run dev\n     ```\n\n### **Configuración del entorno**\nVariebale de entorno: \n[`.env`](app-music-react/.env\")\n  ```env\n  API_URL = http://api.com\n  ```\n\n### **Estructura de archivos y carpetas**\n    ├── public\n    ├── src\n    │   ├── assets\n    │   ├── components\n    │   │   ├── Albums\n    │   │   ├── Artist\n    │   │   ├── Auth\n    │   │   ├── Genres\n    │   │   ├── Layout\n    │   │   ├── Music\n    │   │   ├── PlayList\n    │   │   ├── Search\n    │   │   ├── NotFound.jsx\n    │   ├── contexts\n    │   │   ├── AuthContext.jsx\n    │   │   ├── FavoritesContext.jsx\n    │   │   ├── PageContext.jsx\n    │   ├── hooks\n    │   │   ├── secondToMinute.js\n    │   │   ├── useFetchHook.js\n    │   │   ├── useForm.js\n    │   ├── routes\n    │   │   ├── Albums.jsx\n    │   │   ├── Artist.jsx\n    │   │   ├── Favorites.jsx\n    │   │   ├── Genres.jsx\n    │   │   ├── Music.jsx\n    │   │   ├── PlayList.jsx\n    │   ├── security\n    │   │   ├── ProtectedRoute.jsx\n    │   ├── main.jsx\n    │   ├── Router.jsx\n    │   ├── Layout.jsx\n    ├── .env\n    ├── package.json\n    ├── README.md\n    └── index.html\n\n\n### **Descripción de los módulos**\n- **components**: Contiene los componentes reutilizables de la aplicación.\n- **contexts**: Contiene los contextos de React para la gestión del estado global.\n- **hooks**: Contiene hooks personalizados utilizados en la aplicación.\n\n### **Guía de Uso:**\n- **Ejemplos de uso:** \n    1. Para explorar una canción, haz clic en el título de la canción en la tarjeta.\n    2. Para añadir una canción a tus favoritos, haz clic en el botón de corazón.\n    3. Para reproducir una canción, utiliza el reproductor de audio en la tarjeta de la canción.\n\n### **Capturas de pantalla**\n![Captura de pantalla](./preview/Search.png)\n![Captura de pantalla](./preview/Favorites.png)\n![Captura de pantalla](./preview/Artist.png)\n![Captura de pantalla](./preview/Albums.png)\n![Captura de pantalla](./preview/Add_playlist.png)\n![Captura de pantalla](./preview/FavTablet.png)\n\n\n### **Flujos de trabajo:**\n    1. Explorar canciones: Los usuarios pueden navegar por la lista de canciones disponibles.\n    2. Añadir a favoritos: Los usuarios pueden marcar canciones como favoritas para un acceso rápido.\n    3. Reproducir canciones: Los usuarios pueden reproducir canciones directamente desde la aplicación.\n\n### **Mantenimiento y Actualización:**\n#### Convenciones de código:\n- Utiliza ESLint para mantener un estilo de código consistente.\n- Sigue las convenciones de nomenclatura de React para componentes y archivos.\n\n\n### **Documentación de Usuario Final**\n#### Manual del Usuario:\n\n    1. Abre la aplicación en tu navegador.\n    2. Navega por la lista de canciones disponibles.\n    3. Haz clic en una canción para reproducirla o añadirla a tus favoritos.\n#### Descripción de funcionalidades:\n    - Explorar canciones: Permite a los usuarios buscar y explorar canciones.\n    - Añadir a favoritos: Permite a los usuarios marcar canciones como favoritas.\n    - Reproducir canciones: Permite a los usuarios reproducir canciones directamente desde la aplicación.\n    - Crear canciones: Permite subir canciones.\n    - Editar canciones: Permite editar los datos de las canciones.\n    - Eliminar canciones: Permite eliminar canciones.\n\n#### Preguntas Frecuentes (FAQs):\n    - ¿Cómo añado una canción a mis favoritos? Haz clic en el botón de corazón en la tarjeta de la canción.\n    - ¿Cómo reproduzco una canción? Utiliza el reproductor de audio en la tarjeta de la canción.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinserrano01%2Fproyecto_final_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinserrano01%2Fproyecto_final_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinserrano01%2Fproyecto_final_react/lists"}