Introduction

Rx-Website is meticulously designed to assist users in efficiently searching for drugs based on specific criteria such as side effects, generic and brand names, and drug contents. Offering detailed insights into a diverse range of medications from A to Z, Rx-Website aims to provide accurate and up-to- date information, empowering individuals with informed decision-making. Additionally, the website goes beyond information dissemination by incorporating a feature that aids users in locating nearby pharmacies based on their geographical preferences. Rx-Website is your trusted destination for accessing detailed drug information and optimizing your pharmaceutical knowledge.

Technology Stack

Rx-Website leverages a robust technology stack to deliver a seamless user experience. Here are the key components:

Next.js: A full-stack React framework that enables server-side rendering, simplifies development, and unifies frontend and backend under a single project structure.

Typescript: A statically typed superset of JavaScript that enhances code quality and maintainability.

ChakraUI: A UI component library that streamlines the design and development process.

MeiliSearch: MeiliSearch is an open-source, fast, and relevant search engine designed for developers, providing robust full-text search capabilities with easy integration into various applications and websites.

@react-hookz/web: It is a library of general-purpose React hooks designed with care and SSR compatibility in mind

Engine Separation Strategy

The engine separation strategy in Rx-website focuses on decoupling the core application logic from external dependencies. Here's how it's achieved:

Components: The website adopts a component- based architecture, organizing the application into reusable components.

Routes: Dynamic routing is seamlessly integrated with Next.js built-in routing, providing a smooth user experience. Each drug has its dynamically generated page, enhancing user interaction and navigation

SSR: Server-Side Rendering (SSR) is employed for dynamic routes, optimizing performance by fetching data during the server-rendering process. This ensures a faster and more responsive user experience.

Data: A dedicated folder housing JSON file containing comprehensive information about each drug.

Challenges and Solutions

Challenge: Implementing full-text search for a vast database of over 40 thousand drugs.

Solution: Utilized react-hookz/web's useDebouncedEffect to manage the search input effectively, ensuring a smooth and performant full-text search experience.

Achievements

Dynamic Page Generation with SSR: Successfully implemented Server-Side Rendering (SSR) for generating dynamic pages for each drug. This approach ensures optimal performance and real-time data fetching, providing a responsive and dynamic user experience.

Meilisearch Integration: Achieved lightning-fast search capabilities by seamlessly integrating Meilisearch for full-text search functionality, enhancing user experience and efficiency in searching through a vast database of over 40 thousand drugs.

Key Learning

Modularity Matters: Breaking down the website into smaller, manageable pieces simplifies development.

User-Centric Design: Prioritizing user needs and preferences, such as efficient drug searching and location-based features, is crucial for enhancing user engagement and satisfaction.

Efficient Full-Text Search Capability: Learning: Integrating MeiliSearch provides a robust and efficient solution for full-text search in a large database.

Conclusion

In conclusion, Rx-Website has been meticulously crafted to cater to users seeking accurate and up-to-date drug information. With a focus on user- friendly design, efficient search capabilities, and dynamic page generation, the platform empowers individuals to make informed decisions about pharmaceuticals. Rx-Website goes beyond information dissemination, offering a reliable destination for optimizing pharmaceutical knowledge and enhancing the overall user experience.