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! 🌟