Implement Gene Search Functionality and Gene Information Page

[gromdimon]

Problem:
Currently, the application lacks the functionality to search for a specific gene symbol in the database, limiting users' ability to retrieve gene-related information.

Proposed Solution:
We propose the implementation of a Gene Search feature along with a dedicated Gene Information Page. This will allow users to search for genes and view detailed gene information retrieved from the backend.

Details:

1. Start Page with Search Bar:

   • Create a start page that serves as the application's default landing page.
   • Add a user-friendly search bar on this page to enable users to enter gene symbols for searching.

2. Gene Information Page:

   • Develop a separate page dedicated to displaying gene information.
   • After a successful search, redirect the user to the Gene Information Page to view details about the searched gene.

3. Backend Integration:

   • Implement an API endpoint on the backend that handles gene search queries based on the provided gene symbol.
   • Ensure the backend retrieves gene information from the docker container and returns it in a structured format, preferably JSON.

4. Frontend Interaction:

   • Design the Gene Information Page to render the gene data received from the backend.
   • Use Vue.js components to display gene-related information in a clear and organized manner.

5. User Experience:

   • Enhance the user experience by adding loading indicators during the gene search process.
   • Handle cases where the search results may not be found, providing appropriate feedback to the user.

Additional Context:
To pay attention to: FastAPI, Vue.js and pinia.

[gromdimon]

Done