PP4 - Blog Project - Full Stack Python + Django Framework

About

Blog Project is a web app with a home page and a navigation bar, with a registration and login system using Django's built-in authentication views, Registerd users are allowed to send emails to the site's owner using Django's built-in email functionality and the smtplib library. It has implemented a database model for posts that includes fields like title, content, author, and date. It has a form for creating and editing posts that allows users to submit their own posts or update their own posts. It is implemented a view and template for displaying a list of all posts, with each post linking to a detail page for that post. On the detail page for each post, display the post's content and allow users to add comments and post's likes. Registered users are also allowed to delete or update their own posts, but not the posts of other users.

Features

Navigation Bar

The navigation bar is featured across all pages.

Navbar

Common navbar features:
- Logo: Displays website brand name at the top left.
- Search bar: The search bar allows readers to easily find specific topics or code examples on your blog.
For anonymous users:
- Home: Takes the user to the homepage of the website.
- Blog: Displays a list of blog articles.
- Sign in/Sign up: Allows users to create an account or log in to an existing account.
- About: Provides information about the website.
For registered users:
- Add Post: Allows the user to create a new post.
- Logout: Allows the user to log out of their account.
- Profile: Provides a personalized overview of the user's account, including any recent activity or updates.
- Profile settings: Allows the user to customize their account settings, such as changing their profile picture.
For staff:
Collapsed Navbar

Home Page

home page carousel

Positioned at the top of the home page, this welcome the user as they visit the site. It displays the image of the featured articles
Carousel image

home page featured articles

Positioned bellow the homepage carousel, this displays three featured articles. Each article links to the detail page and the category page for that post.
Featured articles

home page icons section

Positioned after the featured articles, there are three custom styled animated icons. Each icon visually explains the main purpose of the website.
Animated icons

home page featured articles

Positioned bellow the animated icons, this displays the three most recent articles. Each article links to the detail page for that post.
Recent articles

Footer

The footer is featured across all pages.

Footer

For anonymous users:
- Home: Takes the user to the homepage of the website.
- Blog: Displays a list of blog articles.
- Sign in/Sign up: Allows users to create an account or log in to an existing account.
- About: Provides information about the website.
- Social links:
  - Facebook custom make account.
  - Github website repository.
  - Linkedin developer's account.
For registered users:
- Logout: Allows the user to log out of their account.
- Profile: Provides a personalized overview of the user's account, including any recent activity or updates.
- Home: Takes the user to the homepage of the website.
- Blog: Displays a list of blog articles.
  - Social links:
  - Facebook custom make account.
  - Github website repository.
  - Linkedin developer's account.
- About: Provides information about the website.
- Contact: Users are allowed to send emails to the site's owner.

Posts or Articles List Page

Articles page

The articles page has a pagination feature set to three posts per page for a better user experience. It features a z-shaped design pattern that traces the route the human eye travels when they read. Each article links to the detail page and the category page for that post. Each article also displays useful information for the user like number of likes and comments, name of the author, date of creation and update date.

Articles Detail Page

Article detail page

The article detail page show everything about the post. Each article page displays useful information for the user like number of likes and comments, name of the author, date of creation and update date. Each article links to the articles list page and the category page that the post belong to. Registered users that are logged in are allowed to leave comments and like/unlike a post. Comments will be displayed in the article page once approved by the site owner or authorized staff member. The page features an update and delete buttons that allows a registered user to update or delete their own posts. Staff members are allowed to update or delete any post.

Add a New Post

Add a new post form

Registered users that are logged in are allowed to create new posts.

Form fields are:
- Title
- Content
- Category
- Featured image
- Status
Staff members are also allowed to create new posts, with added form fields:
- Approved
- Featured

Update Post Page

Update post page

Registered users that are logged in are allowed to update their own posts. The page features an update and delete buttons that allows a registered user to update or delete their own posts.

Allow to update fields are:
- Title
- Content
- Category
- Featured image
- Status
Staff members are allowed to update or delete any post as well as approve / disapprove or feature / unfeature a post.

