https://github.com/kenkyoo/react-app-users

Este es un proyecto sencillo hecho con React, Next.js y Vercel, que muestra un carrusel de usuarios obtenidos desde la API de randomuser.me.
https://github.com/kenkyoo/react-app-users

daisy-ui javascript nextjs random-users-api react swiper swiper-slider tailwindcss typescript vercel

Last synced: 12 months ago
JSON representation

Este es un proyecto sencillo hecho con React, Next.js y Vercel, que muestra un carrusel de usuarios obtenidos desde la API de randomuser.me.

• Host: GitHub
• URL: https://github.com/kenkyoo/react-app-users
• Owner: Kenkyoo
• Created: 2024-12-07T06:26:20.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-07T06:34:13.000Z (over 1 year ago)
• Last Synced: 2024-12-14T17:12:42.869Z (over 1 year ago)
• Topics: daisy-ui, javascript, nextjs, random-users-api, react, swiper, swiper-slider, tailwindcss, typescript, vercel
• Language: TypeScript
• Homepage: https://react-app-users-omega.vercel.app
• Size: 772 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
React App Users

Este es un proyecto sencillo hecho con React, Next.js y Vercel, que muestra un carrusel de usuarios obtenidos desde la API de randomuser.me. Los usuarios se presentan con su nombre, edad, teléfono, correo electrónico y ubicación.

Demo

Puedes ver el demo en:

Ver Demo en Vercel

Tecnologías

    React: Librería para construir la interfaz de usuario.

    Next.js: Framework para React que permite renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG).

    Swiper: Biblioteca para crear carruseles (slides).

    TailwindCSS: Framework de diseño para estilos rápidos y responsivos.

    DaisyUI: Componentes de interfaz de usuario sobre TailwindCSS.

    TypeScript: Lenguaje que agrega tipos estáticos a JavaScript.

Instalación

    Clona el repositorio:

git clone https://github.com/Kenkyoo/react-app-users.git

    Instala las dependencias:

cd react-app-users

npm install

    Inicia el servidor de desarrollo:

npm run dev

    Accede a http://localhost:3000 en tu navegador.

Descripción del Proyecto

Este proyecto utiliza la API https://randomuser.me/api/ para obtener una lista de usuarios aleatorios, que se muestran en un carrusel usando la librería Swiper.

El componente principal hace una solicitud de datos al cargar, y al recibir los datos, muestra cada usuario en un SwiperSlide dentro de un componente Card.

Estructura de Archivos

    pages/index.tsx: Componente principal que renderiza el carrusel de usuarios.

    components/card.tsx: Componente que representa cada usuario en el carrusel.

Dependencias

"dependencies": {

  "next": "14.2.14",

  "react": "^18",

  "react-dom": "^18",

  "swiper": "^11.1.14"

},

"devDependencies": {

  "@types/node": "^20",

  "@types/react": "^18",

  "@types/react-dom": "^18",

  "daisyui": "^4.12.12",

  "eslint": "^8",

  "eslint-config-next": "14.2.14",

  "postcss": "^8",

  "tailwindcss": "^3.4.1",

  "typescript": "^5"

}

Licencia

Este proyecto está bajo la licencia MIT.