Cookie
Case Study
Overview
The Cookie recipe app is a dynamic, multi-user web application designed to allow users to view, create, and modify recipes. Users can search for recipes by ingredients, and the app automatically categorizes recipes by difficulty level based on predefined criteria. Developed with Django and Python, the app leverages a Postgres database and is deployed on Heroku for accessibility.
Fig 1. Cookie logged in home page
Objective
The primary goal was to transition from a command-line interface to a fully-featured web application, demonstrating an understanding of the Django web framework and development skills. The app aimed to provide a platform for users to share and discover recipes, enhancing user engagement through interactive features such as recipe search, user authentication, and dynamic data visualization.
Key Features
- Implemented Django's built-in authentication system to manage user accounts, including sign-up, login, and logout functionalities.
- Users can add, view, and edit recipes. Each recipe includes ingredients, cooking times, and automatically calculated difficulty levels.
- A powerful search feature allows users to find recipes based on ingredients or other criteria.
- Integrated analytics dashboard displaying statistics about recipes, such as the distribution of cooking times and popularity of ingredients, using pandas dataframes and matplotlib for dynamic chart generation.
- Ensured the application is accessible on various devices, maintaining a user-friendly interface.
Tech Stack
- HTML and CSS for page structure and styling, with templates rendering dynamic content served by Django.
- Python and Django framework for server-side logic, including URL routing, view functions, and database models.
- PostgreSQL for production with a structured schema to store user data, recipes, and ingredients.
- Deployed on Heroku with Gunicorn as the WSGI server, ensuring application availability on the web.
Challenges and Solutions
Implementing an Ingredient Search Function
One of the primary hurdles was crafting an intuitive search function that could handle ingredient-based queries efficiently. The challenge was addressed by integrating the Django Select2 library, which facilitated a multi-select input field in the UI. This approach allowed users to select multiple ingredients from a dropdown, each displayed as a "pill" within the field, vastly improving the user experience and search precision.
Fig 2. Search options
Facilitating Recipe Submissions by Registered Users:
Another significant challenge was designing an intuitive interface for users to submit new recipes, which involved managing multiple ingredients and preparation steps. This complexity was navigated through the use of Django FormSets coupled with jQuery. The submit_recipe view facilitated the creation and management of recipes, ingredients, and steps, ensuring a seamless experience for the user. Then the template where new recipes can be added by registered users utilized jQuery scripts to dynamically add or remove form fields for ingredients and steps, making the recipe submission process both flexible and user-friendly.
Fig 3. Submit recipe view
Implementing Data Visualization:
Trying to show statistics for filtered recipe searches posed a significant challenge, particularly the creation of charts like "Recipe Number by Difficulty," "Recipes by Cooking Time," and "Ingredient Usage." The solution involved leveraging pandas dataframes to efficiently manipulate and prepare the dataset, followed by matplotlib to generate the charts, then integrating these visualizations within was achieved by converting matplotlib plots into images that could be rendered directly in HTML templates. This process involved saving the plot to a BytesIO stream, encoding it to Base64, and then safely embedding it within the webpage, thus overcoming the challenge of seamlessly integrating complex data visualizations into the web app's frontend.
Fig 4. Data visualization
Conclusion
In the course of developing the "Cookie" recipe app, I encountered a range of challenges that significantly enhanced my skills in web development, particularly within the Django framework. This project not only reinforced my understanding of Django's robust capabilities—from handling user authentication to complex database operations—but also deepened my expertise in front-end technologies and data visualization techniques. Integrating data visualizations using pandas and matplotlib taught me to effectively present complex data in an accessible format. These experiences were crucial in demonstrating my ability to architect and develop sophisticated web applications, showcasing my growth as a developer ready to tackle professional challenges in software development.
Thank you for reading