https://github.com/fatihycan/random-user-app
https://github.com/fatihycan/random-user-app
axios bootstrap css3 html5 javascript random-user-generator-api react react-icons state-management sweetalert2 useeffect-hook usestate-hook
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fatihycan/random-user-app
- Owner: FatihYcan
- Created: 2024-08-24T13:50:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-24T14:24:42.000Z (almost 2 years ago)
- Last Synced: 2025-10-29T06:29:47.213Z (8 months ago)
- Topics: axios, bootstrap, css3, html5, javascript, random-user-generator-api, react, react-icons, state-management, sweetalert2, useeffect-hook, usestate-hook
- Language: JavaScript
- Homepage: https://fy-random-user-app.netlify.app/
- Size: 170 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Random User App
This project is a simple random user application made using React.js and Bootstrap. It retrieves random user data using the [Randomuser.me](https://randomuser.me/) API and provides various information to the user.
## Features
- **Random User Display:** The application retrieves random user information from the [Randomuser.me](https://randomuser.me/) API and displays it to users.
- **Showing User Information:** Users can view information such as the user's name, e-mail address, age, address, phone number and password by hovering over the icons.
- **Getting a New User:** Users can get a new random user data by clicking the **New User** button.
- **Adding User:** Users can add the current user to the list by clicking the **Add User** button.
- **Listing User Information:** The information of the added users is displayed in a table, so users can easily follow the information of the added people.
- **Cannot Be Added Again Warning:** When a user who has previously been added to the table is tried to be added again, a warning message is displayed on the screen with SweetAlert2.
- **Loading Screen:** 'Loading' text is displayed while the page is loading or new user information is retrieved.
## Technologies
- HTML5
- CSS3
- Javascript
- React
- Bootstrap
- Axios
- SweetAlert2
- [Randomuser.me API](https://randomuser.me/)
# Random User App
Bu proje, React.js ve Bootstrap kullanarak yapılmış basit bir rastgele kullanıcı uygulamasıdır. [Randomuser.me](https://randomuser.me/) API'sini kullanarak rastgele kullanıcı verilerini alır ve kullanıcıya çeşitli bilgiler sunar.
## Özellikler
- **Rastgele Kullanıcı Görüntüleme:** Uygulama, [Randomuser.me](https://randomuser.me/) API'sinden rastgele kullanıcı bilgilerini alarak kullanıcılara gösterir.
- **Kullanıcı Bilgilerini Gösterme:** Kullanıcılar, iconların üstüne gelerek kullanıcının adı, e-posta adresi, yaşı, adresi, telefonu ve şifresi gibi bilgileri görüntüleyebilirler.
- **Yeni Kullanıcı Getirme:** Kullanıcılar, **New User** butonuna tıklayarak yeni bir rastgele kullanıcı verisi alabilirler.
- **Kullanıcı Ekleme:** Kullanıcılar, **Add User** butonuna tıklayarak mevcut kullanıcıyı listeye ekleyebilirler.
- **Kullanıcı Bilgilerini Listeleme:** Eklenen kullanıcıların bilgileri bir tablo şeklinde görüntülenir, böylece kullanıcılar eklenen kişilerin bilgilerini kolayca takip edebilirler.
- **Tekrar Eklenemez Uyarısı:** Tabloya daha önce eklenmiş bir kullanıcı tekrar eklenmeye çalışıldığında, SweetAlert2 ile ekrana bir uyarı mesajı gösterilir.
- **Loading Ekranı:** Sayfa yüklenirken veya yeni kullanıcı bilgileri çekilirken "Loading" yazısı gösterilir.
## Teknolojiler
- HTML5
- CSS3
- Javascript
- React
- Bootstrap
- Axios
- SweetAlert2
- [Randomuser.me API](https://randomuser.me/)
https://github.com/user-attachments/assets/f9413104-5641-497b-9eec-380bc05f433b
[Live](https://fy-random-user-app.netlify.app/)