Project milestone 4 for Code Institute Full-stack development program. This project is a Full Stack website built using the Django framework. Tasty Blog is a recipe book where users can look or search for a recipe to prepare. When the user is logged in they can also like/unlike a post and comment on a post. They can also share their favourite cookbooks by adding a post on the Books Page and upload or update their user image and details.
README Table Content
- Tasty Blog - Introduction
- User Experience - UX
- Design
- Database Diagram
- Features
- Home Page
- Home Page - Highlight Posts
- About Page
- Blog Page
- Post Detail Page - Top
- Post Detail Page - Steps
- Post Detail Page - Comments
- Edit Comments Page
- Contact Page
- Categories Page
- Categories Results
- Books Page
- Add/Edit Books Page
- Search Box
- Search Results Page
- Search Results - Input Empty
- Search Results - No Results Found
- Signup Page
- Login Page
- Logout Page
- User Profile Page
- Navbar
- Footer
- Messages and Interaction With Users
- Admin Panel/Superuser
- Technologies Used
- Creating the Django app
- Deployment of This Project
- Final Deployment
- Forking This Project
- Cloning This Project
- Credits
- Special Thanks
- As a website user, I can:
- Navigate around the site and easily view the desired content.
- View a list of recipes and choose accordingly.
- Search recipes to find specific recipes.
- Click on post to read the recipe details.
- Register for an account to avail of the services offered to members.
- View the number of likes on a recipe thereby showing which is most popular.
- View comments on recipes so that I can read other users opinions.
- As logged in website user, I can:
- Like/unlike recipes marking the recipes I enjoyed.
- Comment on recipes and give my opinion about the posts.
- Delete my previous comments.
- Manage my profile by updating my details and user image.
- Share my favourites cookbooks by posting them on the Books Page.
- Edit my favourite cookbook posted previously.
- Delete my favourite cookbook posted previously.
- Logout from the website.
- As a website superuser, I can:
- Create and publish a new recipe.
- Create draft recipe posts that can be reviewed and finalised later.
- Create a new user, recipes, author and categories.
- Delete user, recipes, author, categories and comments.
- Approve user's comments.
- Edit user's favourite cookbook that was posted previously.
- Delete user's favourite cookbook that was posted previously.
- Change the website permissions for a user.
All functionality and development of this project were managed using GitHub which Projects can be found here
- To provide users with a good experience when using the food recipes website.
- To provide users with a visually pleasing website that is intuitive to use and easy to navigate.
- To provide a website with a clear purpose.
- To provide role-based permissions that allows user to interact with the website.
- To provide tools that allow users to search for recipes.
- The colour scheme is kept simple by opting for a combination of white text set against the image background and black text against the white background. For the navbar was set as a white background colour that changes when the user scrolls. For a linear gradient, 3 colours were used dark blue, orange and purple. This gradient is also used as a search box background. To highlight the icons an interactive colour set of light blue was used.
- The Lato font is used as the main font for the whole project and the Kaushan font is used to display the word enjoy in the Post Details and About pages.
- All the imagery is related to the recipes and website design. Only 7 images are static. The remaining imagery will be uploaded by the author to the database.
Wireframes for this project can be located here
- The hero image welcomes the user with a short message advertising what the website is about. These
are 3 carousel images with a button. When the button is pressed, it brings the user down to the highlighted recipes.
- In the highlighted posts, users can see a selection of 6 recipes. These recipes are
chosen by the site admin by clicking the featured box in the post database.
- The About Page gives, users information about the Tasty Blog website. It introduces the users to the
website. It also details the main purpose and the goal of the blog.
- On the Blog Page, users have access to the full recipes posts available on the website.
The user can choose to see the recipe detail by clicking on the recipe card.
- At the top of the Post Details Page, users can see the post's main
image and they can also have access to information about the post. The
post information includes category, recipe name, rating stars,
time to prepare, author name and image, posted date and the
option to like/unlike the post. It will also show how many likes and
comments the post has received.
- In this page section, users can read the ingredients and follow the steps to complete the recipe.
- At the bottom of this page, users can read the comments posted by other users. If the user is logged in or is a superuser they have access to the buttons for deleting or updating comments.
- On this page, users are allowed to comment, delete and edit their own post comments. The website superuser can delete or update any comments on the blog without having to access the admin panel.
- The Contact Page allows users to have access to the Tasty blog contact details. Users can also send an email to info@tastyblog by using the contact form available on this page.
- On the Categories Page, users can see the categories available in the blog and filter the posts by category.
- On the Categories Results Page, users can access the post filtered by the chosen category.
- On this page, registered users can see favourite books posted by other users. If they had already published a post they are allowed to edit or delete their own posts
On this page, registered users can fill out the form to add or edit a post with their favourite cookbooks.
- In this box, the users can search by inputting a keyword in the search tool. This allows the user to try and find the recipe they are looking for.
- On the Search Results Page, users can see the recipes found by their search. When their recipe is located, the user can go to the Post Details Page by clicking on the card result.
- On the Search Results Page - Input Empty, users will see this message if their search returns with an empty input.
- On the Search Results Page - No Results Found, users will see this message if there is nothing found for the search.
- On the Signup Page, a new user can sign up for the Tasty Blog website by filling out and then submitting the form.
- On the Login Page, users can log in to the website by inputting the username and password and have access to website services for a user registered.
- On the Logout Page, users can confirm that they wish to exit the website.
- On the Profile Page, users have access to their own information and can update their user name, email and profile image.
- The navigation bar is present at the top of every page and houses all links to the various other pages.
- The options to Register or Log in will change to the option to log out once a user has logged in.
- Once a user has signed in, more options such as profile page and user image will be available in the navbar.
- A search icon is nested in the navbar and once clicked it will open the search box.
- The navbar is fully responsive, collapsing into a hamburger menu when the screen size becomes smaller.
- In the navbar users can access the categories list by clicking on the dropdown menu.
- On the website footer, users can see basic information about the blog such as contact, social media, copyright, and a quote about food recipes.
- Some interactive messages were added to the project to make the navigation on the website easier and to improve the user's experience.
- When users sign up to the website they will see a message at the top of the page saying "Successfully signed in as
(username)".
- When users sign in to the website they will see a message at the top of the page saying "Successfully signed in as
(username)".
- When users log out of the website they will see a message at the top of the page saying "You have signed out".
- When users update their profile they will see a message at the top of the page saying that their account has been updated.
- *When users are logged in to the website they can like a post and they will see a message at the top of the page
saying "You have liked this post".
- When users are logged in to the website they can unlike a post that has been liked by the user and they will see a message
at the top of the page saying "You have unliked this post".
- When users are logged in to the website they can comment on a post and after they submit the comment they will see a
message at the top of the page saying "Your comment was sent successfully and is awaiting approval".
- After a user submits a comment, they will see a message over the input comment saying "Thanks (username). Your
comment is awaiting approval!
- When users are logged in to the website and they have previously posted a comment or if the user is a superuser they will see the
Delete and Edit buttons at the bottom of comments.
- If they wish to delete their comment, they can press the button Delete and a Bootstrap box model will pop up with the message
"Are you sure you want to delete your comment?".
- After pressing the Delete button again inside the Bootstrap box model they will see a message on the
top of the page, "Your comment was deleted successfully".
- After pressing the Update, users will see a message on the top of the page, "The comment was successfully updated".
- After users submit the form to info@tastyblog successfully, they will see the message, "Thanks for your email!
We will contact you as soon as possible".
- If the email was not submitted successfully, users will see the message, "Sorry, something went wrong!
Try to submit the email again".
- When users are logged in to the website they can publish a post with a favourite cookbook and after they submit the
post they will see a message at the top of the page saying "Your post was sent successfully and is awaiting approval".
- When users are logged in to the website they can edit their own previously published posts and they will see the message
"The post was successfully updated" after pressing the Submit button.
When users are logged in to the website and they wish to delete their posts, they can press the button Delete and a
Bootstrap box model will pop up with the message "Are you sure you want to delete your post?".
- After pressing the Delete button again inside the Bootstrap box model they will see a message on the
top of the page, "Your post was deleted successfully".
- Any user can search for a keyword using the input search and if the search is done with an empty input they will see a
message saying, "You forgot to search a recipe. Please try searching again.".
- And if there are no results matching or similar to the keyword, the user will see the following message, "We are sorry.
There are no searches for (keyword) on the website. Try the search again".
- On the Admin Panel, as an admin/superuser I have full access to CRUD functionality so I can view, create, edit and delete the following ones:
- Posts
- Comments
- Author
- Categories
- Profiles
- Books
*As admin/superuser I can also approve comments, approve posts and change the status and give other permissions to the users.
- Gunicorn
As the server for Heroku - Cloudinary
Was used to host the static files and media - Dj_database_url
To parse the database URL from the environment variables in Heroku - Psycopg2
As an adaptor for Python and PostgreSQL databases - Summernote
As a text editor - Allauth
For authentication, registration, account management - Crispy Forms
To style the forms
- Bootstrap
Was used to style the website, add responsiveness and interactivity - Jquery
All the scripts were written using jquery library - Git
Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub - GitHub
GitHub is used to store the project's code after being pushed from Git - Heroku
Heroku was used to deploy the live project - PostgreSQL
Database used through heroku. - VSCode
VSCode was used to create and edit the website - Lucidchart
Lucidchart was used to create the database diagram - PEP8
PEP8 was used to validate all the Python code - W3C - HTML
W3C- HTML was used to validate all the HTML code - W3C - CSS
W3C - CSS was used to validate the CSS code - Fontawesome
To add icons to the website - Google Chrome Dev Tools
To check App responsiveness and debugging - Google Fonts
To add the 2 fonts that were used throughout the project - Balsamiq
To build the wireframes for the project - PIXLR
To convert the images to webp format - CANVA
To build the logos for the project - Coolors
To build the colour palette of the project - Emailjs
To send emails from the contact form
Testing results here
- Go to the Code Institute Gitpod Full Template Template
- Click on Use This Template
- Once the template is available in your repository click on Gitpod
- When the image for the template and the Gitpod are ready open a new terminal to start a new Django App
- Install Django and gunicorn:
pip3 install django gunicorn - Install supporting database libraries dj_database_url and psycopg2 library:
pip3 install dj_database_url psycopg2 - Create file for requirements: in the terminal window type
pip freeze --local > requirements.txt - Create project: in the terminal window type django-admin startproject your_project_name
- Create app: in the terminal window type python3 manage.py startapp your_app_name
- Add app to the list of installed apps in settings.py file: you_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!
- This site was deployed by completing the following steps:
- Log in to Heroku or create an account
- On the main page click the button labelled New in the top right corner and from the drop-down menu select Create New App
- You must enter a unique app name
- Next select your region
- Click on the Create App button
- Click in resources and select Heroku Postgres database
- Click Reveal Config Vars and add a new record with SECRET_KEY
- Click Reveal Config Vars and add a new record with the
CLOUDINARY_URL - Click Reveal Config Vars and add a new record with the
DISABLE_COLLECTSTATIC = 1 - The next page is the project’s Deploy Tab. Click on the Settings Tab and scroll down to Config Vars
- Next, scroll down to the Buildpack section click Add Buildpack select python and click Save Changes
- Scroll to the top of the page and choose the Deploy tab
- Select Github as the deployment method
- Confirm you want to connect to GitHub
- Search for the repository name and click the connect button
- Scroll to the bottom of the deploy page and select the preferred deployment type
- Click either Enable Automatic Deploys for automatic deployment when you push updates to Github
- Create a runtime.txt
python-3.8.13 - Create a Procfile
web: gunicorn your_project_name.wsgi - When development is complete change the debug setting to:
DEBUG = Falsein settings.py - In this project the summernote editor was used so for this to work in Heroku add:
X_FRAME_OPTIONS = SAMEORIGINto settings.py. - In Heroku settings, delete the config vars for
DISABLE_COLLECTSTATIC = 1
- Fork this project by following the steps:
- Open GitHub
- Find the 'Fork' button at the top right of the page
- Once you click the button the fork will be in your repository
- Clone this project by following the steps:
- Open GitHub
- You will be provided with three options to choose from, HTTPS, SSH or GitHub CLI, click the clipboard icon in order to copy the URL
- Once you click the button the fork will be in your repository
- Open a new terminal
- Change the current working directory to the location that you want the cloned directory
- Type 'git clone' and paste the URL copied in step 3
- Press 'Enter' and the project is cloned
- All food recipes were taken from BBC Goodfood
- The cookbook’s information and images were sourced from Eason’s
- The images were taken from Unsplash
- The Tasty Blog logos and favicon are my own design and build
- Special thanks to my mentor Sandeep Aggarwal, my colleagues at Code Institute, Kasia Bogucka, and Mairéad Gillic for their assistance throughout this project.