Skip to content

madeleine2086/pp4

BranchesTags

Repository files navigation

BeWell Blog

BeWell Blog is a website with posts about mental health, balance and stress. It's a place where users can read about methods to help themselves and understand that they're not alone in their struggles. On the website users not only can read blog posts but also, when registered and logged in, comment on them, engaging in conversations with other registered users.

Live Site

A live version of the site can be found here

Contents

Introduction

BeWell Blog is a full stack Django project that runs on Heroku.

User Experience - UX

Back to the top.

User Stories

  • As a website user, I can:
  1. I can view a paginated list of posts so that I can choose which post I want to view.
  2. I can click on a post so that I can read the full text.
  3. I can create and register an account so that I can comment on a post.
  4. I can view comments on an individual post so that I can read the conversation.
  5. I can click on the About link so that I can read about the site.
  6. I can choose between different categories so that I can view posts in category that interests me the most.
  • As an authenticated website user, I can:
  1. I can comment on a post so that I can say what I think and engage in a conversation.
  2. I can modify or delete my comments.
  3. I can view comments on an individual post so that I can read the conversation.
  • As a website superuser, I can:
  1. I can view comments on an individual post.
  2. I can create draft posts so that I can finish writing the content later.
  3. I can create or update the about page content so that it is available on the site.
  4. I can create, read, update and delete posts.
  5. I can approve or disapprove comments so that I can filter out inappropriate or insulting comments.

Agile Methodology

The Agile Methodology was used to plan this project. This was implemented through Github and the Project Board which can be seen here - BeWell Blog User Stories

The Scope

  • To provide users with a simple, easy to navigate and visually pleasing website.
  • To provide a website with
  • To allow users to interact with the website by commenting.

Design

Back to the top.

Colours

BeWell Blog was designed to be a simple website that evokes a sense of tranquility, relaxation, and peacefulness. The aim was to create a soothing atmosphere for users visiting a website. I decided to stick with the neutral colour palette to match the idea behind the blog and maintain a nice visual contrast when viewing the site. Colours used are whitesmoke for the body, also silver, #373938, #dbd7d2, #5d9857, #8d9292, #2d3636, #363535, #fefefe rgb(255, 250, 250) and rgb(250, 250, 250). Bootstrap 5 native font stack was utilised.

Media

Database Diagram

Features

Back to the top.

Homepage

  • It is the landing page of the website which user can see first when the site loads. The homepage displays the latest 6 posts.

Navigation Desktop

Back to the top.

  • The site navigation is done through the navigation bar at the top of each page & this is consistant throughout the website.

  • The navigation bar at the top of each page is sticky to allow access to the navigation at any time.

  • Options on the navigation bar change depending on whether the user is logged in or not, or is an admin/staffuser or not.

Navigation Mobile

Back to the top.

Posts Details

Back to the top.

  • When a regular user is visiting they can view and read a post onthe post detail page.

  • When an authenticated user is logged in they can also comment on a post.

  • If a comment is submitted this will have to be approved by an Admin user before it is displayed on the site.

All Posts

Back to the top.

  • To see all posts on a paginated page click the blog logo or home button.

Categories

Back to the top.

  • To see categories for posts click the Category menu in the navbar and click on selected category in a dropdown menu. All post belonging to chosen category will be displayed.

Admin on the Backend

Back to the top.

  • Superusers or staffusers are able to managae the posts and categories on the backend.

Possible Future Features

Back to the top.

  • User Profile feature and Admin functionality on the frontend.

  • Social login to allow the user to signup using Facebook or Google

  • Password reset on the users profile page

Technologies

Back to the top.

Languages Used

Django Packages Used

Frameworks - Libraries - Programs Used

Development & Testing

Back to the top.

Manual Testing Results

  • Manual Testing results here

Deployment

Back to the top.

Heroku

The project was deployed via Heroku, and the live link can be found here: BeWell Blog

This project was developed utilising the Code Institute Template for Gitpod.

Before deploying to Heroku pip3 freeze > requirements.txt was used to add all dependencies for deployment and created the Procfile with web: gunicorn cocktailnerd.wsgi.

Created .slugignore with /documentation, README.md & TESTING.md as paths to ignore in Heroku as I don't want the documentation to upload to Heroku.

This project was deployed to Heroku using the Heroku CLI details below

  • Login To use the CLI you must log in to your Heroku account. To do this you will need to enter the command heroku login -i in the terminal. It requires the email and password you used to sign up. If you have enabled multi-factor authentication (a recommended security practice) then instead of your password you need an API key. To get the API key go to your account settings and scroll down to the section ‘API Key’. Click reveal and copy that, then paste it into the password prompt.



  • Creating A Heroku App Now that you are logged in, the first thing is to create a new app. Heroku creates a URL based on your app name, so it must be unique not only on your account, but across the whole site. You may need to try a few different names. To create an app use the following command, where myapp is the name of your app.



  • Here the app heroku-cli-example has been created with an output of the website URL. It also displays and sets the git remote repository which will be used to deploy. By default the region will be set to the US. If you would prefer a server based in the EU then you can specify the region with the flag EU

  • When you push code to Heroku it will look at the repository contents to decide how to build the project. One of the factors taken into consideration is the package file. With a Python project the standard file is a requirements.txt file, which will have the list of packages needed to run the project. If this file is present it will build the project using the Python buildpack.

  • It is also possible to specify the buildpack manually. More information about buildpacks can be found in the documentation. To check the buildpack for the project you can enter heroku buildpacks in the terminal.

