# Product Listing Web Application

A responsive web application that displays a paginated product listing with data fetched from a REST API.

## Features

- Product listing with pagination
- Category filtering
- Sorting options (price, name)
- Search functionality
- Responsive design
- Login and account creation pages

## Project Structure

```
product-listing-app/
├── index.html         # Main product listing page
├── login.html         # User login page
├── register.html      # Account creation page
├── styles.css         # Shared styles
├── app.js             # JavaScript for product listing functionality
└── README.md          # Project documentation
```

## API Integration

The application uses the [Fake Store API](https://fakestoreapi.com) for demonstration purposes. In a production environment, you would replace this with your actual product API.

## How It Works

1. The application fetches product data from the API when the page loads
2. Products are displayed in a grid with pagination (8 products per page)
3. Users can filter products by category
4. Users can sort products by price or name
5. Users can search for products by entering keywords in the search bar
6. Navigation between pages is handled by the pagination controls
7. Login and registration forms are included (frontend only)

## Getting Started

1. Clone or download this repository
2. Open `index.html` in your web browser
3. Browse the product listing, test filters and pagination
4. Navigate to login or registration pages using the header links

## Customization

To use your own API:
1. Open `app.js`
2. Change the `API_URL` constant to your API endpoint
3. Adjust the data mapping in the `renderProducts()` function to match your API's response format

## Browser Compatibility

This application is compatible with:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

This project is available for personal and commercial use.