Recipes Blog
Codestar is a recipes blog website made for the educational purposes. This website is created for the users who love good recipes. In this recipeblog website, there are a lot of functionalities for the users like, users can create the posts with the images, can add or read the post, edit or update the post, delete the post, can like the post and can leave a comment on the post.
The deployed link can be found here: Live Site
Table of contents
Users stories:
- As a user I can read the list of posts and then i can easily select anyone to view the post.
- As a user/Admin I can view the number of likes on each post.
- As a site Admin I can create, read, update and delete posts so that i can manage my blog content both from the front and back-end.
- As a user/Admin i can view comments on a post.
- As a user I can signup an account so that i can comment and like.
- As a user I can like on the posts.
- As a site user i can click on a post so that i can read the full content.
- As a site Admin i can approve comments.
Features
-
Header:
-
Sign Up:
-
Login:
-
Add the post:
- If the user is logged in as an admin, they are able to add a blog post both from the front and backend just simply by clicking on the "Add post" navigation link.
- Users can create the posts along with uploading images.
- The Blog posts section displays six posts at a time.
- steps to create the posts are as below
- First put the title in the title field for your post.
- Put the title tag for your post in the slug field.
- You can add the content for your post and style it using the editor showing in the content field.
- You can also upload the image using the upload image field for your post.
-
Comment
- Users can comment on the post. The comment section features information displayed from all users who have posted comments, such as username, the date of the comment and the comment's content. It also features a text field to the right, where users who are logged in are able to engage with each other/post and submit a comment.
- Users can comment on the post. The comment section features information displayed from all users who have posted comments, such as username, the date of the comment and the comment's content. It also features a text field to the right, where users who are logged in are able to engage with each other/post and submit a comment.
-
Update the post:
-
Delete the post:
-
Footer:
-
Error page
-
Agile technique:
- Agile technique is used in this project. You can have a look here Agile
-
Features left to implement
- I will add the user profile with image upload option in the future for the users who create the account and also edit profile option so they can edit the profile.
Testing
- Manual testing:
- All links, form submissions, admin privileges, user privileges, app functions were tested out and work as intended.
User story testing
- As a Site Admin I can create, read, update and delete posts (CRUD) so that I can manage my blog content both from the front and back-end. The site admin is able to perform all CRUD functionalities from either the Django admin panel, or if they prefer, from the front-end as well. Once a superuser is logged in they are able to See an "Add Post" page in the navigation bar, once they click on this, they are greeted with a form to add a post. If they click on any blog post they will see two links at the blog post header, "Edit" & "Delete".
- A sign up button is immediately visible on the landing page as a call to action for the user to sign up to get started. When the user clicks the button they are taken to the sign up page.
- Once the user has registered an account they can perform all the actions.
- As a Site User, I can login or logout of my account so that I can keep my account secure. If the user has registered an account they can access the login and logout buttons in the Navbar. As a Site User I can see my login status so that I know if I'm logged in or out.
- As a Site User / Admin I can view the number of likes on each post.
- All the posts display a heart icon with a number next to it (which indicate how many times the post has been liked).
- As a Site User / Admin I can view comments on an individual post so that I can read the conversation.
- As a Site Admin I can approve or disapprove comments so that I can filter out objectionable comments.
- As a Site User I can like or unlike a post so that I can interact with the content.
User Navigation
- As a User I can immediately understand the purpose of the site.
- As a Site User, I can view a paginated list of posts so that I can select a post to view. Also if a user click on a post then user can read the full comment and post.
- As a Site User, I can view my posts so that I can see and manage all posts.
Browser testing
Responsiveness
- The game is tested on the following devices:
Validator Testing
I have manually tested this project by doing the following:
- Passed the code through a PEP8 linter and confirmed there are no problems
- PEP8
- No errors were returned from PEP8 checker
- No errors were returned from PEP8 checker
- Html checker:
- No errors were returned from W3C Html
- No errors were returned from W3C Html
- CSS checker:
- No errors were returned from W3C CSS
- No errors were returned from W3C CSS
- JS checker:
- No errors were returned from JS HINT
- No errors were returned from JS HINT
- Accessiblity:
Device Testing
- Recipe Blog website was tested on several devices/environments (without any issues), including: MacBook Air 13.3" M1 2020 (macOS Monterey 12.3.1), ipad mini, iphone SE.
Browser Testing
- Recipe website was tested on several browsers (without any issues - across different devices), including: Google Chrome, Mozilla Firefox, Safari.
Technology Used
Libraries & Integrations
- Django
- Used as the primary framework to build the project.
- Django Crispy Forms
- Used to render the forms on the site.
- Django Allauth
- Used for user authentication on the site.
- Django Countries
- Used to populate the countries select field on the order form and profile form.
- Coverage
- Used to produce a testing report.
- Cloudinary
- Cloudinary was used to store the project's images.
- Bootstrap
- Used as a framework for styling and to make the site responsive via grid system.
- Balsamiq
- Balsamiq was used to make desktop/mobile mockups in order to visualise the project.
- PostgreSQL
- Database used in production.
- Heroku
- Online Cloud Platform used to deploy the live site.
- Gunicorn
- Used for deploying the project to Heroku.
- Fontawesome
- Used for icons across the website.
- Google Fonts
- Used to import "Roboto" & "Mrs Saint Delafield" fonts used across the website.
- jQuery
- Used to simplify JavaScript code.
- Github
- Used to store the project code after being pushed from Git.
- Git
- Used for version control to commit to Git and Push to GitHub.
- Heroku
- Heroku was used for hosting and deploying the game.
- Summernote
- Summernote WYSIWYG for Bootstrap.
Deployment
Set up project locally
First, ensure the following are set up on your IDE:
- PIP3 Python package installer.
- Python 3.8 or higher.
- Git version control.
To clone the project up locally you can follow the following steps:
-
Navigate to the repository - Repository
-
Click the code dropdown button and copy the url.
-
Open the terminal in your IDE and enter the following code:
-
git clone https://github.com/surba778/RecipeBlog.git
-
-
Install the dependencies needed to run the application by typing the following command into the terminal:
-
pip3 install -r requirements.txt
-
-
Set up the environment variables:
- Inside the env.py file add the following code:
-
import os os.environ["DATABASE_URL"] = "your database url" os.environ["SECRET_KEY"] = "Your secret key" os.environ["CLOUDINARY_URL"] = "Your cloudinary url"
-
- Inside the env.py file add the following code:
-
To set up the database migrate the database models by typing the following commands into the terminal:
-
python3 manage.py showmigrations python3 manage.py makemigrations python3 manage.py migrate
-
-
Create a superuser to have access to the django admin dashboard type the following commands into the terminal:
-
python3 manage.py createsuperuser
- Then set up the account by adding your username, email and password.
-
-
Finally, run the app locally by typing the following command into the terminal:
-
python3 manage.py runserver
-
Deploy to Heroku
- Create a Heroku app:
- Go to Heroku and create an account if you do not have one yet.
- From the dashboard click on 'new app' button, name your app and choose the region closest to you.
- On the resources tab set up a new Postgres database by searching for 'Postgres'.
- On your IDE, install 'dj_database_url' & 'psycopg2' to enable the use of the Postgres database:
- In the terminal type the following commands:
-
pip3 install dj_database_url pip3 install psycopg2-binary
-
- In the terminal type the following commands:
- Add the downloaded dependencies to the requirements file:
-
pip3 freeze > requirements.txt
-
- To setup the new database go to to settings.py, import 'dj_database_url', comment out the default database configuration and replace the default database with the following:
-
import dj_database_url DATABASES = { 'default': dj_database_url.parse("The URL of your Heroku Postgres database") }
-
- Run all migrations to the new Postgres database by entering the following command in the terminal:
-
python3 manage.py migrate
-
- Create a superuser by typing the following command into the terminal:
-
python3 manage.py createsuperuser
- Then set up the account by adding your username, email and password.
-
- In settings.py set up the following to use the Postgres database when the app is running on Heroku and the SQLite3 when the app is running locally:
-
DATABASES = { 'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))
-
- Install Gunicorn (which will act as our webserver) by typing the following commands into the terminal:
-
pip3 install gunicorn pip3 freeze > requirements.txt
-
- Type the following into the procfile:
-
web: gunicorn codestar.wsgi
-
- Log in into the Heroku terminal:
-
heroku login -i
-
- Disable collectstatic to prevent Heroku from collecting static files when deployed, by typing the following command into the terminal:
-
heroku config:set DISABLE_COLLECTSTATIC=1 --app "heroku_app_name"
-
- In settings.py add the hostname of the Heroku app, and allow localhost:
-
ALLOWED_HOSTS = ['"heroku_app_name".herokuapp.com', 'localhost']
-
- Deploy to Heroku by typing the following commands into the terminal:
-
heroku git:remote -a "heroku_app_name" git push heroku main
-
- To set up automatic deployments in Heroku when pushing code to github:
- On the deploy tab, connect to github by searching for the repository name and clicking 'Connect'.
- Click 'Enable Automatic Deploys"
- Generate a django secret key at Djcrety and add it to 'Settings' > 'Config variables' in Heroku.
- Update the settings.py file to collect the secret key from the environment, and use an empty string as default:
-
SECRET_KEY = os.environ.get('SECRET_KEY', '')
-
- Set debug to be true only if there's a variable called "DEVELOPMENT" in the environment.
-
DEBUG = 'DEVELOPMENT' in os.environ
-
Credits
Code
-
Simple Django Blog: Many thanks to John Elder's 'Create A Simple Blog With Python and Django' project - a great reference, inspiration and example.
-
Code Institute: for git template IDE and heroku deployment instructions. The Idea of README.md file and the codes used for the website were also learnt from Code Institute.
-
Code Institute: Many thanks to Matt Rudge and CI's 'I Think Therefore I Blog' Walkthrough project - a great reference, inspiration and example.
-
Codemy.com Few codes were also learnt from codemy.
-
Stack Overflow Few codes were also learnt from stack overflow.
-
pexels The best free stock photos.
Media
- Cloudinary is used in this project for images purposes.
Acknowledgement
- Mentors help and advice
- Tutors help