/Trademarkia-Search-Page

This is a replication of the Trademarkia search page built using React.js and Vite. It features a search bar, dynamic filters for owners, law firms, attorneys, and trademark statuses, and displays results using MUI DataGrid.

Primary LanguageJavaScript

Trademark Search Application

This project is a replication of the Trademarkia search page built with React.js and powered by Vite. It allows users to search for trademarks using various filters like owner, law firm, attorney, and status. It provides users with persistent search states for easy sharing, debounced search functionality to minimize API calls, and a fully responsive design that adheres to the provided Figma design. The application ensures smooth performance and user-friendly navigation with dynamic filtering and detailed search results.

🌐 Live Demo

You can check out the live version of the application deployed here:

Live Demo Link

⚙️ Deployment and CORS Instructions

Running Locally

If you'd like to run this project locally, follow the steps mentioned in the Installation and Setup section below. However, note that if you run the project locally, you may encounter CORS (Cross-Origin Resource Sharing) issues due to API restrictions.

To resolve this issue during local development:

  1. Install the CORS Unblock Chrome extension from this link.
  2. After installing, make sure to toggle the extension ON while working on this project locally.
  3. This will temporarily bypass the CORS restrictions in your browser for testing purposes.

⚠️ Note: You should not need this extension when using the live demo link as the app is configured correctly in production.

🛠️ Features

  • Search Bar: Users can search for trademarks, and the search query is debounced to prevent excessive API calls.
  • Filters: Dynamic filtering for Owners, Law Firms, Attorneys, and Status of the trademarks.
  • Loading States: While fetching data, a loader is displayed.
  • Dynamic Results: Trademarks are displayed dynamically using MUI's DataGrid.
  • Responsive Design: The layout is fully responsive and adapts to different screen sizes.
  • Persistent Sharing (Bonus*): Users can share or bookmark search states with filters and query parameters for easy access.
  • Search Suggestions: Relevant suggestions are provided when no results are found, guiding the user for better searches.

🔧 Tech Stack

  • Frontend: React.js, Vite, MUI (Material UI)
  • State Management: React Context API
  • API: Axios for making HTTP requests
  • CSS Framework: Material UI
  • Routing: React Router Dom for handling routes (if applicable)

🧑‍💻 Installation and Setup

To set up and run this project locally, follow these steps:

Clone the repository:


git clone https://github.com/your-repo-name.git

Navigate to the project directory:


cd your-repo-name

Install dependencies:


npm install

Start the development server:


npm run dev

After running npm run dev, the project will be available at http://localhost:3000. You can now view and test the application locally.

Make sure to use the CORS Unblock extension if you run into any CORS issues as mentioned above.