- Problem Statement
- Purpose
- Target Audience
- Core Features
- Why Simple Spoon?
- User Stories
- Installation & Setup Instructions
- Authentication
- UX - User Experience
- Future Enhancements
- Data Model
- Authentication, Authorization & Access Control
- Testing
- Version Control & Secure Code Management
- Deployment
- AI Assistance in Development
- Technologies Used
- Credits
Many people struggle to find reliable and practical recipes that actually work. Additionally, they often do not know where to seek help for culinary questions. Due to a lack of cooking knowledge and skills, many individuals rely on processed and ultra-processed foods, leading to an imbalanced diet full of preservatives and harmful ingredients.
Simple Spoon aims to bridge this gap by offering a structured and interactive platform where users can:
Access tested and verified recipes Engage with a community of home cooks and professional chefs Improve their culinary skills with step-by-step guidance Reduce reliance on processed foods by promoting homemade meals By making reliable recipes and expert advice easily accessible, Simple Spoon helps users build confidence in the kitchen and make healthier food choices.
The purpose of Simple Spoon is to create a collaborative and user-friendly platform where chefs and home cooks can share tested and trustworthy recipes while enabling others to engage, learn, and ask questions.
The platform aims to:
✅ Improve Cooking Skills – Offer step-by-step guidance, culinary tips, and best practices.
✅ Promote Healthier Eating – Encourage homemade meals using fresh, natural ingredients.
✅ Foster a Cooking Community – Enable interaction through comments, Q&A, and recipe sharing.
✅ Ensure Accessibility & Simplicity – Provide an intuitive interface optimized for all devices.
Through Simple Spoon, users can connect, share experiences, and adopt healthier eating habits, ultimately shifting towards wholesome, home-cooked meals that benefit overall well-being.
Simple Spoon is designed for a wide range of users who have an interest in cooking and healthy eating. The platform accommodates:
👤 Guest Users – Visitors who can browse recipes but have limited interaction.
👥 Registered Users – Users with an account who can save, comment, and engage with the community.
👨🍳 Chefs & Home Cooks – Contributors who submit their own recipes and share expertise.
🛠 Administrators – Moderators responsible for managing content, reviewing recipe submissions, and monitoring user engagement.
🚀 We're building something great! 🎉 Check out the key features of Simple Spoon:
Recipe Management
✔️ Save Favourite Recipes – Bookmark recipes for quick access.
✔️ Recipe Submission – Users can submit detailed recipes with images and instructions.
✔️ Recipe Search & Browsing – Filter by categories (e.g., desserts, main courses) or search by ingredients.
User Interaction
✔️ User Registration & Login – Create accounts to unlock interactive features.
✔️ Comment Section – Ask questions, share tips, and interact with other cooks.
✔️ Direct Chef Contact – Get culinary advice from professional chefs.
✔️ Recipe Rating System – Rate recipes from 1 to 5 stars to help others choose the best ones.
User Experience & Accessibility
✔️ Recipe Details Page – A dedicated page with full ingredients, steps, and user feedback.
✔️ User-Friendly Interface – Intuitive design for seamless navigation.
✔️ Mobile & Desktop Optimisation – A fully responsive layout for all devices.
✔️ Social Sharing – Share your favourite recipes on social media with one click.
Admin & Moderation Tools
✔️ Complete Admin Panel – Manage recipes, users, and comments efficiently.
✔️ Content Review System – Ensure recipe quality and prevent spam.
✔️ User Reports & Moderation – Maintain a respectful and helpful community.
✨ And more exciting features coming soon! Stay tuned! 🚀
1️⃣ Reliable Recipes: Every recipe is tested and reviewed.
2️⃣ Community-Driven: Engage with a network of passionate cooks.
3️⃣ Health-Focused: Encourages home cooking with wholesome ingredients.
4️⃣ Intuitive & Accessible: Easy-to-use platform with a clean interface.
USER STORY: User Login #1
USER STORY: Browse and Search Recipes #2
USER STORY: Leave Comments on Recipes #3
USER STORY: Submit Recipes #4
USER STORY: Filter Recipes by Dietary Preferences #5
USER STORY: Save Recipes to Favourites #6
USER STORY: View Ratings and Reviews #7
USER STORY: Moderate Recipe Submissions and Comments #8
USER STORY: Recipe Rating #9
Follow the steps below to run this project locally.
If you have Git installed, run:
git clone https://github.com/gerasoa/MyRecipeBook.gitpython -m venv env
source env/bin/activate # On Mac/Linux
env\Scripts\activate # On Windowspip install -r requirements.txtCreate an env.py file (or .env if using python-dotenv) in the root folder and define the following environment variables:
import os
os.environ["SECRET_KEY"] = "<your-secret-key>"
os.environ["DEBUG"] = "True"
os.environ["ALLOWED_HOSTS"] = "localhost,127.0.0.1"
os.environ["CSRF_TRUSTED_ORIGINS"] = "http://localhost:8000"python manage.py migratepython manage.py createsuperuserpython manage.py runserverpython manage.py testIn addition to traditional email/password authentication, the platform supports login via Google OAuth. This offers users a faster and more secure way to sign in, improving accessibility and user experience.
- Email/password login and registration
- Google login integration via Django Allauth
The layout and visual style of Simple Spoon were inspired by Giallo Zafferano, a renowned Italian recipe website. Known for its vibrant colours and high-quality images, Giallo Zafferano masterfully blends art and culinary expertise, creating an engaging and visually appealing experience for food enthusiasts.
In Simple Spoon, we aimed to capture the same essence by incorporating a clean and intuitive design, rich imagery, and a warm colour palette that enhances the user’s journey through the world of cooking.
Simple Spoon uses the Montserrat font family to ensure a modern and elegant design. The website incorporates different variations of Montserrat, including regular, bold, and italic styles, to enhance readability and visual appeal.
💡 AI-Powered Recommendations – Suggest recipes based on user preferences and available ingredients.
💡 Implement advanced filtering options.
💡 Add user-submitted content.
💡 Implement tagging system
💡 Link recipes to user profiles
💡 Meal Planning Tools – Generate weekly meal plans based on dietary preferences.
Overview
The Simple Spoon platform uses a structured PostgreSQL database to store and manage crucial data for recipes, users, and comments. Django migrations are employed to efficiently manage schema changes and keep the database updated as the project evolves.
Data Model
The main tables in the Simple Spoon database are:
📋 Users
Stores all user information, including their name, email, and password. This table handles user authentication and permissions.
🍽 Recipes
Contains recipe details such as title, ingredients, instructions, and the user who created the recipe. It also stores metadata related to the recipe's category and preparation time.
💬 Comments
Allows users to comment on recipes, sharing their feedback, questions, and tips. Each comment is tied to a specific recipe and user, fostering interaction.
📊 Database Relationships
Users ↔ Recipes: A user can create multiple recipes, but each recipe is tied to a single user.
Recipes ↔ Comments: Each recipe can have multiple comments, but each comment is linked to one recipe.
Database Diagram
Below is the diagram that illustrates the relationships between the tables in the Simple Spoon database:
Simple Spoon implements role-based authentication with specific roles for users:
👤 Logged-in Users – Can browse, save, and comment on recipes.
👨🍳 Chefs – Can submit and manage their own recipes.
👑 Admin – Has full access to manage content, users, and the platform.
Users can log in or register via email and password. When not logged in, the Login and Register options are available. Once logged in, the Logout option appears. Admins and Chefs have exclusive access to their dedicated admin areas, while regular users can only access the public website interface.
Test Procedures
✅ Test Overview
Manual and automated tools were used to test the functionality, usability, responsiveness, accessibility, and performance of the application.
| Device | Browser |
|---|---|
| Windows PC | Chrome, Firefox, Edge |
| macOS Laptop | Safari, Chrome |
| Android (Samsung Galaxy A51) | Chrome Mobile |
| iPhone (iOS 17) | Safari |
Show/Hide Devide environments
| Feature | Test Description | Result |
|---|---|---|
| Registration | User can register with valid data | ✅ Passed |
| Login | User can log in with valid credentials | ✅ Passed |
| Logout | Logged-in user can log out successfully | ✅ Passed |
| Recipe List | Homepage displays recent recipes | ✅ Passed |
| Recipe Detail | Clicking on a recipe shows full detail | ✅ Passed |
| Comment | Logged-in user can post, edit, and delete a comment | ✅ Passed |
| Rating | Logged-in user can submit a rating | ✅ Passed |
| Favourites | User can favourite/unfavourite a recipe | ✅ Passed |
| Search | Search returns relevant recipes | ✅ Passed |
| Chef List | List of chefs loads with correct links | ✅ Passed |
| Chef Detail | Chef page shows correct data and recipes | ✅ Passed |
| Responsiveness | Layout adapts correctly on mobile and tablet | ✅ Passed |
| Access Control | Non-authenticated users cannot post/edit/delete | ✅ Passed |
✅ HTML/CSS Validation: Using W3C Validator
Show/Hide Test Validator HTML Images
✅ Accessibility/Performance: Via Lighthouse
Show/Hide Lighthouse Images
✅ JavaScript Validation: With JSHint
Show/Hide Test Validator JavaScript Images
Accessibility checks were performed using the WAVE Web Accessibility Evaluation Tool to ensure the application is usable for all audiences and compliant with accessibility standards.
- Heading hierarchy (correct use of
<h1>,<h2>,<h3>, etc.) - ARIA attributes such as
aria-current,aria-expanded, andaria-label - Navigation structure with semantic elements (
<nav>,<main>,<footer>) - Form labelling
- Keyboard accessibility and focus order
- Colour contrast (checked separately via Lighthouse and WAVE)
- 0 accessibility errors
- 0 contrast errors
- All ARIA roles and labels are valid
- No skipped heading levels
- Semantic HTML structure verified
Click to view accessibility test results
During testing with Chrome Developer Tools, some pages showed performance issues due to the following reasons:
🔍 Insecure HTTP Requests: Cloudinary is currently serving media files over HTTP instead of HTTPS, which can make the page more vulnerable and trigger security warnings.
🔍 Third-Party Cookies: A significant number of third-party cookies were detected, which may impact performance and security.
These issues were identified and addressed but could not be fully resolved in time for this version. They will be fixed in future updates.
This project utilizes Git for version control and is hosted on GitHub. The repository can be accessed here:
🛠️ Git Workflow
✅ Feature-Based Commits: Commits are made after implementing new features, bug fixes, or complex adjustments.
✅ Main Branch Usage: The project is maintained on the main branch for stability.
✅ Descriptive Commit Messages: Each commit follows a meaningful and structured format.
✅ Secure Code Management
✅ No sensitive data is committed: Credentials and private keys are stored securely.
✅ .env and .gitignore: Used to prevent sensitive files from being included in the repository.
✅ Security Review: The repository is regularly checked to ensure compliance with best security practices.
The application is deployed on Heroku and is accessible at:
The deployment was carried out using Heroku with the following steps:
1 - Prepare the application
-
Install dependencies:
pip install -r requirements.txt -
Set
DEBUG = Falsefor production. -
Configure
ALLOWED_HOSTSto include the Heroku app domain.
2 - Set up environment variables
The following variables were added to Heroku:
-
CLOUDINARY_URL – For media storage
-
DATABASE_URL – For database connection
-
DISABLE_COLLECTSTATIC=1 – To prevent static file collection issues
-
SECRET_KEY – To ensure application security
3 - Deploy to Heroku
-
Create a new Heroku app: heroku create simple-spoon
-
Set environment variables: heroku config:set VAR_NAME=value
-
Push the project:
git add .
git commit -m "Prepare for deployment"
git push heroku main- Run database migrations:
heroku run python manage.py migrate
✔ SECRET_KEY and other sensitive credentials are stored securely as environment variables.
✔ .gitignore is configured to exclude sensitive files.
✔ DEBUG = False in production to enhance security.
After deployment, the application was tested to ensure:
-
The functionality matches the local development version.
-
Database connections and media storage work correctly.
-
The UI and interactive features operate as expected.
During the development of this project, I strategically used GitHub Copilot to assist in various aspects of the code creation process. Here’s how AI contributed:
1 - Code Creation & Refinement:
Copilot helped generate parts of the code, especially in complex areas, and suggested improvements for better code structure and readability. It also assisted in refining classes and optimizing the CSS for better organization.
Bug Detection & Fixing:
2 - I encountered some bugs in the code, which were identified and corrected with the help of AI. Copilot played a crucial role in pinpointing semantic errors and suggesting corrections, ensuring smoother functionality.
3 - Content Creation & Testing:
AI also contributed to generating content for the site and testing core functionalities. This was particularly valuable in ensuring that key features were working as expected.
4 - Productivity & Efficiency Gains:
The use of AI drastically reduced development time, allowing for quicker debugging, content generation, and code optimization. The overall impact on productivity was significant, and I was able to focus on higher-level tasks with improved efficiency.
HTML5: The standard markup language for creating web pages, providing the structure and content of the site.
CSS3: A style sheet language used for describing the presentation of a document written in HTML, enabling responsive and visually appealing designs.
JavaScript: A programming language that enables interactive web pages, enhancing user experience with dynamic content and features.
GitHub: A platform for version control and collaboration, allowing multiple developers to work on projects simultaneously and manage code changes.
Heroku: A cloud platform as a service (PaaS) supporting several programming languages, used for deploying, managing, and scaling web applications.
Pexels: A free stock photo and video website, providing high-quality images used within the application for visual enhancement.
Cloudinary: Media management service that allows uploading, storing, manipulating, and delivering images and videos.
Balsamiq: A rapid wireframing tool that helps designers and developers create low-fidelity prototypes and mockups for user interface design.
Crispy-bootstrap5: Django package that integrates Django forms with Bootstrap 5, allowing for easy and consistent form rendering.
Dj-database-url: Utility for configuring database URLs in Django.
Dj3-cloudinary-storage: Django package that integrates Django media storage with the Cloudinary service.
Django: High-level web framework for Python that enables rapid and clean development of web applications.
Django-crispy-forms: Django package that makes it easy to create elegant and reusable forms.
Django-allauth: Django application for authentication, registration, and account management.
Django-summernote: WYSIWYG editor based on Summernote for integration with Django.
dbdiagram.io: A web-based tool for designing and visualising database schemas in an easy and collaborative way.
GetEmoji: Online platform that provides a collection of Unicode emojis, allowing users to copy and paste emojis into applications.
Gunicorn: WSGI HTTP server for Python applications, used to deploy Django applications.
JSHint: A static code analysis tool for JavaScript that detects errors and potential issues in the code, helping developers write cleaner and more reliable scripts.
Pillow: Image processing library for Python.
Psycopg2: PostgreSQL database adapter for Python.
Python3-openid: Library for supporting the OpenID protocol.
Tzdata: Time zone database.
Whitenoise: Library for serving static files in Django applications.
Google Cloud OAuth: Social authentication (Google Login)
Flake8: Code style enforcement (PEP8 compliance)
Credits Website Reference: The design and structure of this website were inspired by the content and layout of Giallo Zafferano.
Comment Script: The comment section functionality on the recipe detail page was implemented using a script provided by the Code Institute.
Project Completion: This project was completed with the dedication and hard work of several individuals:
Support Team from Code Institute: Emma Lamont, Spencer Barriball and Ruairidh MacArthur
Pair Programming Colleagues: Anish Fatima, Sonali Patni and Isaac Nicholls