Staff members are also allowed to update this fields:
- Approved
- Featured

Delete Post

Delete Post

The website features a delete confirmation modal that prompts the user to confirm the irreversible deletion of a post.

Profile Page

Profile page

After the user is logged in, it is redirected to their profile page. The profile page allows the registered user to manage their own posts. The profile page has a pagination feature set to five posts per page. Each page displays a table with information about the user's articles:
- number of posts
- post title ( links to article detail page )
- date created
- number of likes
- number of comments
- article status ( published / draft)
- approved / disapproved
- update button
- delete button

Post Management Page

Management page

Staff members have access to the management page. The management page has a pagination feature set to ten posts per page. Each page displays a table with information about the every published article:
- number of posts
- post title ( links to article detail page )
- date created
- number of likes
- number of comments
- article status ( published / draft)
- approved / disapproved
- update button
- delete button

Contact site owner

Contact form

Registered users that are logged in are allowed to contact the site owner via contact form.

Form fields are:
- Name
- Email
- Content
Received email inbox detail

Search Articles

Search articles

The search function searches by title, content, category and author. The placeholder text hints the user to find post.

Search Engine Optimization (SEO)

In order to improve the visibility of the site in a search engine's unpaid results the following has been implemented:

html semantic tags
meta keywords tag
xml sitemap
robots.txt
google ownership verification
SEO detail
- xml sitemap
- sitemap schema
- robots txt file
- seo meta tags

User Experience (UX)

Colours

Complementary colours palette

Blue was chosen as the main colour to use throughout the project because it will transmit calm, reliability and trust. Orange is used as the main accent colour transmiting energy and vitality. Green is the other accent colour meaning cleanliness and luck.

Typography colour palette

Typography is based on the main theme colour, mix with black and with progressive decresed opacity.

Typography

Montserrat Alternates font
- The main font used for this project is Montserrat alternates. The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to create this font in 2010. It is a sans serif font with excellent readability.
Lato font
- For headings the font used is Lato (“Lato” means “Summer” in Polish). It is a sans serif font by Warsaw-based designer Łukasz Dziedzic.

Wireframes

Blog homepage

Blog post list page

Blog post detail page

Blog posts management page

Blog user profile page

Blog Sign In form

Blog Sign Up form

Project Diagram

Project Diagram

Database relationships diagram

Post relationship
Comment relationship
Category relationship
User Profile relationship

Epics and User Stories

Epics

Manage Posts
- US #10
  - Create a post: As a Site User / Admin given that I am registered I want be able to create a post so that I can add content to the blog
  - Add a new post
- US #1
  - View post list: As a Site User I want be able to view a list of posts so that I can select one to read
  - Posts or articles list page
- US #2
  - Open a post: As a Site User I want be able to click on a post so that I can read the full text
  - articles detail page
- US #12
  - Update and Delete a post: As a Site User / Admin I want be able to update a post I created so that I can make changes or delete a post
  - Update post page
- US #11
  - Create drafts: As a Site User / Admin I want be able to create draft posts so that I can finish writing the content later
- US #14
  - View likes: As a Site User / Admin I want be able to view the number of likes on each post so that I can see which is the most popular or viral
- US #13
  - Like / Unlike: As a Site User I want be able to like or unlike a post so that I can interact with the content
- US #32
  - Add picture to post: As as Site User I want be able to upload a picture so that I can add a visual representation of my post
- US #33
  - Custom error pages: As a Site Admin/ User I want be able to have custom error pages with a return button so that I can return to the homepage if an error occurred
- US #34
  - As a Site User I want be able to send emails so that I can ask questions and make suggestions
- US #35
  - As a User / Admin I want to be able to Search for post so that I can find what I am looking for
  - Search articles
TO BE IMPLEMENTED:
- Vote posts: As a Site User I want be able to up/downvote a post so that I can interact with the content

Manage Comments
- US #4
  - Comment on a post: As a Site User I want be able to leave comments on a post so that I can be involved in the conversation
- US #3
  - View comments: As a Site User / Admin I want be able to view comments on an individual post so that I can read the conversation
