Eat Something is a website that allows an enduser to read family-friendly recipes, and engage with a community of users through posting their own recipes and leaving comments.

This project is built with Django, CSS, HTML, Python, and Javascript. It uses a custom model (for 'tagging' recipes) and models adapted from the I Think Therefore I Blog examples. It has C.R.U.D. functionality, allowing users to create, read, update, and delete recipe posts. It has both manual and automatic testing. The majority of styling is done through Bootstrap, though there is a custom CSS for for more specific styling.

There are two types of users:

• A superuser that can approve new recipe posts and comments.
• A standard user that can browse the site, submit and update recipes, 'like' recipes, and post comments.

Click here to visit the Eat Something website.

Screenshot from ami.responsivedesign.is

• Features
  • Front Page
  • Navigation
  • Alerts
  • Registration
  • Recipe Page
  • Recipe Images
    • Custom Recipe Image
    • Default Recipe Image
  • Likes
  • Comments
  • Comment Moderation
  • Recipe Tags
  • Footer
  • Data Model
  • CRUD Functionality
    • Create
    • Read
    • Update
    • Delete
  • Responsive Design
• Design
• Agile Development/User Stories
• Accessibility
• Testing
  • Manual Testing
  • Automated Testing
  • Validator Testing
• Bugs
• Setup and Deployment
• Technologies Used
• Credits

This shows the various recipes available on the website. Each recipe has a photo and some details, which the user can click into. Recipe posts are paginated, showing 6 per page.

The nav bar always displays at the top of the page and lets the user return home. If they are not logged in, a log in/register option is available.

An alert pops up when a user logs in or logs out. This alert times out after 3 seconds.

Users can register new accounts on the website so that they may leave comments and like posts.

This shows the recipe in more detail. Note that if the user is logged in and is the author of a given recipe, they have additional options to edit and delete the recipe.

Each recipe can have an image attached, which is used in the recipe preview and on the recipe page as the hero image. If no image is attached to a recipe, a placeholder image is used instead.

Posts can be liked and unliked by users that are logged in. Posts always show the total amount of likes they have received.

Users that are logged in can leave comments. All users can read comments.

Like posts, comments must be approved by an administrator before they go live on the webpage.

Recipe tags are implemented with a custom many-to-many model. There are many tags and each tag can be applied to many recipes. Tags are called in the RecipeDetail view and then in the recipe_detail.html template. As there is the possibility of many tags, they must be iterated through in the template itself:

{% for tag in tags %}
{{ tag }}
{% endfor %}

Tags appear below each recipe.

Tags are edited in the admin panel.

The page footer contains social media links and copyright information.

Comments and tags are created dependent on posts. Deleting a post will also delete all associated comments and will remove the respective tags (although, the tags will still exist in relation to other posts).

This project uses a custom model to handle tags on recipes. More details on this model here.

Recipes can be created through a webform. However, upon submission, they must be set to "Published" by the superuser in the admin panel. This is a simple method to prevent spam and low-quality posts.

Users can read posts and comments.

Recipes can be updated through a webform, provided the user that is logged in is the original author of that recipe. The link to update appears on any recipe page that belongs to the logged in user. The update form is autofilled from the existing recipe content.

Recipes can be deleted through a webform, provided the user that is logged in is the original author of that recipe. The link to delete appears on any recipe page that belongs to the logged in user.

Thanks to the use of Bootstrap, the website is fully responsive to mobile devices.

• I have used this colour palette from Coolors to ensure consistency across the site and related components.

• I used Bootstrap for most of this project, using guidance from Bootstrap's Getting Started Documentation.

• In addition, I used my own custom CSS file, to create smaller and more specific styling effects. On occasion, I have applied styling to exising Bootstrap classes.

I used User stories to guide development. The site was built using an agile methodology, working in small deliverable chunks. For instance, the tags model was left until the very end of the project, as this provides some value added, rather than being a core feature.

The entire site is text based, so should work well with screen readers. The exception to this is the external links in the footer, which are given an aria-label, and recipe images, which are given an alt text.

The website uses high-contrast colours between background and text to maintain readability.

I created some automated tests for the project. Guidance for automated testing was taken from the Django documentation and further assistance was found in Tutor Support. Specific details of help received is documented in recipes/tests.py.

There are 8 tests, testing the validity of the Recipes model and two of the more important Views.

In order to run automated tests:

• Comment out current database in settings.py
• Then uncomment other database settings.
• Revert these two changes after testing.

The command to run automated tests is:

python3 manage.py test recipes

The site passes HTML Validation at https://validator.w3.org/nu/.

The site passes CSS Validation at https://jigsaw.w3.org/css-validator/.

The site scores very well on Lighthouse for desktop.

It scores slightly less well on Lighthouse for mobile, primarily because the image files are too large and increase load time.

The Python code passes Pep8 validation.

I was unable to post comments on the site and django reported an error regarding a null field. I had mistyped a variable in my comments model, which meant that the respective view could not find the appropriate information.

