https://github.com/karamanburak/random-user-generator

👱🏻‍♂️ Web page that randomly pulls information from different people
https://github.com/karamanburak/random-user-generator

api react react-bootstrap react-icons

Last synced: 2 days ago
JSON representation

👱🏻‍♂️ Web page that randomly pulls information from different people

• Host: GitHub
• URL: https://github.com/karamanburak/random-user-generator
• Owner: karamanburak
• License: mit
• Created: 2024-03-13T13:36:35.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-18T09:08:44.000Z (7 months ago)
• Last Synced: 2024-11-16T21:14:04.313Z (2 days ago)
• Topics: api, react, react-bootstrap, react-icons
• Language: JavaScript
• Homepage:
• Size: 1.12 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Random-User-Generator-App

[Live Demo](https://random-user-generator-app.netlify.app/)

## Description

- This is a simple React application that generates random user information using the [Random User Generator API](https://randomuser.me/). The app displays a default user image along with various user details such as name, email, age, address, phone, and password. Additionally, it provides options to fetch a new random user or add the current user to a table.

## Project Skeleton

```

02 - Random User App

|

SOLUTION

├── public

│     └── index.html

├── src

│    ├── assets

│    │       └── [images]

│    ├── components

│    ├──     ├── Footer.css

│    │       └── Footer.jsx

│    ├── App.js

│    ├── index.css

│    └── index.js

├── gitignore

├── LICENSE

├── package-lock.json

├── package.json

└── README.md

```

## Outcome

![Project Snapshot](./random-user-app.gif)

## Objective

- Build a Random User App using ReactJS.

- The user details are displayed in a clean and visually appealing format.

- Click the "new user" button to fetch and display a new random user.

- Click the "add user" button to add the current user's information to the table

## Steps to Solution

- Step 1: Create React App using `yarn && yarn start` or `npm && npm install`.

- Step 2: Build Random User App fetching data from `https://randomuser.me/api/` using `fetch` or `axios`.