Backroom Bar Bible
The cocktail app to shake up your home bar.
Javascript
React
NodeJS
Express
MongoDB
Backroom Bar Bible is a full-stack web application that helps users manage their home ingredients and discover new cocktails. The search function shows cocktails users can make with their ingredients, while the virtual bookshelf lets them save desired drinks to a cocktail book.
Key Features
- Efficient Search Functions: Cocktails are mapped to ingredients and vice versa, enabling an optimised algorithm to identify drinks users can make with their current ingredients.
- Notebook-Inspired Design: The interface mimics a physical notebook, offering an enjoyable and immersive user experience. Custom graphics, created in-house, enhance the aesthetic.
- Optimised Graphics Loading: Graphics are preloaded to ensure a smooth experience despite the high number of images, with dynamic adjustments based on screen size for optimal mobile and desktop viewing.
The front-end of the website was developed using React, with routing implemented via React Router DOM and state management handled by React Context.
The back-end of the website was developed using Node.js with Express and data management was handled using MongoDB and Mongoose.
Challenges & Solutions
- Efficient Search Algorithm: The challenge was structuring the backend data to allow for fast lookups when determining which cocktails can be made with a given set of ingredients. Searching through every cocktail individually would be too slow as the database grows. To solve this, each ingredient is mapped to the cocktails it is included in, and vice versa. This mapping system ensures efficient and accurate results for user queries without unnecessary processing.
- Enhanced User Experience: When running locally the graphics-heavy app performed well but putting it online revealed slower load times which impacted the user experience. To address this, I implemented a custom loading icon and preloaded several key images when the app first loads. If the app continues to expand, I plan to implement lazy loading for images to balance performance with scalability.
- Scalable Data Structure: The data structure proved challenging because some cocktails and ingredients contained more detailed information or unique features than others. This unpredictability made traditional relational databases less suitable. As a solution I chose to use a NoSQL database, which offers the flexibility needed to handle varied and evolving data structures while supporting future scalability.
RoadMap
- Relaxed mode: Introduce a relaxed mode for ingredient matching. This mode allows users to make substitutions for ingredients they might not have (e.g. using plain vodka instead of vanilla vodka). Each ingredient in the database is tagged with a general "type" (e.g. all vodkas are categorised as "vodka") enabling flexible matching while maintaining recipe integrity.
- Cocktail database expansion: Expand the cocktail database to include a wider variety of recipes, complete with appealing visuals and detailed preparation instructions.
- User accounts: Enable account creation so users can save their personalised cocktail books and ingredient cabinets online. This ensures their data is not lost when switching devices or clearing browser storage, providing a more seamless and reliable experience.