Drinks App is a white-label drinks application built with Angular v20. It displays a comprehensive list of alcoholic beverages along with their detailed recipes. The app is fully customizable via a JSON configuration file, allowing easy branding and seamless personalization for different clients.

• Drinks List: Displays drinks with images and names fetched from TheCocktailDB API.
• Drink Details: Shows drink image, name, ingredients, and instructions in all available languages, fetched from TheCocktailDB API.
• White-Label Configurable: The UI and content can be customized through config.json without needing to change code or rebuild the app.

• theme: Customize colors, fonts, and design system tokens used throughout the project.
• screens: Configure different pages/screens of the app.
• general: General settings that are not specific to any single page.
• api: Configuration for different APIs used within the project.

The app is deployed on GitHub Pages: https://khosravifatemeh.github.io/drink-app/

• Architecture: Modular and reusable components structure including.
  • core: Core services and utils
  • shared: Building block components
  • features: Feature modules like drinks and drink lists
  • pages & layout: Application pages and layout components
• Load only items in viewport: Used a directive with Angular's defer to control loading of items on demand as they enter the viewport.
• Design system tokens: Tokens placed in config.json and accessed via an SCSS function to control design and appearance by updating these tokens dynamically.
• Lazy load & standalone components: Leveraged Angular’s lazy loading and standalone components features to improve performance.
• WLA (White-Label App) Approach: Enables branding updates purely through JSON configuration.
• API-Driven: Dynamic content fetched from TheCocktailDB API.
• Unit Testing: Necessary unit tests written using Jest for various sections of the app.
• BEM (Block Element Modifier): Used BEM methodology for writing readable and maintainable SCSS.
• Responsive UI: Designed for both desktop and mobile devices with a scalable SCSS architecture.
• Accessibility:
  • ARIA roles: banner, main, navigation, list, listitem, article, region, separator, tablist, tab
  • ARIA attributes: aria-label, aria-labelledby, aria-level, aria-current, aria-pressed, aria-selected, aria-live, aria-atomic, aria-hidden
  • Semantic HTML: Proper use of main tag, heading hierarchy, alt text, and focus management for better accessibility.
• Deployment Pipeline: The deployment process is split into multiple well-defined steps in GitHub Actions to ensure reliability and maintainability:
  • Checkout code to get the latest changes.
  • Setup Node.js (v20) environment.
  • Install dependencies using npm ci with legacy peer deps for compatibility.
  • Run tests (npm test) with headless Chrome to verify code correctness before building.
  • Build the app with production configuration and proper base href.
  • Add .nojekyll file to support GitHub Pages serving.
  • Deploy to GitHub Pages using the JamesIves/github-pages-deploy-action@v4, targeting the gh-pages branch and the correct build folder.

• Virtualize DOM scroll: Render only specific items in the drink list to improve performance when dealing with large DOM trees.
• Throttle scroll events: Use throttling to control the frequency of scroll event handlers.
• Image handling: Manage image loading and errors better; add placeholders to reduce Cumulative Layout Shift (CLS) and improve Core Web Vitals.
• Lazy load components: Defer loading of off-viewport sections (e.g., instructions) to enhance performance.
• Theme switcher: Develop a switch component to toggle themes dynamically via a toggleTheme function.
• Skeleton UI: Implement skeleton screens to improve perceived loading experience.
• Cross-browser compatibility: Ensure consistent UI and functionality across different browsers.
• Advanced white-labeling: Enable deeper UI customization such as button styles, layouts, and icons via JSON config. Organize design tokens into three layers — base, semantic, and component-based — for easier and more flexible theming.