React + TypeScript + Vite Project

A modern, feature-rich React application built with Vite, TypeScript, and cutting-edge technologies for managing and displaying user and product data.

🚀 Features

✅ React 19 with TypeScript for type-safe development
✅ Vite 7 for lightning-fast development and building
✅ React Router DOM 7 for client-side routing
✅ Axios for HTTP requests with request/response interceptors
✅ Context API for global state management
✅ Tailwind CSS v4 for modern utility-first styling
✅ Ant Design 5 for professional UI components
✅ Reusable DataTable Component with advanced features:
- Server-side pagination
- Dynamic page size selection (5, 10, 20, 50)
- Server-side filtering (key-value pairs)
- Client-side search functionality
- Custom color scheme
✅ Tab Navigation for categorized product views
✅ Field Selection via query parameters for optimized API responses
✅ Responsive design with custom styling

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher recommended)
npm (v9 or higher) or yarn

🛠️ Installation & Setup

1. Clone or Download the Project

git clone <repository-url>
cd astudio-task

2. Install Dependencies

npm install

This will install all required dependencies including:

React, React DOM, React Router DOM
Axios for API calls
Ant Design for UI components
Tailwind CSS v4 for styling
TypeScript and all type definitions

3. Start Development Server

npm run dev

The application will start at http://localhost:5173/

4. Build for Production

npm run build

5. Preview Production Build

npm run preview

📁 Project Structure

astudio-task/
├── src/
│   ├── api/
│   │   ├── axios.ts              # Axios instance with interceptors
│   │   ├── userService.ts        # User API service with filters & select fields
│   │   └── productService.ts     # Product API service with category support
│   ├── components/
│   │   ├── DataTable.tsx         # Reusable table with pagination, filters, search
│   │   ├── DataTable.css         # Custom table styling
│   │   ├── TabComponent.tsx      # Reusable tab wrapper component
│   │   ├── TabComponent.css      # Tab styling
│   │   └── Navbar.tsx            # Navigation bar
│   ├── context/
│   │   └── AppContext.tsx        # Global state management with Context API
│   ├── pages/
│   │   ├── Home.tsx              # Landing page
│   │   ├── Users.tsx             # Users table with 9 columns
│   │   └── Products.tsx          # Products with tabs (All/Laptops)
│   ├── App.tsx                   # Main app with routing configuration
│   ├── App.css                   # App-level styles
│   ├── main.tsx                  # Application entry point
│   └── index.css                 # Global styles with Tailwind imports
├── public/                       # Static assets
├── index.html                    # HTML template
├── package.json                  # Dependencies and scripts
├── tsconfig.json                 # TypeScript configuration
├── tailwind.config.js            # Tailwind CSS configuration
├── postcss.config.js             # PostCSS configuration for Tailwind v4
└── vite.config.ts                # Vite configuration

🌐 API Integration

The project uses DummyJSON API for data:

Users Endpoint

Base URL: https://dummyjson.com/users
Features: Pagination, filtering, field selection
Example: https://dummyjson.com/users?limit=10&skip=0&select=firstName,lastName,age,gender,email,username,bloodGroup,eyeColor,maidenName

Products Endpoints

All Products: https://dummyjson.com/products
Category Products: https://dummyjson.com/products/category/laptops
Features: Pagination, filtering, field selection, category filtering
Example: https://dummyjson.com/products?limit=10&skip=0&select=title,brand,category

API Service Features

✅ Automatic request/response interceptors
✅ Error handling
✅ Dynamic query parameter building
✅ Server-side filtering with key-value pairs
✅ Field selection for optimized responses
✅ Category-based product fetching

🎨 UI Features

Users Page

Displays a table with 9 columns:

First Name
Last Name
Maiden Name
Age
Gender
Email
Username
Blood Group
Eye Color

Features:

Server-side pagination (10 items per page default)
Adjustable page size (5, 10, 20, 50)
Filters: firstName, age, gender
Client-side search across all fields
Custom color scheme

Products Page

Displays products with tabbed navigation:

Tabs:

All: Shows all products from /products
Laptops: Shows only laptops from /products/category/laptops

Columns:

Title
Brand
Category

Features:

