Skip to main content

​
Overview

EducaStream’s course catalog provides powerful tools to help you find the perfect courses for your learning journey. The platform displays courses in a paginated grid with comprehensive filtering and sorting options.

​
Searching for Courses

​
Search by Title

Use the search bar to find courses by name:
1

Locate the search input

At the top of the courses page, you’ll find a search bar with a magnifying glass icon.
2

Enter your search term

Type the course title or keywords you’re looking for. Results will update automatically as you type.
3

Clear the search

Delete your search text or click the “Restablecer” (Reset) button to return to all courses.
The search filters courses in real-time by making API requests to /courses?title={searchTerm}

​
Filtering Courses

​
Filter by Category

Narrow down courses by their subject category:
1

Open the category dropdown

Click on the “Categorías” dropdown menu in the filters section.
2

Select a category

Choose from available categories like Programming, Design, Business, etc.
3

View filtered results

The course list will update to show only courses in your selected category.
The system makes an API call to /courses?category={categoryName} to retrieve filtered results.

​
Sort by Price

Organize courses based on pricing:
  1. Click the “Ordenar por precio” (Sort by Price) dropdown
  2. Select your preferred sorting option:
    • Menor a mayor (ASC) - Low to high price
    • Mayor a menor (DESC) - High to low price
Use the price filter to find courses within your budget or discover premium offerings.

​
Resetting Filters

If you’ve applied multiple filters and want to start fresh:
  • Click the “Restablecer” (Reset) button
  • All filters (category, price sorting, and search) will be cleared
  • The course list returns to its default state

​
Course Display

​
Course Cards

Each course is displayed in a card format showing:
  • Course image - Visual thumbnail of the course
  • Title and category - Course name and subject area
  • Description - Brief overview of course content
  • Instructor information - Created by [Instructor Name]
  • Rating and reviews - Star rating and comment count
  • Course details - Number of classes and total duration
  • Pricing - Current price (with discount if on sale)
  • Action buttons - Options to add to cart or purchase

​
Pricing Display

Courses may show:
  • Regular price: US$99.99
  • Discounted price (if on sale): US$99.99 US$79.99
The discounted price is calculated based on the percentageDiscount field applied to courses on sale.

​
Pagination

The course catalog displays 10 courses per page:
  • Use Prev and Next buttons to navigate between pages
  • Click specific page numbers to jump directly to that page
  • Up to 5 page numbers are displayed at a time
  • The current page is highlighted for easy reference
When navigating to a new page, the view automatically scrolls to the top for better browsing experience.

​
Course Availability

Only enabled courses are visible in the catalog. If you see “No hay cursos disponibles” (No courses available), it means:
  • No courses match your current filters
  • There are no active courses in the system

​
Next Steps

Once you’ve found a course you’re interested in:

View Course Details

Click on a course card to see detailed information, curriculum, and enrollment options

Add to Cart

Add courses to your cart for bulk purchasing or checkout immediately

​
Technical Details

For developers integrating with the course browsing system: 
// Pagination configuration
const ITEMS_PER_PAGE = 10;
const MAX_PAGES_DISPLAYED = 5;

// API endpoints
GET /courses?category={categoryName}
GET /courses?title={searchTerm}
Course data is cached in localStorage under the key coursesData for improved performance.

Build docs developers (and LLMs) love

Get started for freeTalk to us