Documentation for Frontend Process

Format

• Each page is under its own folder, i.e., src/app/search, with a page.tsx file under each directory to fit the app-router format.

Design and Logic

• The design is based on a modular format. Each page and item, such as SearchBar or SearchSideBar, is broken up into its own components within src/modules/search/components. This keeps the design clean and readable, allows for edits without breaking the code, and provides the ability to reuse components in other locations with different inputs, without repetitive code.
• Searches start at src/app/page.tsx within the SearchInterface object, which contains the homepage as well as the SearchBar.
• Entering a query in the search bar reroutes the URL to BASEURL/search?q=..., where ... represents the query entered in the search bar. This routes to src/app/search/page.tsx for handling search results.
• This page contains the FilterPopup and MainSearchResults components, which hold the filters and the main search results part of this page, respectively.
• The MainSearchResults component includes the SearchBar component so the SearchBar is always at the top of the screen and can be used whenever the user wishes. The SearchSideBar is also included, similar to the homepage. The key difference on this page is the SearchResults component, which is a list of IndividualResult components. Each result is mapped to data fetched from backend APIs using src/modules/search/utils/resultsFetcher.ts and src/modules/search/utils/jsonParser.ts to first fetch the results and then map them into object form, making them readable as JSON objects.
• Inside src/modules/search/components/IndividualResult/IndividualResult.tsx is where each result is separately handled. Each result has its own features, such as buttons for citation, DOI, and PDF links, as well as like and dislike options. Clicking on an individual result—on the title or anywhere on the card not reserved for other buttons—will open a modal popup. This popup was requested by the partner and displays a more detailed view of the result in a clean and efficient design.
• The modal features additional tags that have conditions:
  • High Approval Rating: Requires a positive like ratio to be visible.
  • Highly Cited: Requires a citation count greater than 100.
• Modal CSS is handled in src/modules/search/components/IndividualResult/IndividualResult.module.css and is modeled after the clean design requested by the partner.

Project File Organization

The files are structured following Knowlecy's conventions to facilitate integration and reduce development costs. Each module is organized into:

1. APIs: Interfaces to communicate with the backend and other microservices, ensuring seamless data exchange.
2. Components: Each component comes with a corresponding .module.css file for styling and an index.ts file for exporting. These components perform meaningful functions in the program and are reusable across different modules.
3. DTOs (Data Transfer Objects): These entities are used for transferring data through various business logic layers. Encapsulation ensures data is manipulated consistently and meaningfully throughout the frontend.
4. Utils: Utility functions that support the core logic, such as fetching data, parsing JSON, or managing UI-specific logic.

This organization promotes modularity, reusability, and maintainability, ensuring that the project remains scalable.

Deployment

Deployment is handled through GitHub Actions and Docker:

1. GitHub Actions: CI/CD pipelines are defined to automate testing, build processes, and deployment triggers.
2. Docker: A Dockerfile is used to containerize the application. The Docker image is published to the GitHub Container Registry, enabling consistent environments across development and production.
3. Vercel: The application is continuously deployed via Vercel, leveraging its seamless Next.js integration for fast and reliable deployments.

Testing Infrastructure

The testing strategy ensures quality and reliability:

1. API Testing: Postman is used for testing API endpoints. API requests and responses are verified manually during development to ensure backend integration functions as expected. Collections and environments are created in Postman to organize and automate API test cases.
2. Static Analysis: Linting (via ESLint) and type-checking (via TypeScript) ensure code quality and prevent common errors.
3. Automated Tests in CI: All tests are executed in the CI pipeline through GitHub Actions, ensuring that only tested and verified code is deployed.

Frontend Workflows

1. Next.js Project: Utilizes React components to maintain a modular architecture.
2. Docker Image CI: A Dockerfile defines how the project is containerized and deployed to the GitHub Container Registry.
3. Vercel Deployment: Continuous deployment with seamless integration for Next.js projects.

By incorporating Postman for API testing and adhering to these workflows, the frontend ensures efficiency, reliability, and scalability.