Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Emmanuel-Mtz-777/TechStore-Explorer/llms.txt

Use this file to discover all available pages before exploring further.

The product browser is powered by three coordinated Livewire components that communicate entirely through browser events — no page reload required. Products are fetched on the fly from the Platzi Fake Store API, and users can narrow results by category or move through pages at any time.

​
How it works

The product listing page composes three independent Livewire components. Each has a single responsibility and communicates with its siblings by dispatching or listening for named browser events.
1

ProductsList — fetches and renders the product grid

App\Livewire\Components\Products\ProductsList is the central component. On mount it immediately calls loadProducts(), which hits the Platzi Fake Store API with the current offset and limit values. It re-fetches whenever it receives a paginationChanged or categorySelected event from its siblings.When a category is active, the component switches to the category-scoped endpoint (/categories/{id}/products). When a category is cleared it falls back to the global products endpoint. Selecting a new category also resets the offset to 0 so the user always starts at the first page of results.
#[On('paginationChanged')]
public function paginationChanged(int $offset, int $limit)
{
    $this->offset = $offset;
    $this->limit = $limit;

    $this->loadProducts();
}

#[On('categorySelected')]
public function categorySelected(string $category)
{
    $this->category = $category;
    $this->offset = 0;

    $this->loadProducts();
}
2

CategoryFilter — loads categories and dispatches selection events

App\Livewire\Components\Products\CategoryFilter fetches the full category list from https://api.escuelajs.co/api/v1/categories once on mount and renders them as a selectable list. Whenever $selectedCategory changes (via Livewire’s updatedSelectedCategory hook), it dispatches a categorySelected event carrying the chosen category ID as a string.
public function mount()
{
    $this->categories = Http::get('https://api.escuelajs.co/api/v1/categories')->json();
}

public function updatedSelectedCategory()
{
    $this->dispatch(
        'categorySelected',
        category: $this->selectedCategory
    );
}
3

Pagination — manages offset and dispatches page-change events

App\Livewire\Components\Products\Pagination owns the offset and limit state for navigation. Calling next() advances the offset by one page; previous() steps back, clamping at 0 so the offset never goes negative. Both actions dispatch a paginationChanged event with the new values.
public function next()
{
    $this->offset += $this->limit;
    $this->dispatch('paginationChanged', $this->offset, $this->limit);
}

public function previous()
{
    $this->offset -= $this->limit;
    if ($this->offset < 0) {
        $this->offset = 0;
    }
    $this->dispatch('paginationChanged', $this->offset, $this->limit);
}

​
Default settings

SettingValue
Products per page (limit)15
Starting offset0
API base URLhttps://api.escuelajs.co/api/v1/products
Category products URLhttps://api.escuelajs.co/api/v1/categories/{id}/products

​
Product detail page

The route GET /products/{id} is handled by ProductController@getProductById. It fetches a single product from https://api.escuelajs.co/api/v1/products/{id} and also checks whether the product already exists in the authenticated user’s wishlist, passing an $isFavorite boolean to the view. 
public function getProductById($id)
{
    $product = Http::get("https://api.escuelajs.co/api/v1/products/{$id}")->json();
    $isFavorite = Wishlist::where('user_id', auth()->id())
        ->where('product_id', $product['id'])
        ->exists();

    return view('products.show', compact('product', 'isFavorite'));
}
The welcome page at / is publicly accessible — anyone can browse products and view detail pages without an account. Wishlist actions (adding or removing a product) require the user to be logged in and to have a verified email address.

Build docs developers (and LLMs) love

Get started for freeTalk to us