Full-Stack Toolkit Project purpose: This site is a blog style news site, aimed to let users keep up with the fast changing world problems In this project, ive built a Full-Stack site based on business logic used to control a centrally-owned dataset. Set up an authentication mechanism and provide role-based access to the site's data or other activities based on the dataset.

• HTML, CSS, JavaScript, Python+Django
• Relational database (recommending MySQL or Postgres)

• to inform users about whats happening to the planet
• to educate users about the Planet, what can they do to help
• to increase users interests and curiosity on the affects harming the planet
• to provide a platform for users to share posts, comments and interact with each other
• to create a community with people that has common interests in saving the planet

• Posts can be up/downvoted
• Comments can be left on a post
• Time/Date of posting
• Topic groupings/categories

• to keep up with planet news
• to meet other like mined people
• to interact and discuss with others on specific topics
• to learn from each other about different problems globally
• to share posts, ideas, opinions with people who understand you
• to show your passion to other people who dont know alot about it and want to learn.
• to post, read and comment on news stories.

This has been an ongoing problem for the planet, and since the world has reopened from covid pandemic we have put aside the real issue on saving our planet. surely if we caused these disasters we can fix them. This is why we need everyone todo there part.

Scientists say eight years left to avoid worst effects.” : “IPCC climate report gives us 10 years to save the world.” 22-jan-2022

The massive melting of glaciers as a result of global heating has caused marked shifts in the Earth's axis of rotation since the 1990s,

Global sea level rise accelerated since 2013 to a new high in 2021, with continued ocean warming and ocean acidification.

I decided to build this project, because I personally believe this is our future, and I would like more people to be aware of this, get interested and try to understand it. For those who have the same interests as me, I hope this site can be a place to share and exchange information, knowledge and opinions about the planet and how we all can make a difference.

Consumers who come to the site are greated depending on there loged in status or not. Being a member of the site gives you more accessibility being able to write, like and comment on individual blogs.

Eg) Not logged in

Eg) Logged in

I decided that any new post or comment added by the user needs approval, reasons being:

I have no one to moderate the post, that is the reason any posts coming from user needs to be approved by admin first, they will be left as a draft until admin approves. To prevent spam, and/or post that is unrelated to Planet Earth To make sure the language is appropriate

1. As a Site User I can view a list of posts so that I can select one to read
2. As a Site User I can click on a post so that I can read the full text
3. As a Site User / Admin I can view the number of likes on each post so that I can see which is the most popular or viral
4. As a Site User / Admin I can view comments on an individual post so that I can read the conversation
5. As a Site User I can register an account so that I can comment and like
6. As a Site User I can leave comments on a post so that I can be involved in the conversation
7. As a Site User I can like or unlike a post so that I can interact with the content
8. As a Site Admin I can create, read, update and delete posts so that I can manage my blog content
9. As a Site Admin I can create draft posts so that I can finish writing the content later
10. As a Site Admin I can approve or disapprove comments so that I can filter out objectionable comments
11. As Site User i can create a post so that others can views my opinion on relevant topics
12. As a Site User i can view a paginated list of posts so that easily select which post to view
13. As Site User i can create blogs so that i can share my views on relevant topics aswell
14. As Site user i can maintain the quality of material being read so that the reader has fresh material

• live wireframe

• a link to live wireframe

Exo & Ubuntu are the primary fonts I wanted to use because there soft and complamentarty. Giving of a sense of peace. the stroke in these font work well together.

• Exo
• Ubuntu

As a fall back I used Roboto and lato which is a front i used before and lato as well as the standard sans serif. Good idea to have a fall back so your content is viewable.

In terms of the color scheme I went with something slightly different. I used the planet as inspiration. I think these colors bring warmth and a real feel for the earth with the browns blues and greens. Using different variation of the colors.

• colors

Jigsaw CSS validator was used to validate CSS code

CSS

CSS warnings

Nu Html checker was used to validate HTML code

HTML

Pep8 Used to validate Python code

Python

Below are the installations we need before writing any code

Install the server to use when deploy on Heroku

pip3 install django gunicorn

Supporting libraries:

Postgresql and psycopg2
pip3 install dj_database_url psycopg2

Run Cloudinary

pip3 install dj3-cloudinary-storage

Create file list: Create requirement.txt

pip3 freeze --local > requirements.txt

Create new django project:

django-admin startproject Filename:

Create blog app

python3 manage.py startapp blog

Your Blogs page has an edit and delete button. Delete btn wouldnt work due to its properties. I had 2 properties instead of 3.. As Bootstrap5 requirers 3 properties.

This project was developed using a GitPod workspace. The code was commited to Git and pushed to GitHub using the terminal.

To deploy this page to Heroku from its GitHub repository, the following steps were taken:

1. Create the Heroku App:

   • Select "Create new app" in Heroku.
   • Choose a name for your app and select the location.

2. Attach the Postgres database:

   • In the Resources tab, under add-ons, type in Postgres and select the Heroku Postgres option.

3. Prepare the environment and settings.py file:

   • In the Settings tab, click on Reveal Config Vars and copy the url next to DATABASE_URL.
   • In your GitPod workspace, create an env.py file in the main directory.
   • Add the DATABASE_URL value and your chosen SECRET_KEY value to the env.py file.
   • Add the SECRET_KEY value to the Config Vars in Heroku.
   • Update the settings.py file to import the env file and add the SECRETKEY and DATABASE_URL file paths.
   • Update the Config Vars with the Cloudinary url, adding into the settings.py file also.
   • In settings.py add the following sections:
     • Cloudinary to the INSTALLED_APPS list
     • STATICFILE_STORAGE
     • STATICFILES_DIRS
     • STATIC_ROOT
     • MEDIA_URL
     • DEFAULT_FILE_STORAGE
     • TEMPLATES_DIR
     • Update DIRS in TEMPLATES with TEMPLATES_DIR
     • Update ALLOWED_HOSTS with ['app_name.heroku.com', 'localhost']

4. Store Static and Media files in Cloudinary and Deploy to Heroku:

   • Create three directories in the main directory; media, storage and templates.
   • Create a file named "Procfile" in the main directory and add the following:
     • web: gunicorn project-name.wsgi
   • Log in to Heroku using the terminal heroku login -i.
   • Then run the following command: heroku git:remote -a your_app_name_here and replace your_app_name_here with the name of your Heroku app. This will link the app to your Gitpod terminal.
   • After linking your app to your workspace, you can then deploy new versions of the app by running the command git push heroku main and your app will be deployed to Heroku.

• lucid - "database structure and wirerframes"
• pexel "images"
• bootstrap
• stackoverflow
• Django Docs
• Summernote GitHub Docs
• Cripsy Forms Docs
• CodeInstitute - "I Think Therefore I Blog"
• Searchbar
• I have to give a shout out the the tutuor suppport also for there help,

After having a bit of a meltdown we have a function website.. Things id like to improve or change

• Search bar to work differenlty. Be able to stay on the same page while searching. ie on homepage and the serach bar as a drop down.
• Change the layout of comments section, add an infinite cycle like facebook comments..
• Create a profile page like github
• Next would be to incororate chat/message element.. facebook message example.
• Follow specif people/blog catergories that interest you.
• Get a notifaction for new blogs that your interested in.
• Thinking about removing home button all together as home is also the logo/name.
• add error message to the project