search-frontend

Search Frontend

This repository contains the Search Frontend application, a Next.js project designed to provide an intuitive and efficient interface for interacting with a search engine backend. With optimized server-side rendering, this frontend delivers fast, responsive search results to users in real-time.

Project Overview

The Search Frontend serves as the user interface for interacting with search results provided by the backend. It’s built with Next.js for performance, SEO optimization, and scalability. The app provides users with an experience tailored for efficient searching and data exploration.

Partner at Knowlecy

Jialun Lyu, Co-owner CTO, Primary Contact
An AI powered search engine for paper to help academic researchers to perform literature reviews and search for technical answers with high confidence.

Features

Real-Time Search: Search through extensive datasets quickly.
- Search Home Page: The search page contains a minimalistic search bar where queries can be added, rerouting the query to the search page to display a list of results for the given query.
- Search Results Page: The results page displays paginated results with 10 per page for the given search query each with its own Citation, DOI, and PDF links if applicable and as clickable cards that allow a popup for further detail on the academic source. The total number of resutls fetched is displayed under the search bar under "Result:". The company logo at the bottom of page reroutes to the original Search Home Page and a new Search Query can also be entered in the search bar above at any time. Filter options can also be selected from the blue filter button under the search bar. Sources can be filtered by Author name, Venue, and published Date options by year. All filters and queries will update in the URL, as well as in the search bar for query, and Filter menu will display the number of filters selected.
- Citations, DOI, PDF links and export: Citations are copied to clipboard when clicking the citation button. DOI and PDF links to the DOI and URL links provided for the specific academic source.
- Detailed Results Page: When clicking on any individual result on the Search Results Page, a popup will be displayed showing more detail for the source, featuring a full Abstract and TLDR, as well as journal name, author, and tags based on data. Links to Citations, DOI and PDF will also be aviable on this page under the title, and authors information. Below that will be a section for the number of total citations, and the rating buttons.
- Tags based on ratings/citations: If there is a positive like to dislike ration there will be a highly rated tag, if there are more than 100 citations for a given source there will be a highly cited tag. These act as indicators for the quality of a source for a user query.
- Likes and Dislikes Rating: Like and Dislikes buttons are clickable and allow users to rate a source positively or negatively depending on their experience.
Responsive Design: A layout that works smoothly across desktops, tablets, and mobile devices.
Server-Side Rendering: Improved SEO and faster initial load times using Next.js.
Modular Components: Reusable components for streamlined development and maintenance.
Pagination and Filters: Enhanced navigation and filtering to refine results.

Getting Started

To run this project locally, ensure you have Node.js installed. Follow these steps:

Prerequisites

Node.js: Download and install Node.js. NPM: This usually comes with Node.js. Verify by running npm -v in your terminal.

Installation

Clone the Repository:

git clone https://github.com/csc301-2024-f/search-frontend.git
cd search-frontend

Install Dependencies:

npm install

Run the Development Server:

npm run dev

Open http://localhost:3000 or if it is taken, the console will display the local host linek and port to view the app in your browser.

Local Deployment Using Github Containers

Pull the Docker image from GitHub Container Registry:

docker login ghcr.io -u $username
docker pull ghcr.io/csc301-2024-f/search-frontend:main

Running the Docker Image

docker run -p 3000:3000 ghcr.io/csc301-2024-f/search-frontend:main

Access the Web App at http://localhost:3000 or if it is taken, the console will display the local host linek and port to view the app in your browser.

Demo Link:

Instructions:

First make your way to the link that was created when running the development sesrver in the Installation part. It should display a page similar to this:
Then enter any search query and press enter or press the magnifying glass icon to search. This will bring you to the results page. The totals results will be listed under the search bar, as well as filter and sort by options to suit your needs. The filters will update in the url above for easy copy and pasting to remember queries.
Each result has a like and dislike button to rate your satisfaction with the result. Colors and the change in likes and dislikes will represent your like and dislike being recorded. If available, citations, DOI links and PDF links will be provided by clicking on the respective buttons with the matching descriptions. The blue Expand text will expand the abstract to get a better look at the content of the academic source.
Should you want to take a closer look, by clicking on the underlined title, or the card, a popup with detailed information will appeaer.
This popup features the same buttons as before, as well as descriptive tags. If a source has a positive like to dislike ratio, i.e. more likes than dislikes, then there will be a "Highly Rated" Tag. If there are more than 100 citations there will be a "Highly Cited" tag. These can be used to help filter out what sources to use.
The popup can be closed at any time by clicking the "x" at the top right.
If you would like to search another query you can do so any time by clicking the logo at the bottom of the page, or by entering a query into the search bar at the top.

Coding Standards and Guidelines

Error handling exceptions: Errors handled gracefully, and section by section so it if errors occur it remains clear where it occured and why.
Naming conventions for local variables, global variables, constants and functions: meaningful and understandable names. Global constants using all capitals.

Contributing

Contributions are welcome! If you’d like to improve or add new features, feel free to submit a pull request.