- US #16
  - Approve comments: As a Site Admin I want be able to approve or disapprove comments so that I can filter out objectionable comments
- Update a comment: As a Site User I want be able to update a comment I made so that I can make changes or delete a comment
- Profile picture to comments: As a Site User I want be able to upload a profile picture so that I can see it when I comment on a post

Account Registration
- US #6
  - Account registration: As a Site User I want be able to register an account so that I can create, comment and like
- Social account sign in : As a Site User I want be able to Sign In with my social account so that Sign In quicker

Technologies

Languages
- HTML5
- CSS3
- JavaScript
- Python

Frameworks and Libraries
- Django: Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.
- Bootstrap: The world’s most popular framework for building responsive, mobile-first sites.
- Django Allauth: Integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication
- Django Crispy Forms: Crispy Forms let you control the rendering behavior of your Django forms in a very elegant and DRY way.
- psycopg2: Psycopg is the most popular PostgreSQL database adapter for the Python programming language.
- dj_database_url: This simple Django utility allows you to utilize the 12factor inspired DATABASE_URL environment variable to configure your Django application..
- Gunicorn: Green Unicorn, used as the Web Server to run Django on Heroku.
- Cloudinary: Used to store all blog images and uploaded images.
- Summernote: To provide a WYSIWYG editor for customizing new blog content and add images.
- Pillow: The Python Imaging Library adds image processing capabilities to your Python interpreter.
- Coverage: Used for measuring code coverage of Python test files. -->
- Jest: A delightful JavaScript Testing Framework, used for automated tests.

Software and Web Applications
- Am I Responsive: Checking the responsiveness.
- Code Beautify: Used to beautify html code.
- Balsamiq: Used to create the wireframes.
- Chrome DevTools: Used to test the response on different screen sizes, debugging and to generate a Lighthouse report to analyze page load.
- Font Awesome: Used throughout the site to add icons for aesthetic and UX purposes.
- Git: Git open source software for distributed version control.
- GitHub: Internet hosting service for software development and version control using Git.
- Google Fonts: Used to import fonts family Montserrat which is used as main font throughout the site and Lato font used for headings.
- Heroku: For deployment and hosting of the application.
- Elephant PostgreSQL: The database used for this application.
- HTML Validator: Check your code for HTML validation.
- JSHint: Check code for JavaScript validation.
- CI Python Linter Check code for python pep8 validation.
- Tiny PNG: Compressing images to smaller sizes.
- Unsplash: Stock images.
- W3 CSS Validator: Check your code for CSS validation.
- Gauger: Used to create the favicon Logo, create beautiful favicon with ease.
- Lucidchart: Used to create the site diagram.
- Contrast Checker Tool to check the contrast ratio.
- xml sitemaps Used to create the xml sitemap.

Testing

Testing

Running automated tests

JavaScript automated tests
- The automated javascript test can be executed using Jest as follows:
- If Jest is not installed then run the command:
```
  npm install --save-dev jest
```
- Jest-environment-jsdom is used as testing environment for Jest allowing to test code that interacts with the DOM using a virtual DOM powered by jsdom.
- Jest-environment-jsdom, need to be it installed in your project. This can be done using npm by running the following command:
```
  npm install --save-dev jest-environment-jsdom
```
- Run the js test file using the command :
```
  npm test
```

Unit test automated tests
- The automated django/python tests are executed using unittest.
- Test run using sqlite3 as Db, set DEBUG to True before running tests.
- Run the python tests using the command:
```
  python3 manage.py test
```

Coverage automated tests
- Test coverage for the django/python tests can be reviewed using the coverage tool:
- If coverage is not installed then run the command:
```
    pip3 install coverage
```
- Test run using sqlite3 as Db, set DEBUG to True before running tests.
- Run the following series of commands to determine test coverage:
```
  coverage run --source=blog manage.py test
  coverage report
  coverage html
  python3 -m http.server 
  (coverage results can be viewed in the browser in the htmlcov directory)
```
- To exclude certain files or directories from running or from the coverage report, you can use the --omit option in the coverage command:
```
coverage run --omit="myapp/migrations/*" manage.py test
```
- Alternatively create a .coveragerc folder and add the following:
```
[run]
omit=
    *staticfiles*
    *migrations*
    *env*
    *manage.py*
    *settings.py*

[report]
omit =
    *staticfiles*
    *migrations*
    *env*
    *manage.py*
    *settings.py*
```

