AI Tools Catalogue Web Application Documentation

Overview

The AI Tools Catalogue is a responsive web application that showcases a variety of AI-powered tools categorized by use-case. Users can browse, search, and filter through AI tools to find those that best suit their needs, with the ability to distinguish between free and paid options.

Features

• Responsive Design: Ensures the website is accessible on devices of varying screen sizes.
• Search Functionality: Users can search for tools using keywords or phrases.
• Category Filtering: Users can select categories to filter the AI tools displayed.
• Price Filtering: A toggle switch allows users to filter tools by their pricing model, showing either all, free, or paid tools.

Components

• Header: Displays the main branding and title of the web application.
• Footer: Contains attribution and additional information about the web application.
• SearchBar: An input field for users to type in and search for AI tools.
• CategoryList: A horizontal scrollable list of categories for filtering the displayed AI tools.
• Card: A visual representation of each AI tool providing key information such as the name, description, use case, and tags.
• ToggleSwitch: A custom UI component that allows users to switch between viewing all tools or only free tools.

Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js
• NPM or Yarn package manager

Installation

1. Clone the repository to your local machine:

   git clone https://example.com/your-repo.git

2. Navigate to the project directory:

   cd ai-tools-catalogue

3. Install the necessary packages:

   npm install

4. Run the application in development mode:

   npm run dev

The application will start running on http://localhost:3000.

Usage

• Viewing Tools: Scroll through the homepage to view the AI tools.
• Searching: Enter a keyword in the search bar to filter the tools by title.
• Filtering by Category: Click a category button to display tools related to that category.
• Filtering by Price: Use the toggle switch to display either all tools or only the free tools.

Contact Information

For any additional questions or comments, please reach out through:

• Email: robert.smrek@student.tuke.sk