Skip to content

Buscador de repositorios de GitHub por tema, construido con HTML, CSS y JavaScript. Utiliza la API de GitHub para obtener resultados en tiempo real.

Notifications You must be signed in to change notification settings

herwingxtech/awesome-github-search

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Buscador de Repositorios de GitHub

GitHub Pages Status License: MIT

Este proyecto es un buscador de repositorios de GitHub que permite a los usuarios encontrar proyectos según un tema o palabra clave. Está construido utilizando tecnologías web estándar: HTML, CSS y JavaScript (sin frameworks ni bibliotecas externas, aparte de fetch para las peticiones HTTP). Utiliza la API de GitHub para obtener los resultados de búsqueda en tiempo real. Este proyecto ha sido desarrollado como parte de mi aprendizaje sobre la API de GitHub y se considera una posible contribución al GitHub Developer Program.

Ver Demo en Vivo

Características

  • Búsqueda por tema: Ingresa cualquier tema o palabra clave para encontrar repositorios relevantes.
  • Resultados claros: Muestra el nombre del repositorio (con enlace a su página en GitHub), su descripción y el número de estrellas.
  • Interfaz sencilla: Diseño minimalista y fácil de usar.
  • Código limpio: Código bien comentado y estructurado, siguiendo buenas prácticas de desarrollo.
  • Desplegado con GitHub Pages: Fácilmente accesible en línea.
  • Manejo de errores: Incluye mensajes de error informativos para el usuario en caso de fallos en la búsqueda o problemas de conexión.

Tecnologías Utilizadas

  • HTML5: Para la estructura del documento.
  • CSS3: Para los estilos y la presentación.
  • JavaScript (ES6+): Para la lógica de la aplicación, incluyendo:
    • fetch API: Para realizar peticiones a la API de GitHub.
    • Manipulación del DOM: Para mostrar los resultados dinámicamente.
    • Eventos: Para manejar la interacción del usuario.
    • Funciones asíncronas (async/await): Para manejar las promesas de fetch.
  • GitHub API (v3 REST): Específicamente, el endpoint /search/repositories.
  • GitHub Pages: Para el alojamiento del sitio web estático.

Instalación y Configuración de Tailwind CSS

Este proyecto utiliza Tailwind CSS para los estilos. A continuación, se describen los pasos para instalar y generar el archivo output.css sin un archivo de configuración:

  1. Instalar Node.js y npm
    Asegúrate de tener instalado Node.js y npm en tu sistema. Puedes descargarlos desde Node.js.

  2. Instalar Tailwind CLI
    Ejecuta el siguiente comando para instalar Tailwind CLI globalmente:

    npm install -g tailwindcss
  3. Generar el archivo output.css
    Ejecuta el siguiente comando para generar el archivo CSS procesado y mantenerlo actualizado automáticamente mientras trabajas:

    npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
    • -i ./src/input.css: Especifica el archivo de entrada (input.css) que contiene las directivas de Tailwind necesarias:
      @tailwind base;
      @tailwind components;
      @tailwind utilities;
    • -o ./src/output.css: Especifica el archivo de salida (output.css) donde se generará el CSS procesado.
    • --watch: Mantiene el proceso en ejecución para regenerar automáticamente el archivo output.css cada vez que realices cambios en los estilos.

    Una vez ejecutado este comando, el archivo output.css estará listo para ser utilizado en tu proyecto.

Estructura del Proyecto

awesome-github-search/
├── index.html 
├── src    
   ├── script.js
├── css          
   ├── style.css          
└── README.md           

Cómo Usar la Aplicación

  1. Visita la página: Abre la aplicación en tu navegador (a través de la URL de GitHub Pages).
  2. Ingresa un tema: Escribe una palabra clave o tema en el campo de entrada (por ejemplo, "python", "machine learning", "react", etc.).
  3. Haz clic en "Buscar": El botón iniciará la búsqueda a través de la API de GitHub.
  4. Visualiza los resultados: Los repositorios encontrados (si los hay) se mostrarán debajo del formulario, con su nombre, descripción y número de estrellas. Si no hay resultados, o si ocurre un error, se mostrará un mensaje apropiado.

Cómo Clonar y Ejecutar Localmente

Si deseas ejecutar este proyecto localmente (para desarrollo, pruebas o modificaciones), sigue estos pasos:

  1. Clona el repositorio:

    git clone https://github.com/herwingx/awesome-github-search.git
    cd awesome-github-search
  2. Abre index.html en tu navegador:

    No necesitas un servidor web para ejecutar este proyecto, ya que es estático. Simplemente abre el archivo index.html directamente en tu navegador favorito (arrastra y suelta el archivo en una ventana del navegador, o haz doble clic en él).

Contribuciones

¡Las contribuciones son bienvenidas! Si encuentras errores, tienes ideas para mejoras o quieres añadir nuevas funcionalidades, por favor:

  1. Haz un fork del repositorio.
  2. Crea una nueva rama para tu contribución (git checkout -b mi-nueva-caracteristica).
  3. Realiza tus cambios y haz commit de ellos (git commit -m "Agrega: mi nueva característica").
  4. Sube tu rama al fork (git push origin mi-nueva-caracteristica).
  5. Abre un Pull Request en este repositorio (el original).

Por favor, asegúrate de seguir un estilo de código consistente y de añadir comentarios explicativos a tu código.

Licencia

Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE (si lo creaste, si no indica simplemente "Este proyecto está bajo la licencia MIT" si lo distribuyes así.) para más detalles. La Licencia MIT es una licencia permisiva de código abierto. Te recomiendo que uses este tipo de licencia en este caso.

Créditos

Contacto

Si tienes alguna pregunta o comentario sobre este proyecto, puedes contactarme a través de mi perfil de GitHub: herwingx.

About

Buscador de repositorios de GitHub por tema, construido con HTML, CSS y JavaScript. Utiliza la API de GitHub para obtener resultados en tiempo real.

Topics

Resources

Stars

Watchers

Forks