Deployment to Heroku

Process
- On Heroku create an account and log in.
- Click new and create new app.
- Choose a unique name for your app, select region and click on Create App
- Create an account and set up a database with Elephantsql
- Under the Settings click Reveal Config Vars and set IP to 0.0.0.0 and the PORT to 8000
- In the terminal if you haven't do so:
  - Pip install dependencies.
  - Create requirements.txt ($ pip3 freeze --local > requirements.txt)
  - Create a Procfile ($ echo web: gunicorn <app_name>.wsgi > Procfile)
  - Create an evn.py file and add all your environment variables.
  - Create a .gitignore file and add your env.py files
- In the Heroku app dashboard, under Settings click on Reveal Config Vars:
  - Set "DATABASE_URL", CLOUDINARY_URL", "HEROKU_HOSTNAME" and "SECRET_KEY"
- Back in Gitpod push you changes to Github.
- In Heroku Deploy Tab, the deployment method select Github, scroll down to Manual deploy and deploy branch.
- Once the build is complete, go back to Heroku and click on Open App

Set up ElephantSQL as Database for this application

Process
- Go to the ElephantSQL website (https://www.elephantsql.com/) and create an account.
- After creating an account, you will be able to create a new PostgreSQL database. Choose the plan that best fits your needs and click "Create new instance".
- Give your database a name and select a region. You can also choose a database version if you have a specific version in mind.
- Once the database is created, you will see the database details page. Here, you can find the connection details for your database, including the hostname, port, database name, and username.
- To connect to the database, you will need a PostgreSQL client. There are many different clients available, such as pgAdmin and psql. Choose a client and follow the instructions to connect to your database using the connection details provided.
- Once you are connected to the database, you can start creating tables and inserting data. You can also use SQL commands to manage and query the data in your database.

Set Up Cloudinary to host images used by the application

Process
- Sign up for a Cloudinary account at https://cloudinary.com/users/register/free.
- After you have signed up, you will be taken to the dashboard. In the dashboard, click on the "Settings" tab and then click on the "Security" tab.
- In the "Security" tab, you will see your "Cloud Name", "API Key", and "API Secret". These will be needed later to authenticate your Django application with Cloudinary.
- Install the Cloudinary Python library by running the following command:
```
pip install cloudinary
```
- Add the following code to your Django settings file to configure the Cloudinary library with your account credentials:
```
CLOUDINARY_CLOUD_NAME = "your_cloud_name"
CLOUDINARY_API_KEY = "your_api_key"
CLOUDINARY_API_SECRET = "your_api_secret"
```
- Log in to Heroku and go to the Application Configuration page for the application. Click on Settings and click on the "Reveal Config Vars" button and add the following:
```
KEY: CLOUDINARY_URL
VALUE: cloudinary://CLOUDINARY_API_KEY:CLOUDINARY_API_SECRET@CLOUDINARY_CLOUD_NAME
```
- Add the Cloudinary library to your Django project by adding 'cloudinary' to the INSTALLED_APPS list in your Django settings file:
```
INSTALLED_APPS = [    ...    'cloudinary',]
```
- Run the following command to apply the changes to your Django project:
```
python manage.py migrate
```
- You are now ready to use Cloudinary in your Django project. To use Cloudinary to manage and serve your media files, you can use the CloudinaryField field in your Django models.
- For example, to create a model with a Cloudinary image field, you can do the following:
```
from django.db import models
from cloudinary.models import CloudinaryField

class MyModel(models.Model):

name = models.CharField(max_length=255)
image = CloudinaryField('image')
```
- You can then use the image field just like any other Django field to store and retrieve images from Cloudinary.

Set Up Gmail in Django

Process
- Install the django-email-backend package by running the following command:
```
  pip install django-email-backend
```
- In your Django settings file (typically settings.py), add the following lines to configure the email backend:
```
  EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
  EMAIL_HOST = 'smtp.gmail.com'
  EMAIL_PORT = 587
  EMAIL_USE_TLS = True
  EMAIL_HOST_USER = 'your-gmail-username@gmail.com'
  EMAIL_HOST_PASSWORD = 'your-gmail-password'
```
- Make sure that you have enabled "Less secure app access" in your Gmail account settings. To do this, go to your Google Account settings, click on "Security" and then scroll down to "Third-party apps with account access." Make sure that "Allow less secure apps" is turned on.
- Test the email backend by sending a test email from your Django application. You can do this by using Django's built-in send_mail function, like this:
```
  from django.core.mail import send_mail

  send_mail(
  'Subject here',
  'Here is the message.',
  'from@example.com',
  ['to@example.com'],
  fail_silently=False,
  )
```
- If everything is set up correctly, this should send a test email to the specified address using your Gmail account as the email backend.

Clone a Github repository

Process
- To clone a repository from GitHub, you will need to have Git installed on your computer. If you don't already have Git installed, you can download it from the official website (https://git-scm.com/).
- Once you have Git installed, open a terminal window and navigate to the location where you want to store the repository on your local machine. Then, use the following command to clone the repository:
```
git clone https://github.com/USERNAME/REPOSITORY.git
```
- Replace "USERNAME" with the GitHub username of the owner of the repository, and replace "REPOSITORY" with the name of the repository you want to clone.
- For example, if you want to clone this repository the command would be:
```
git clone https://github.com/JoseMGuerra/ci-pp4-django-fsf <where to clone>
```
- This will create a new directory on your local machine with the same name as the repository, and download all the files from the repository into that directory.
- You can also use a graphical Git client, such as GitHub Desktop, to clone a repository from GitHub. With GitHub Desktop, you can simply enter the URL of the repository and choose a local directory to clone the repository to.

DEBUGING

Modal error

  TypeError: $(...).modal is not a function
  solution: place bootstrap script in base.html head tag.

Known Bugs

Currently no known bugs

Resources / Credits / Inspiration

Python documentation
Django project documentation
Code with Stein
Corey Schafer
Free code camp
Stack over flow
I Think Therefore I Blog walk-through project

Acknowledgments

Thank you to my mentor Brian Macharia for his help and invaluable feedback.

Happy coding!

Name		Name	Last commit message	Last commit date
Latest commit History 66 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
.vscode		.vscode
blog		blog
blog_settings		blog_settings
home		home
profiles		profiles
readme_images		readme_images
static		static
templates		templates
.coveragerc		.coveragerc
.gitignore		.gitignore
.gitpod.dockerfile		.gitpod.dockerfile
.gitpod.yml		.gitpod.yml
Procfile		Procfile
README.md		README.md
TESTING.md		TESTING.md
manage.py		manage.py
package-lock.json		package-lock.json
package.json		package.json
requirements.txt		requirements.txt
robots.txt		robots.txt
sitemap.xml		sitemap.xml

josemguerra/ci-pp4-django-fsf

Folders and files

Latest commit

History

Repository files navigation

PP4 - Blog Project - Full Stack Python + Django Framework

About

Features

Navigation Bar

Home Page

home page carousel

home page featured articles

home page icons section

home page featured articles

Footer

Posts or Articles List Page

Articles Detail Page

Add a New Post

Update Post Page

Delete Post

Profile Page

Post Management Page

Contact site owner

Search Articles

Search Engine Optimization (SEO)

User Experience (UX)

Colours

Typography

Wireframes

Project Diagram

Database relationships diagram

Epics and User Stories

Epics

Technologies

Testing

Running automated tests

Deployment to Heroku

Set up ElephantSQL as Database for this application

Set Up Cloudinary to host images used by the application

Set Up Gmail in Django

Clone a Github repository

DEBUGING

Known Bugs

Resources / Credits / Inspiration

Acknowledgments

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages