https://github.com/ostrynska/user-table-app
React + TypeScript app with MUI DataGrid, server-side pagination, filtering, and responsive design using the Random User API.
https://github.com/ostrynska/user-table-app
mui random-users-api react typescript
Last synced: 6 months ago
JSON representation
React + TypeScript app with MUI DataGrid, server-side pagination, filtering, and responsive design using the Random User API.
- Host: GitHub
- URL: https://github.com/ostrynska/user-table-app
- Owner: Ostrynska
- Created: 2025-08-05T12:37:23.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-08-07T13:19:48.000Z (8 months ago)
- Last Synced: 2025-08-07T14:27:37.871Z (8 months ago)
- Topics: mui, random-users-api, react, typescript
- Language: TypeScript
- Homepage: https://cozy-kheer-a9fbc7.netlify.app/
- Size: 139 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Test Task: Random Users Table (React + TypeScript)
This project displays user data using the MUI DataGrid component and fetches users from the [Random User API](https://randomuser.me/) with filtering options (gender, nationality).
Pagination and filters are passed to the API via query parameters, and the table updates automatically when the page or filter changes.
The table includes the following columns:
| First Name | Last Name | Gender | Email | Nationality |
|------------|-----------|--------|-------|-------------|
## Features
- ✅ **Server-side Pagination**
- ✅ **Server-side Filtering**
- Gender (All, Male, Female)
- Nationality (select from 5)
- ✅ **Responsive Design (Material UI)**
- ✅ **Theme switcher**
- ✅ **Reusable Components (e.g., GenderFilter, NationalityFilter)**
- ✅ **TypeScript types for API responses**
- ✅ **Reset Filters button**
- ✅ **Persist current page and filters in URL query parameters**
- ✅ **Error handling & loading states**
## Tech Stack
| Layer | Tools |
|-------------|---------------------------------------|
| Frontend | React, TypeScript, Vite, React Hooks |
| API | Random User API |
| Styling | Material UI (MUI) |
## Running the Project
### 1. Clone & install
```bash
git clone https://github.com/Ostrynska/user-table-app.git
cd user-table-app
npm install
```
### 2. Build & run the project
```bash
npm run build
npm run dev
```
The app will be available at http://localhost:5173
## Author
**Kateryna Ostrynska**
[GitHub](https://github.com/Ostrynska) | [Portfolio](https://ostrynska-kateryna.netlify.app)