I couldn't get my base.html file to recognise my style.css file. Referring to my own styles did not update the contents of the page. I searched through Stack Overflow, Slack, Student Support and the answer was... I needed to clear my cache!

Bootstrap was applying colours to elements that did not match the colour scheme of my site and attempts to fix this were inelegant. After reading this StackOverflow post, I understood that I could reference the Boostrap class names directly in my style.css file. Thus, I added several pieces of CSS that referred to bootstrap classes, such as this:

.btn-primary {
    background-color: red;
    border: none;
}

Login, Registration, Logout pages, etc, were using an ugly unstyled page, which didn't fit the wider site styling.

Upon closer inspection, I noticed that the templates created by AllAuth used this line:

{% extends "account/base.html" %}

which simply needed to be changed to:

{% extends "base.html" %}

Upon which I could begin to style them as normal, with bootstrap, CSS, etc.

When the project was finished, I found that the deployed site didn't work. After talking with Student Support and looking in the Heroku logs, we discovered a spelling mistake in my Heroku config vars!

When creating code to update a recipe, I create a class view with GET and POST methods, in order to create a form, prepopulate it with existing content, and then allow the user to submit the corrections. However, the form continually didn't work. Upon submission, it would check is_valid, and the check would fail because the slug needed to be unique. However, the slug was never unique because the original recipe that is being edited has the same slug. This bug persisted for some time until I went to Student Support, who were about to show me the UpdateView class, as explained here.

This allowed me to reduce 60 lines of buggy code to:

class EditRecipe(UpdateView):
    model = Recipe
    form_class = RecipeForm
    template_name = 'edit_post.html'
    success_url = '/'

It also allowed me to use DeleteView to achieve something similar with the code for deleting a recipe.

Django was installed at beginning of project using the command:

pip3 install Django==3.2 gunicorn

Deployment at the start of the project following I Think Therefore I Blog example. Refer to the cheatsheet for further details.

1. Create env.py to hold secret keys.
2. Hook up Heroku and ensure that it is holding my secret key and database URL.
3. Connect Cloudinary and ensure those setting are also in the Heroku variables.
4. In Heroku, connect to the GitPod respository for this project and click deploy for the main branch.

At this point, I built the project. Running "git push" would cause the deployed site to automatically update.

5. Before final deployment, I made sure the 'Debug' flag in settings.py was set to 'False'.
6. Also, in the same file, ensure that X_FRAME_OPTIONS = 'SAMEORIGIN' so that summernote can run in the deployed version.
7. Remove DISABLE_COLLECTSTATIC config var in Heroku.
8. Deploy branch again in Heroku.

From the I Think Therefore I Blog tutorial, I installed Summernote to provide a WYSIWYG editor in Django dashboard. Using the command:

pip3 install django-summernote

I installed Bootstrap using guidance from https://getbootstrap.com/docs/5.1/getting-started/introduction/

• Javascript
• Python
• CSS
• HTML
• Django
• AllAuth
• Heroku
• Cloudinary
• GitHub
• GitPod
• GitHub Pages
• Firefox developer tools
• Chrome developer tools
• JSHint
• W3 HTML Validator
• W3 CSS Validator
• favicon.io

• The basic structure of the website is inspired by the I Think Therefore I Blog tutorials. Parts of the page logic are also inspired by this and are marked as such in the comments.
• Guidance for working with forms and CRUD functionality from DjangoProject.
• Navbar code modified from a Bootstrap template found on GetBootstrap.
• Footer code modified from a Bootstrap template found on GetBootstrap Examples.
• Index layout code modified from a Bootstrap template found on GetBootstrap Examples.
• Recipe detail layout code modified from a Bootstrap template found on GetBootstrap Examples.
• All images are Public Domain or Creative Commons.
• Salad placeholder image source: https://www.photosforclass.com/download/pb_2834549
• Kid Friendly Grilled Skewers
  • Image: https://www.photosforclass.com/download/pb_417994
  • Text: My own.
• Bluberry cookies
  • Image: https://www.photosforclass.com/download/pb_1835414
  • Text: My own.
• Sugar cookies
  • Image: https://www.photosforclass.com/download/pb_1051884
  • Text: My own.
• Pasta
  • Image: https://www.photosforclass.com/download/pb_527286
  • Text: My own.
• Cupcakes
  • Image: https://www.photosforclass.com/download/pb_2285209
  • Text: My own.
• Egg breakfast
  • Image: https://www.photosforclass.com/download/pb_456351
  • Text: My own.
• Pancakes
  • Image: https://www.photosforclass.com/download/pb_2020863
  • Text: My own.
• Pizza
  • Image: https://www.photosforclass.com/download/pb_2068272
  • Text: My own.
• Berries
  • Image: https://www.photosforclass.com/download/pb_2277
  • Text: My own.
• Blueberry favicon from https://favicon.io/emoji-favicons/blueberries/