https://github.com/kumarabhishek188/assignment---web-tree-pvt-ltd
A React-based user profile app that fetches random user data from the Random User API and displays it in an attractive and interactive profile card.
https://github.com/kumarabhishek188/assignment---web-tree-pvt-ltd
Last synced: 4 months ago
JSON representation
A React-based user profile app that fetches random user data from the Random User API and displays it in an attractive and interactive profile card.
- Host: GitHub
- URL: https://github.com/kumarabhishek188/assignment---web-tree-pvt-ltd
- Owner: kumarabhishek188
- Created: 2024-12-25T11:06:40.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-25T11:16:21.000Z (6 months ago)
- Last Synced: 2024-12-25T12:19:48.201Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 170 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# User Profile App
A React-based user profile app that fetches random user data from the [Random User API](https://randomuser.me/) and displays it in an attractive and interactive profile card.
## Features
- **Random User Profile**: Fetches random user data, including name, gender, and phone number.
- **Responsive Design**: The profile card is responsive and adjusts to different screen sizes.
- **Vibrant Gradient Background**: A dynamic gradient background for a more visually appealing UI.
- **Profile Image with Hover Effects**: The profile image has a glowing border effect on hover.
- **Smooth Animations**: The profile card smoothly grows on hover and fades in on page load.
- **Interactive Hover Effects**: Name, gender, and phone details change color on hover for better interactivity.
## Technologies Used
- **React**: For building the user interface.
- **Tailwind CSS**: For utility-first CSS styling.
- **Random User API**: To fetch random user data.
## Installation
### Prerequisites
Make sure you have [Node.js](https://nodejs.org/) installed on your machine.
### 1. Clone the repository:
```bash
git clone https://github.com/kumarabhishek188/user-profile-app.git
```
### 2. Navigate into the project folder:
```bash
cd user-profile-app
```
### 3. Install dependencies:
``` bash
npm install
```
### 4. Run the app:
``` bash
npm start
```