The live website can be seen here
The Agile methodology was used to plan the project. Github was used as the tool to demonstrate this.
- Projects were used to divide the project into three iterations with a simple Kanban board.
- Milestones were used to create Epics with a custom template
- Issues were used to create User Stories with a custom template. Eash user story is clearly described with a title, statement, acceptance criteria and tasks
Each user story was linked to an Epic and placed within one of three Iterations. The user stories were labelled 'must do' 'could do' and 'should do' in order to prioritise the work. As work on a user story was begun the story was moved from the 'to do' column of the board to the 'In progress' column. When work on the story was complete the user story was moved into the 'done' column.
However it was difficult in Github to adequately link Iterations - Epics - User Stories. Although I linked User Stories (Issues) to Epics (Milestones) and placed these in Iterations (Milestones), Epics did not automatically show the % progress to completion once user stories were moved in the kanban board. It was also difficult given the tight time frame and developer's level of knowledge to accurately plan out the content of each user story in advance. As a result some user stories were updated during the course of implementation.
The goal of the project is to create a recipe website with tried and tested recipes for both family meals and dinner parties. Inspiration for the site came from the developer's book club group who requested a place to store the recipes for the lovely dinners provided at their regular meetings. The developer's family also wanted a means to access family favourite recipes so the project was expanded to appeal more broadly to general users looking for good recipes and a means to store, edit and delete their own favourite recipes. The target user is someone:
- who wants to find recipes to use to cook for the family or friends
- who wants to store their own favourite recipes in one place
- who wants to share their favourite recipes
There are 10 Epics and 20 User Stories. The User Stories are numbered so can be easily tracked. However during the planning stage as the stories were being amended their id numbers[#) are no longer in sequence.
- Epic: Set up admin page for admin to manage recipe posts, reviews and site users
- User Stories:
- As a site admin I can CRUD draft recipe posts so that I can complete the recipes later (must-have / complete)#8
- As a site admin I can CRUD recipes so that I can manage my site content (must-have / complete)#9
- As a site admin I can approve reviews so that I can filter out inappropriate content (must-have / complete)#10
- As a site admin I can view the number of favourites on a recipe post so that I can know which are the most popular#28
- As a site admin I can view reviews of a recipe post so that I can read the commentary on a recipe#29
- As a site admin I can create reviews of recipe posts so that I can generate discussion on recipe posts#31
- Epic: Enable users to set up an account on the website to access the full features
- User Stories:
- Epic: Create landing page to attract users to the site
- User Stories:
- As a user I can view a snapshot of the site on the landing page so that know what the site's purpose is (must-have/complete)#24
- Epic: Enable registered users to CRUD their own recipes
- User Stories:
- As a registered user I can CRUD my own recipes so that I can manage my own content (should-have / complete)#12
- Epic: Create recipe list page to showcase content to users
- User Stories:
- Epic: Enable registered users to search through the recipes to enhance UX
- User Stories:
- Epic: Enable registered users to interact with recipe posts to enhance UX
- User Stories:
- As a registered user I can click on a post in the recipe list so that I open the full recipe post (must-have / complete)#20
- As a registered user I can favorite/unfavorite recipes so that I can interact with the site content (must-have / complete)#11
- As a logged-in user I can review a recipe so that I can interact with the site (must-have / complete)#32
- Epic: Enable users to filter recipe posts to enhance UX
- User Stories:
- As a user I can filter all recipes by ingredient/favourite so that I can easily sort the recipes (could-have / future feature)#22
- Epic: Enable users to sign-in/register with Google/Facebook account
- User Stories:
- As a user I can register an account with social networks so that I can streamline my accounts (could-have / future feature)#30
- Epic: Enable users to CRUD own reviews
- User Stories:
- As a registered user I can create/read/update/delete my own review posts so that I can manage my own content (could-have / complete)#17
The scope of the project was large at the planning stage. While the ultimate goal was to allow logged in users to have full CRUD functionality for all their own content, time constraints meant this was limited to CRUD functionality for users only for their own recipes as this was deemed a must-have. More functionality for logged in users will be added in the future. In addition further front-end admin functionality will be added in the future but for this project full management is limited to backend Django admin panel and front-end CRUD of the recipes created by the admin as a logged in user.
The website consists of six pages: Home, About, Recipes, My Recipes, Register and Sign In/Sign Out pages. Home, About and Recipes can be viewed by all users. My Recipes is limited to logged in users.
- Navbar:
- Logo linking back to the home page:
Logo
- Links to Home, About, Recipes, My Recipes, Register and Sign In/Out pages: The Home, About and Recipes page links are visible to and can be accessed by any user. If the user is not signed in the Sign in and Register links are visible in the navbar. If the user is signed in the Sign In and Register links are replaced by a Sign Out link and the My Recipes page link is visible:
Navigation for not signed in user
Navigation for signed in user
- The active page is highlighted for good UX:
My Recipes page highlighted
- The navbar sticks to the top of the page so remains in view for the user to easily navigate around the site
Sticky navbar
- The navbar collapses for mobile and portrait tablets:
Navbar collapsed
- Footer: with clearly visible links to direct the user to the Facebook, Instagram and Twitter pages
Footer
- Hero Image with overlay text highlighting the purpose of the site
Hero Image
- Call to action register button on hero image is visible to users who are not logged in to encourage registration to access the features highlighted on this page. The button becomes invisible if the user is signed in.
View to not signed in user
View to signed in user
- Text with links directing users to the features available to logged in users
Latest recipe information
- Snapshot images of three most recent recipe posts with title, date added and author. This page updates automatically as new recipes are added which keeps the site fresh and interesting to users.
Three latest recipes
- Call to action button to 'View the Recipes' at bottom of page to direct users easily onto view the full recipe list page
View the Recipes button
- Image with background text information about the website
About Page
- Call to action button 'View the Recipes' to direct users onwards to the main recipes page
View the Recipes button on About Page
- Images with summary description of all the recipes are visible on the page. Recipe title is a link to the full recipe detail page for logged in users. Stars representing favourites and comment icons representing reviews have total number beside them:
Recipes Page
- A search bar above the list of recipes to enable users to easily locate a particular recipe by a keyword from the title or ingredients fields. Clickable icons to search and an 'x' to clear search back to full list of recipes:
Search bar
- The recipe titles link to the full recipe detail page which can only be accessed by logged in users. Users who are not logged in are redirected to the sign-in page:
Sample recipe
- A back to top arrow on bottom right which remains on screen once user has started scrolling to impove UX by making it easy for the user to return to the top of the page to search or navigate to a different page:
Back to top arrow
- A call to action 'Add a Recipe' button which will direct logged in users to my recipes page and non-logged in users to the sign in page. This allows users to intuitively navigate their journey on the website:
Add a Recipe Button
This page can only be accessed by a logged in user. The navigation link only appears when a user is logged in. The page displays a table list of recipes which have been added by the logged in user.
- A search bar above the list of recipes to enable users to easily locate a particular recipe by a keywork from the title or ingredients fields. Clickable icons to search and an 'x' to clear search back to full list of recipes:
Search bar
- A call to action button is clearly visible to the user to 'Add a Recipe'. When a user clicks on this button the recipe form opens where the user can enter all the fields of the recipe:
Add a Recipe Button
Add a Recipe Form
- The list of recipes created by the logged in user is organised in a table in reverse order of creation and by title with three link options available for the user to view, edit and delete their own recipes:
Recipes table
- View: user can click to open the full recipe detail page
- Edit: user can click to open the completed recipe form and edit the details to resubmit with changes
Recipe Edit Form
- a message is displayed to show successful update of recipe
Successful update message
- Delete: the user can delete a recipe. A warning is displayed to allow for change of mind before deletion and a button with option to return to My Recipes page:
Delete recipe confirmation
Successful delete message
Accessed only by logged in users by clicking the 'view' tab on the My Recipes table or the title of a recipe in the Recipes page.
- The star icon which can be clicked to favourite/unfavourite a recipe features prominently:
- The number of favourite stars given to the recipe is underneath the star and updates when the user clicks the star
- Messages are displayed to confirm user's actions:
Star icon when user has favourited the recipe with success message
Star Icon when user has not favourited with message and total updated
- the about section of the recipe includes the 'updated on' field which will display the date of any changes made to the recipe details:
Date last updated
- Reviews:
- At the bottom of the page is the Review section to display published reviews in descending order by date:
Reviews
- below the published reviews is a form to submit a recipe review.
- After submission a success message displays and in the review box a note 'Your review is pending approval' is shown until the admin approves the review for publication:
Review form
Pending approval below published reviews
Review thanks message
- User signs in by entering username and password
- Choice of two action buttons: Sign In or Home which redirects to the home page
Sign In Form
- A success message informs user of their action
Sign in success message
- Users can register for an account by entering a username, an optional email and a password
- Choice of two action buttons: Sign Up or Home which redirects to the home page
Register form
- A success message informs users of their action
Successful registration message
- Sign Out page with two buttons: sign out or redirect to the Home page. User is redirected to home page after signing out:
Sign out page
- A form to submit with fields to complete to add a recipe to the public recipes page and to the user's list in the My Recipes page for CRUD functionality
- Users can add text, paste text into fields. Images can be uploaded and a placeholder image is available if no image is supplied.
- A Go Back button at the top to redirect users to the My Recipes page
Recipe form
- A Submit Recipe button at the bottom to submit the completed form
Submit button
A 404 page was created to handle users' navigational errors and to direct them back to the website. The navigation menu and logo are visible on the page
A 500 server error page was created to handle internal server errors
- Improvement could be made to the search feature. During implementation with a clear function inside the search box it was found that this only cleared the search but left the search findings list. It was decided that better UX would be to clear back to the full list so the form was changed and an 'x' was added outside the box to reload the page. Given further time I would look for a neater solution.
- The search function on the Recipes and My Recipes pages could be further refined to include filtering by category and organising the list in various orders e.g. alphabetised
- A useful future feature would be to filter by the user's favourites
- User sign-in with Google/Facebooks
- Apply full CRUD functionality to user's own reviews
- Currently images can be uploaded to the recipe form from the user's own computer or via a url. This could be further restricted by size and type to ensure consistency.
- In future it would be a good idea change the default setting to draft for users recipes to require approval before publication so the admin can check the content is suitable and consistent with the site ethos and style.
The pdf files can be seen here
- Home Page
- About Page
- Recipes Page
- My Recipes Page
- Recipe Detail Page
- Sign In Page:
- Register Page:
- Recipe Form Page:
There are two models for the database: A Recipe model and a Review model
The pdf of these models' tables can be seen here
The design style of the website is minimalist, fresh and clean looking.
The following colour palette was used from Coolors:
The colours are chosen to convey nature, fresh clean and nutritious: green, pale grey, dark grey, black and white.
The predominant colour is green (#008000): used for buttons, links and icons. Font colours are charcoal grey and white, adjusted for contrast. Shading is muted grey.
The fonts selected were: Poppins for the text and Roboto for the headings. These were selected for their simple and elegant style.
The hero image was chosen as the food is primarily vegetarian. The image is simple and elegant and evokes natural, vegetarian cuisine. Images were selected for the recipes which made the food look appetising.
- HTML5 was used to build the front-end website
- CSS was used to style the HTML and add responsiveness
- JavaScript (no custom JS) was used with Bootstrap to provide interaction on the front-end
- Bootstrap 5.1.3 was used to style the website, add responsiveness and interactivity
- Python was used to code the back end of the project
- PyPI to install the python packages
- Django 3.2.8
- Django supporting libraries:
- allauth for authentication, registration, account management as well as 3rd party (social) account authentication
- crispy-forms to style the forms
- summernote as editor
- gunicorn as the server for Heroku
- psycopg2as an adaptor for Python and PostgreSQL databases
- dj-database to parse the database URL from the environment variables in Heroku
- Heroku Postgres for the production database
- SQLite for the local environment for automated testing
- Cloudinary was used to host the static files and media
- Gitpod as the IDE
- Git used for version control via the terminal in Gitpod
- GitHub used to store the code in the repository
- Heroku was used as the cloud based platform for deployment
- Fontawesome for icons
- Google Fonts for the fonts
- Balsamiq for the wireframes
- Google Chrome Dev Tools for inspection during development to check reponsiveness and contrast and JS errors in the console
- Favicon.io for the favicon
- Techsini was used for the site mockups
- Google Chrome for previewing the project in the browser
- Google Sheets - for the database model tables
- Freelogodesign for the leaf logo
- Coverage to generate a report on the automated testing
- W3C Markup Validation Service
- W3C CSS Validation Service(Jigsaw)
- PEP8 to validate the Python code
- Picresize to resize images
- Coolors to generate the colour palette
The full testing documentation can be seen here
- First follow these steps to create your app: add to local deployment section: here
- Install Django and gunicorn:
pip3 install django gunicorn - Install supporting database libraries dj_database_url and psycopg2 library:
pip3 install dj_database_url psycopg2 - Install Cloudinary libraries to manage photos: in the terminal window type
pip3 install dj-3-cloudinary-storage - Create file for requirements: in the terminal window type
pip freeze --local > requirements.txt - Create project: in the terminal window type
django-admin startproject project_name . - Create app: in the terminal window type
python3 manage.py startapp app_name - Add app to list of
installed appsin settings.py file:'app_name' - Migrate changes: in the terminal window type
python3 manage.py migrate - Run the server to test if the app is installed: in the terminal window type
python3 manage.py runserver - If the app has been installed correctly the window will display
The install worked successfully! Congratulations!
- Navigate to the Heroku website
- In the Heroku browser window, create an account by entering your email address and a password
- Activate the account through the authentication email sent to your email account
- Click the new button and select create a new app from the dropdown menu
- Enter a name for the application which must be unique, in this case the app name is 'favoureats'
- Select a region, in this case Europe
- Click create app
- In the Heroku dashboard click on the Resources tab
- Scroll down to Add-Ons, search for and select 'Heroku Postgres'
- In the Settings tab, scroll down to 'Reveal Config Vars' and copy the text in the box beside DATABASE_URL.
- In Gitpod create a new env.py file in the top level directory
- Add env.py to the .gitignore file
- In env.py import the os library
- In env.py add
os.environ["DATABASE_URL"]= "Paste in the text link copied above from Heroku DATABASE_URL" from step 3 Insert yours here - In env.py add
os.environ["SECRET_KEY"] = "Make up your own random secret key" - In Heroku Settings tab Config Vars enter the same secret key created in env.py by entering 'SECRET_KEY' in the box for 'KEY' and your randomly created secret key in the 'value' box.
- In your Django 'settings.py' file type:
from pathlib import Path
import os
import dj_database_url
if os.path.isfile("env.py"):
import env
- Remove the default insecure secret key in settings.py and replace with the link to the secret key variable i Heroku by typing:
SECRET_KEY = os.environ.get(SECRET_KEY) - Comment out the
DATABASESsection in settings.py and replace with:
DATABASES = {
'default':
dj_database_url.parse(os.environ.get("DATABASE_URL"))
}`
- In the terminal type:
python3 manage.py makemigrations`
python3 manage.py migrate`
- Create a Cloudinary account and from the 'Dashboard' in Cloudinary copy your url into the env.py file by typing:
os.environ["CLOUDINARY_URL"] = "cloudinary://<insert-your-url>" - In Heroku add cloudinary url to 'config vars'
- In Heroku config vars add DISABLE_COLLECTSTATIC with value of '1' (note: this must be removed for final deployment)
- Add Cloudinary libraries to installed apps section of
settings.pyin this order:
'cloudinary_storage'
'django.contrib.staticfiles''
'cloudinary'
- Connect Cloudinary to the Django app in
settings.py:
STATIC_URL = '/static'
STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'STATIC')]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
DEFAULT_FILE_STORAGE =
'cloudinary_storage.storage.MediaCloudinaryStorage'
* Link file to the templates directory in Heroku
* Place under the BASE_DIR: TEMPLATES_DIR = os.path.join(BASE_DIR,
'templates')
- Change the templates directory to TEMPLATES_DIR. Place within the TEMPLATES array:
'DIRS': [TEMPLATES_DIR] - Add Heroku Hostname to ALLOWED_HOSTS:
ALLOWED_HOSTS = ['favoureats.herokuapp.com', 'localhost']
- In Procfile add:
web: gunicorn favoureats .wsgi
git add <filename>
git commit -m “Deployment Commit”
git push
-
Click Deploy tab in Heroku
-
In the 'Deployment method' section select 'Github' and click the 'connect to Github' button to confirm.
-
In the 'search' box enter the Github repository name for the project: favoureats: https://github.com/siobhanlgorman/favoureats
-
Click search and then click connect to link the heroku app with the Github repository. The box will confirm that heroku is connected to the repository.
In the IDE:
- When development is complete change the debug setting to:
DEBUG = Falseinsettings.py - In this project the summernote editor was used so for this to work in Heroku add:
X_FRAME_OPTIONS = 'SAMEORIGIN'to settings.py. - In Heroku settings config vars change the DISABLE_COLLECTSTATIC value to 0
- Because DEBUG must be switched to True for development and False for production it is recommended that only manual deployment is used in Heroku.
- To manually deploy click the button 'Deploy Branch'. The default 'main' option in the dropdown menu should be selected in both cases. When the app is deployed a message 'Your app was successfully deployed' will be shown. Click 'view' to see the deployed app in the browser. The live deployment of the project can be seen here
- To fork the project navigate to the favoureats repository at https://github.com/siobhanlgorman/favoureats
- Above the list of files click the dropdown code menu.
- Select the https option and copy the link.
- Open the terminal.
- Change the current working directory to the desired destination location.
- Click the 'Fork' button at the top right of the page. A forked copy of the repository will appear in your Repositories page.
- On Github navigate to the main page of Favoureats at https://github.com/siobhanlgorman/favoureats
- Above the list of files click the dropdown code menu.
- Select the https option and copy the link.
- Open the terminal.
- Change the current working directory to the desired destination location.
- Type the git clone command with the copied URL:
git clone https://github.com/siobhanlgorman/favoureats.git.
- Press enter to create the local clone.
- For the project to run an env.py file must be created as in step 4 of 'creating your Heroku app' above. As this is not stored in Github it will not be cloned with the rest of the files.
-
Dennis Ivy 'Django To Do List App With User Registration & Login' was useful for full CRUD functionality application.
-
This tutorial was used to auto generate slugs from the front-end: Kodnito
-
The following tutorials were useful for automated testing:
-
Stack Overflow and Slack were used for general queries
Dinner Party Image by Pexels from Pixabay
Chickpea Curry Image by marekonline from Pixabay)
Lasagne by Daniele Sgura from Pexels
Cookbook Image by Bruno /Germany from Pixabay
Tofu Photo by Ella Olsson from Pexels
Chili image by RitaE from Pixabay
Sweet Potato Soup image by Bernadette Wurzinger from Pixabay
Brown Bread by madmoissele from Pixabay
Sourdough Bread Image by markcraemers from Pixabay
Muesli Image by Pexels from Pixabay
Sicilian Stew Image by Ion68 from Pixabay
Pavlova Image by Blandine JOANNIC from Pixabay
Pizza Image by Igor Ovsyannykov from Pixabay
Calamari Image by Jonathan Valencia from Pixabay
Recipes are from my own handwritten recipe books apart from these:
There would have been no submission without the following people:
- My colleagues on the course: in particular:
- Elaine Roche for help with setting up local environment for automated testing
- Catriona McDonnell for constant support
- Moira Hartigan, Laura Hartnett, Miwa Mullane, Kavitha Santhanesh for resources, tips and support
- Our Course Facilitator Kasia Bogucka: for always being there advising, encouraging and supporting
- My mentor Tim Nelson: for his endless knowledge, patience and advice