⚕️ Medicine Finder

A modern Angular healthcare application that allows users to search medicines, view usage information, side effects, drug interactions, and save favorites locally.

Built using the latest Angular standalone architecture with RxJS, Signals, OpenFDA API integration, and modern UI design.

---

✨ Features

✅ Search medicines instantly
✅ Debounced API search using RxJS
✅ View:

• Usage instructions
• Drug warnings
• Drug interactions

✅ Save favorite medicines
✅ LocalStorage persistence
✅ Responsive modern UI
✅ Glassmorphism design
✅ Angular Signals state management
✅ Functional HTTP interceptors
✅ Error handling
✅ Empty state UI
✅ Reusable standalone components

---

🛠 Tech Stack

• Angular 17+
• TypeScript
• RxJS
• OpenFDA API
• CSS3
• Angular Signals
• Standalone Components

---

📸 UI Preview

Home Page

• Modern healthcare dashboard UI
• Live medicine search
• Animated glowing branding
• Responsive medicine cards

Favorites Page

• Saved medicines
• Remove favorites
• Local browser persistence

---

🚀 Getting Started

1. Clone Repository

git clone https://github.com/aadityamp01/medicine-finder.git

---

2. Navigate Into Project

cd medicine-finder

---

3. Install Dependencies

npm install

---

4. Add OpenFDA API Key

Create:

src/environments/environment.ts

Add:

export const environment = {

  production: false,

  openFdaApiKey: 'YOUR_API_KEY',

  apiUrl: 'https://api.fda.gov/drug/label.json'
};

---

5. Start Development Server

ng serve

Open:

http://localhost:4200

---

📂 Project Structure

src/app
│
├── components
│   ├── medicine-card
│   ├── search-bar
│   ├── loading-spinner
│   └── pagination
│
├── interceptors
│   └── loading-interceptor.ts
│
├── models
│
├── pages
│   ├── home
│   └── favorites
│
├── services
│   ├── medicine.ts
│   ├── favorites.ts
│   └── cache.ts
│
├── app.config.ts
├── app.routes.ts
│
└── styles.css

---

📚 Angular Concepts Used

Standalone Components

Modern Angular architecture without NgModules.

---

RxJS

Used for:

• debounceTime
• distinctUntilChanged
• switchMap
• Observables

---

Signals

Modern Angular state management:

medicines = signal<any[]>([]);

---

Functional Interceptors

Global HTTP request handling using:

withInterceptors()

---

HTTP Client + Fetch API

Configured using:

withFetch()

---

🔥 API Used

OpenFDA API

Official Documentation:

https://open.fda.gov/apis/

---

💾 Favorites Storage

Favorites are stored locally using:

localStorage

No backend required.

---

🎨 UI Features

• Glassmorphism cards
• Neon glow branding
• Gradient typography
• Responsive layouts
• Hover animations
• Modern SaaS healthcare design

---

🧠 What I Learned

This project helped practice:

• Angular standalone architecture
• RxJS reactive programming
• API integration
• Signals
• Component communication
• State management
• Error handling
• Responsive UI design
• LocalStorage persistence
• Angular routing

---

🔮 Future Improvements

• Authentication
• Pagination controls
• Infinite scroll
• Toast notifications
• Dark/light theme toggle
• AI medicine assistant
• Medicine comparison
• PWA support
• Unit testing
• Backend integration

---

🤝 Contributing

Pull requests are welcome.

For major changes, please open an issue first.

---

📄 License

MIT License

---

👨‍💻 Author

Built with ❤️ using Angular and OpenFDA API.