Deployment Steps On Heroku.

  • Run this command pip3 install pip3 install 'django<4' to install django.
  • Added these libraries:pip3 install dj_database_url psycopg2,pip3 install dj3-cloudinary-storage
  • Created requirements.txt file where I can save all the libraries I've installed:pip3 freeze --local > requirements.txt
  • To create my project typed this command:django-admin startproject cocktailnerd
  • To create my app:python3 manage.py startapp cocktailapp
  • To make this app work, Into the setting.py file inside INSTALLED_APPS added cocktailapp
  • To migrate changes typed this command:python3 manage.py migrate
  • To run the test if the project is working python3 manage.py runserver
  • When deploying for the first time on Heroku, you must first register with Heroku.
  • Create your project name and location.
  • To add Database into the app, Locate in the Resources Tab, Add-ons, search and add 'Heroku Postgres'
  • Copy DATABASE_URL value, by going into the Settings Tab, click reveal Config Vars, Copy Text
  • In your workspace Create new env.py file.
  • Import os library:import os
  • Set environment variables:os.environ["DATABASE_URL"] = "Heroku DATABASE_URL"
  • Add in secret key:os.environ["SECRET_KEY"] = "mysecretkey"
  • Add Secret Key to Config Vars in Heroku settings:SECRET_KEY, "mysecretkey"
  • Add env.py file to the settings.py file:import osimport dj_database_urlif os.path.isfile("env.py"):import env
  • Remove the insecure secret key and replace - links to the SECRET_KEY variable on Heroku:SECRET_KEY = os.environ.get('SECRET_KEY')
  • Comment out the old DATABASES variable in setting.py file and add this instead:DATABASES = { 'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))}
  • Save all files and Make Migrations:python3 manage.py migrate
  • Make account with Cloudinary To get static and media files.
  • From Cloudinary Dashboard, Copy your CLOUDINARY_URL:
  • Add Cloudinary URL to env.py file:os.environ["CLOUDINARY_URL"] = "cloudinary://************************"
  • Add Cloudinary URL to Heroku Config Vars:"cloudinary://************************"
  • Temporalliy add DISABLE_COLLECTSTATIC inside the heroku config Vars:DISABLE_COLLECTSTATIC, 1
  • Add Cloudinary Libraries to settings.py installed apps:INSTALLED_APPS = ['cloudinary_storage', 'django.contrib.staticfiles', 'cloudinary']
  • In the settings.py file under the STATIC_URL = 'static/' add:
STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  • Place under the BASE_DIR line in settings.py:TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')
  • Change the templates directory to TEMPLATES_DIR Place within the TEMPLATES array:TEMPLATES = [{'DIRS': [TEMPLATES_DIR],],},},]
  • Add Heroku Hostname to ALLOWED_HOSTS:ALLOWED_HOSTS = ["project4-cocktail-nerd.herokuapp.com", "localhost"]
  • Create 3 new folders on the root directory: media, static, templates
  • Create Procfile needed for Heroku on the root directory and inside the file add this:web: gunicorn dentist.wsgi
  • Before deploying on heroku make sure: DEBUG = False Remove DISABLE_COLLECTSTATIC from the config vars.
  • Created .slugignore with /documentation, README.md & TESTING.md as I don't want the documentation to upload to Heroku.
  • Click Enable Automatic Deploys for automatic deployment when you push updates to Github.
  • Select the correct branch for deployment from the drop-down menu and click Deploy Branch for manual deployment.

Forking the GitHub repo

If you want to make changes to the repo without affecting it, you can make a copy of it by 'Forking' it.

  1. Log in to your GitHub account
  2. Navigate to the repository HERE
  3. Select the 'Fork' button in the top right corner of the page (under your account image)
  4. The repo has now been copied into your own repos and you can work on it in your chosen IDE
  5. If you have any suggestions to make regards to the code to make the site better, you can put in a pull request

Cloning the repo with GitPod

  1. Log in to your GitHub account
  2. Navigate to the Repository HERE
  3. Select the 'Code' button above the file list on the right had side
  4. Ensure HTTPS is selected and click the clipboard on the right of the URL to copy it
  5. Open a new workspace in GitPod
  6. In the bash terminal type 'git clone [copy url here from step 4]'
  7. Press enter - the IDE will clone and download the repo

Github Desktop

  1. Log in to your GitHub account
  2. Navigate to the Repository HERE
  3. Select the 'Code' button above the file list on the right had side
  4. Select 'Open with GitHub Desktop'
  5. If you haven't already installed GitHub desktop application - you will need to follow the relevant steps to do this
  6. The repo will then be copied locally onto your machine

Download and extract the zip directly from GitHub

  1. Log in to your GitHub account
  2. Navigate to the Repository HERE
  3. Select the 'Code' button above the file list on the right had side
  4. Select 'Download Zip'
  5. Once you have the Zip downloaded, open it with your prefered file decompression software
  6. You can then drag and drop the files from the folder into your chosen IDE or view/edit them on your local machine
  7. If you want to create a web-app from the repo please follow the instructions in "Project Deployment"

Credits

Back to the top.

Other resources

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages