https://github.com/ucangun/random_user_app
Random User App is a React application that fetches and displays random user information from an external API. Built with React hooks and Axios for API integration, it allows users to view and save user details. The app uses React Bootstrap for responsive design and a clean user interface.
https://github.com/ucangun/random_user_app
Last synced: about 2 months ago
JSON representation
Random User App is a React application that fetches and displays random user information from an external API. Built with React hooks and Axios for API integration, it allows users to view and save user details. The app uses React Bootstrap for responsive design and a clean user interface.
- Host: GitHub
- URL: https://github.com/ucangun/random_user_app
- Owner: ucangun
- Created: 2024-08-10T12:03:00.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-11T09:48:37.000Z (10 months ago)
- Last Synced: 2025-02-10T08:15:17.287Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.84 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ramdom User App
https://randomuserappumut.netlify.app/
## Project Purpose
The primary goal of this project is to create a React application that fetches and displays random user information from an external API. The project focuses on enhancing skills in React hooks (`useState`, `useEffect`), API integration with Axios, and managing component-level state and effects. Additionally, it provides experience in utilizing React Bootstrap for styling and structuring the app layout.
## Project Structure
```
|--Random_User_App(folder)
|
├── public
│ └── index.html
├── src
│ ├── assets
│ │ └── [images]
│ │
│ ├── App.js
│ ├── index.css
│ └── index.js
│
├── .gitignore
├── package-lock.json
├── package.json
└── README.md
```
## Project Features
- **Fetch Random User**: Uses Axios to fetch random user data from the `https://randomuser.me/api/` and displays it on the screen.
- **Display User Information**: Shows user details including name, email, age, location, phone number, and password.
- **Add User**: Allows users to save the displayed user information for later viewing.
- **New User Button**: Fetches and displays a new random user each time the button is clicked.
- **State Management**: Utilizes `useState` to manage the application’s state, particularly for storing user data.
- **Effect Hook**: Implements `useEffect` to fetch user data on initial render and when the "New User" button is clicked.
- **Styling**: Custom styling with CSS for layout and React Bootstrap for responsive design and table components.
## Outcome
## Technologies Used
- **ReactJS**: Used for building the user interface. Key React features include:
- **useState**: For managing the application's state.
- **useEffect**: For fetching data from the API during initial render and when specific conditions change.
- **Axios**: Used for making HTTP requests to the Random User API to fetch user data.
- **React Bootstrap**: Utilized for responsive design and table layout.
- **CSS**: Employed for custom styling to enhance the visual presentation of the app.
### At the end of the project, will be able to;
This project has significantly improved my skills in working with React hooks, particularly `useState` and `useEffect`, as well as integrating third-party APIs using `Axios`. By developing the "Random User App", I have gained practical experience in:
- Effectively managing `state and side effects in a React` application.
- `Fetching and displaying data` from an `external API using Axios`.
- Structuring a React application with reusable components.
- Utilizing `React Bootstrap` for responsive and functional UI elements.
These skills are fundamental for creating dynamic and data-driven web applications in the future.
📝 Happy Coding! 🌟