Course Catalog

A responsive React application that retrieves a course catalog from an external API and helps users explore learning content by category.

View the live application

Features

• Fetches course data from a REST API.
• Filters courses by All, Development, Business, Design, and Lifestyle.
• Supports liking and unliking individual courses.
• Provides loading, empty, and API-error states.
• Uses toast notifications for user feedback.
• Presents course cards in a responsive Tailwind CSS layout.

Technology

• React
• JavaScript
• Tailwind CSS
• React Toastify
• React Icons
• REST API integration

Application Flow

1. The application requests the current course catalog.
2. Course data is grouped and displayed as reusable cards.
3. Category controls filter the visible courses.
4. Users can like or unlike courses and receive immediate feedback.

Run Locally

git clone https://github.com/Kinjalk267/Course_app.git
cd Course_app
npm install
npm start

Open http://localhost:3000 in your browser.

Project Structure

src/
├── components/    Reusable cards, filters, navigation, and loading UI
├── App.js         Data fetching and application state
├── data.js        API endpoint and category configuration
└── index.js       Application entry point

Data Source

Course data is loaded from the CodeHelp course API configured in src/data.js. If that external service is unavailable, the application displays an error notification.