npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

prueba-tecnica_front-end

v1.0.0

Published

prueba tecnica con react

Downloads

1

Readme

Prueba Técnica - Programador (Front-end)

La siguiente es una prueba para evaluar a los postulantes a programador Front-end.

INTRODUCCIÓN

Este repositorio contiene una serie de requerimientos de un Caso Práctico, que busca evaluar las capacidades técnicas del candidato con respecto a las principales funciones y responsabilidades que se requieren dentro del área de Desarrollo de Tecnología.

¿Qué se busca evaluar?

Principalmente los siguientes aspectos:

  • Creatividad para resolver los requerimientos,
  • Calidad del código entregado (estructura y buenas prácticas),
  • Eficiencia de los algoritmos entregados,
  • Familiaridad con Frameworks y plataformas de desarrollo Web.

IMPORTANTE

  1. Asegúrate de tener Node.js y npm instalados.

  2. Se solicita crear la aplicación utilizando alguna de estas tecnologías Web de su elección:

React ** + SCSS**

  1. Se requiere de una cuenta de GitHub para realizar este ejercicio.

  2. Antes de comenzar a programar:

  • Realizar un Fork de este repositorio (https://github.com/iseijasunow/Prueba-Tecnica_Front-end).
  • Clonar el fork a su máquina local git clone [email protected]:USERNAME/FORKED-PROJECT.git
  • Crear un branch en su cuenta de GitHub utilizando su nombre completo.
  1. Al finalizar, existen 2 (dos) opciones para entregar su proyecto:
    1. Realizar un Commit de su proyecto, enviar un Pull Request al branch con su NOMBRE, y notificar a la siguiente dirección de correo electrónico [email protected].
    1. Crear un archivo comprimido (.zip o .rar) de su proyecto y enviar a la siguiente dirección de correo electrónico [email protected].

EJERCICIO PRÁCTICO

Objetivo: Crear una aplicación que ayude a obtener una lista de usuarios y muestre la información de sus perfiles, explotando el API Rest pública de GitHub https://api.github.com/search/users?q=YOUR_NAME.

Requerimientos generales

  1. La aplicación debe cumplir con los siguientes requisitos funcionales:
  • Crear una aplicación que incluya un campo de entrada texto y un botón, para que se pueda capturar el usuario y recuperar la información utilizando el API anteriormente indicada.

  • Mostrar los primeros 10 usuarios del resultado de la búsqueda, incluyendo su nombre de usuario ('user.login') y el id ('user.id') de cada registro.

  • Convertir cada Perfil de usuario en un enlace, para que al hacer clic en cada registro, navegue a una ruta que incluya la propiedad 'user.login' como parámetro.

  • Crear un componente independiente en el que se lea el parámetro de la URL, y a continuación, obtenga los datos de dicho usuario mediante la siguiente API: https://api.github.com/users/YOUR_NAME

  • Incluir la imagen del usuario ('avatar_url') y alguna otra información (de su elección) en el componente.

  • Incluir un validador que verifique que el texto de búsqueda de usuarios sea de un mínimo de 4 caracteres, y otro que NO permita realizar la búsqueda de la palabra “iseijasunow”.

  • Integrar cualquier librería de gráficos que pueda encontrar y crear un gráfico de barras simple para mostrar el número de seguidores de los 10 primeros usuarios.

  • Incluir un componente para mostrar mensajes de Errores Generales en toda la aplicación.

  1. CSS: Utilizar CSS Grid y/o CSS Flexbox, para la maquetación del proyecto

  2. Iconos: Utilizar una librería para el manejo de iconos donde lo considere necesario (se recomienda el uso de Font Awesome o Glyphicons.)