Server-side pagination (10 items per page default)
Adjustable page size (5, 10, 20, 50)
Filters: title, brand, category
Client-side search across all fields
Tab switching resets pagination
Filters work independently in each tab

Custom Color Scheme

Black: #322625
Grey: #ebebeb
Blue: #c0e3e5
Yellow: #fdc936

🧩 Key Components

DataTable Component

A highly reusable table component with props:

data: Array of items to display
columns: Column definitions
loading: Loading state
total: Total number of items for pagination
pageSize: Current page size
currentPage: Current page number
onPageChange: Page change handler
onPageSizeChange: Page size change handler
onSearch: Search handler
onFilterChange: Filter change handler
filters: Array of filter field definitions

TabComponent

A reusable tab wrapper with props:

items: Array of tab items (key, label, children)
activeKey: Currently active tab key
onChange: Tab change handler
defaultActiveKey: Default tab (optional)

📝 Available Scripts

Command	Description
`npm run dev`	Start development server at http://localhost:5173
`npm run build`	Build for production (outputs to `dist/`)
`npm run preview`	Preview production build locally
`npm run lint`	Run ESLint to check code quality

🔧 Configuration Files

TypeScript (`tsconfig.json`)

Configured for strict type checking and React development.

Tailwind CSS (`tailwind.config.js`)

Content paths configured for all .tsx and .ts files
Extensible theme configuration
Tailwind CSS v4 with PostCSS plugin

Vite (`vite.config.ts`)

React plugin enabled
Fast refresh for development
Optimized build output

🧪 Testing the Application

1. Navigate to Home Page

Visit http://localhost:5173/
You should see the home page with navigation links

2. Test Users Page

Click "Users" in the navbar
Verify the table loads with 10 users
Try changing page size (5, 10, 20, 50)
Test pagination by navigating pages
Apply a filter (e.g., firstName = "Emily")
Use the search feature to find specific users
Verify all 9 columns display correctly

3. Test Products Page

Click "Products" in the navbar
Verify "All" tab is active by default
Check that products load correctly
Switch to "Laptops" tab
Verify only laptops are displayed
Test pagination in both tabs
Apply filters (e.g., brand = "Apple")
Use search to find products
Change page size and verify it works

4. Test Navigation

Use the navbar to switch between pages
Verify routing works without page reload
Check that state persists appropriately

🐛 Troubleshooting

Development server won't start

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
npm run dev

Tailwind styles not applying

Ensure @import "tailwindcss"; is in src/index.css
Check that PostCSS config includes @tailwindcss/postcss
Restart dev server

API calls failing

Check network connection
Verify DummyJSON API is accessible: https://dummyjson.com/
Check browser console for error messages
Ensure axios interceptors are properly configured

TypeScript errors

# Check TypeScript compilation
npm run build

# Or run type checking
npx tsc --noEmit

📦 Dependencies

Production Dependencies

react (^19.1.1) - UI library
react-dom (^19.1.1) - React DOM rendering
react-router-dom (^7.9.4) - Routing
axios (^1.12.2) - HTTP client
antd (^5.27.4) - UI component library

Development Dependencies

vite (^7.1.7) - Build tool
typescript (~5.9.3) - Type safety
tailwindcss (^4.1.14) - CSS framework
@tailwindcss/postcss (^4.1.14) - Tailwind PostCSS plugin
@vitejs/plugin-react (^5.0.4) - React plugin for Vite
ESLint and related plugins for code quality

🎯 Features Highlights

Optimized API Calls: Uses select parameter to fetch only needed fields
Server-Side Filtering: Filters applied at API level for better performance
Reusable Components: DataTable and TabComponent can be used across the app
Type Safety: Full TypeScript coverage for all components and services
Modern Stack: Latest versions of React, Vite, and other libraries
Professional UI: Ant Design components with custom styling
Responsive Design: Works on desktop and mobile devices
Clean Architecture: Separated concerns (API, components, pages, context)

📄 License

MIT

👥 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📞 Support

For issues or questions, please open an issue in the repository.

Happy Coding! 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
public		public
src		src
.gitignore		.gitignore
README.md		README.md
TESTING_GUIDE.md		TESTING_GUIDE.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

muhammedmokbel/react-task-astudio

Folders and files

Latest commit

History

Repository files navigation